盒模型CSS常用属性

为什么80%的码农都做不了架构师？>>>   

一.盒模型

       1. XHTML中大部分的元素（特别是块状元素）都可以看做一个盒子，而网页的元素的定位实际就是这些大大小小的盒子在页面中的定位。这些盒子在页面中是“流 动”的，当某个块状元素被CSS设置了浮动属性，这个盒子就会“流”到上一行。网页布局即关注这些盒子在页面中如何摆放、如何嵌套的问题，而这么多盒子摆 在一起，最需要关注的是盒子尺寸计算、是否流动等要素。

    2.外边距属性即CSS的margin属性，CSS中可拆分为margin-top（顶部外边距）、margin-bottom（底部外边距）、 margin-left（左边外边距）和margin-right（右边外边距）。

    3.CSS的边框属性（border）和内边距属性（padding）同样 可拆分为4边。在Web标准中，CSS的width属性即为盒子所包含内容的宽度，而整个盒子的实际宽度即为：

          盒子宽度=padding-left+border-left+margin-left+width+padding-right+border- right+margin-right相应地，

      CSS的height属性即为盒子所包含内容的高度，而整个盒子的实际高度即为：盒子高度=margin-top+border-top+padding-top+height+padding-bottom+border -bottom+margin-bottom.

   二.常用属性

        1、字体属性(type)
            font-family(使用什么字体)
            font-style(字体的样式，是否斜体)：normal/italic/oblique
            font-variant(字体大小写)：normal/small-caps
            font-weight(字体的粗细)：normal/bold/bolder/lithter
            font-size(字体的大小)：absolute-size/relative-size/length/percentage
        2、颜色和背景属性(backgroud)
            color(定义前景色，例如：p{color:red})
            background-color(定义背景色)
            background-image(定义背景图片)
            background-repeat(背景图案重复方式)：repeat-x/repeat-y/no-repeat
            background-attachment(设置滚动)：scroll(滚动)/fixe(固定的)
            background-position(背景图案的初始位置)：percentage/length/top/left/right/bottom
        3、文本属性：(block)  
            定义间距：
            word-spacing(单词之间的距离)
            letter-spacing(字母之间的距离)
            text-decoration(定义文字的装饰)：nore/underline/overline/line-through/blink
            vertical-align(元素在垂直方向的位置)：baseline(基线)/sub/super/top/text-top/middle/bottom /text-bottom
            text-transform(使文本转换为其它方式)：capitalize(大写)/uppercase(首字母大写)/lowercase(小写)/none
            text-align(文字的对齐)：left/right/center/justify
            text-indent(文本的首行缩进)length/percentage
            line-height(文本的行高):normal/numbet/lenggth/percentage(百分比)
        定义超链接：
            a：link {color:green;text-decoration:nore}(未访问过的状态)
            a：visited {color:ren;text-decoration:underline;16pt}(访问过的状态)
            a:hover {color:blue;text-decoration:underline;16pt}(鼠标激活的状态)
        4、块属性(block)
            边距属性：
            margin-top(设置顶边距)
            margin-right(设置右边距)
            margin-bottom(设置底边距)
            margin-left(设置左边距)
            填充距属性：
            padding-top设置顶端真充距)
            padding-right设置顶端真充距)
            padding-bottom设置顶端真充距)
            padding-left设置顶端真充距)
        5、边框属性(border)
            border-top-width(顶端边框宽度)
            border-right-width(右端边框宽度)
            border-bottom-width(底端边框宽度)
            border-left-width(d左边框宽度)
            border-width(一次定义边框宽度)
            border-color(设置边框颜色)
            border-style(设置边框样式)
            border-top(一次定义顶端各种属性)
            border-right(一次定义右端各种属性)
            border-bottom(一次定义底端各种属性)
            border-left(一次定义左端各种属性)
        图文混排：
            width(定义宽度属性)
            height(定义高度属性)
            float(文字环绕在一个元素的四周)
            clear(定义某一边是否有环绕)
        6、项目符号和编号(list)
            display(定义是否显示)
            white-space(怎样处理空白部分)：normal/pre/nowrap
            list-style-type(在列表前加项目符号)disc(圆点)/circle(圈)/square（方形）
            /decimal（阿拉伯数字）/lower-roman(小写罗马数字)/upper-roman(大写罗马数字)/lower-alpha(小  写英文字母)/upper-alpha(大写英文字母)/nore
            list-style-tyle(在列表前加图案):<url>/none
            list-style-position(决定列表项中第二行的起邕位置)
list-style(一次性定义所有属性)
        7、定位（positioning） 即层属性
            Type：设定对象的定位方式。
            有三种方式：Absolute（绝对定位）、Relative（相对定位）、Static（无特殊定位）。相对应的CSS属性是”position”。
            Visibility：设定对象定位层的最初显示状态。有三种状态：Inherit（继承父层的显示属性）、Visible（对象可视）、Hidden隐藏对象。相对应的CSS属性是”visibility”。
            Z-Index：设置对象的层叠顺序。编号较大的层会显示在编号较小的层上边。变量值可以是正值也可以是负值。相对应的CSS属性是”z-index”。
            Overflow： 设置如果层的内容超出了层的大小时如何处理。有四种处理方式：visible，增加层的大小，从而将层的所有内容显示出来；hidden，保持层的大小不 变，将超出层的内容剪裁掉；Scroll，总是显示滚动；Auto，只有在内容超出层的边界时才显示滚动条。相对应的CSS属性是”overflow”。 Placement：设置对象定位层的位置和大小。可以分别设置left（左边定位）、top（顶部定位）、width（宽）、height（高）。相对 应的CSS属性分别是”left; top; width; height”。Clip：定义定位层的可视区域。区域外的部分为不可视区，为透明的。可以理解为在定位层上放一个矩形遮罩的效果。相对应的CSS属性是 ”clip”。         

转载于:https://my.oschina.net/hxwny/blog/291142