zoukankan      html  css  js  c++  java
  • 学习 day4 html 盒子模型

    盒子模型

    1.框模型

    框:页面上所有元素都可以称为“框”

    框模型:(BOX Model),又称盒子模型

    定义框处理元素内容、内边距padding、外边距margin、边框的样式border

    外边距margin

    margin-方向:
            margin-left:
            margin-right:
            margin-top:
            margin-bottom:

    不定义方向 一个值 默认四个方向一样;  两个值  第一个  左右   第二个  上下 ; 三个不常见 ;  四个值  左  上   右    下 

    左右外边距设置为auto时,当前的块级元素会居中显示

    内边距padding

    padding-方向:

            padding-left
            padding-right:
            padding-top:
            padding-bottom:

    不定义方向 一个值 默认四个方向一样;  两个值  第一个  左右   第二个  上下 ; 三个不常见 ;  四个值  左  上   右    下

    边框的样式border

    border-方向:

        border-left
            border-right:
            border-top:
            border-bottom:

    不定义方向 一个值 默认四个方向一样;  两个值  第一个  左右   第二个  上下 ; 三个不常见 ;  四个值  左  上   右    下

    注意:
    1.有些块级元素会存在默认外边距   如  body   h1~h6   p
    2、垂直外边距合并
        两个垂直外边距相遇时,将会合成一个外边距。最终外边距的值是两者中 边距较大的的值。

    3、背景图片
        属性:background-image
        取值:url(图像路径)
            background-image:url("");

    1、背景重复
            默认情况,背景图会在水平和垂直两个方向都出现重复的效果(平铺)
            属性:background-repeat
            取值:
            repeat :默认值,水平垂直平铺
            repeat-x : 水平平铺
            repeat-y : 垂直平铺
            no-repeat : 不平铺(用的最多)
    2、背景图片固定
        属性:background-attachment
        取值:

        fixed,背景图像固定
        3、背景定位
        改变背景图像在元素中的位置
        属性:background-position
        取值:
        x y :x表示水平方向移动距离,+向右,-向左,y表示垂直方向移动距离,+向下,-向上
        x% y% :
        0% 0% : 显示在元素的左上方
        100% 100% : 显示在元素的右下方
        50% 50% : 居中
        left :靠左
        right:靠右
        center :将元素显示在水平或垂直方向的中间
        top:靠上
        bottom:靠下
        background-position:left top;
        background-position:top left;
        background-position:center;

    4、文本格式化    
        
        1、指定字体
        font-family:选择字体格式
        font-family:"microsoft yahei","arial","verdana";
        2、字体大小
        font-size:value;  
        
        font-size:12px;
        3、字体加粗      normal正常  
        font-weight:normal / bold ;  
        400 - 900
        4、字体样式(斜体)   i
        font-style:normal/italic;
        5、小型大写字母   font-variant字体型状
        font-variant:normal/small-caps;
        6、字体属性
        font:font-style font-variant font-weight font-size font-family;
        常用方式:
        font:font-size font-family;
        font:12px "微软雅黑",arial,verdana;

      

  • 相关阅读:
    myeclipse安装
    win下Velocity安装和试用
    win下Java环境安装
    零基础编程指南(By Turtle)
    快速将某个文件夹下的所有文件中的匹配数据替换
    补丁数组(增删改查都较快的数组)
    addView的误区
    NOIP普及组:买铅笔
    由抽奖软件想到的随机算法总结
    Codeforces Round #220 (Div. 2) 解题报告
  • 原文地址:https://www.cnblogs.com/xujindi/p/10574298.html
Copyright © 2011-2022 走看看