css-盒子模型

css-盒子模型

css-盒子模型

一、padding(内边距)
    元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。CSS padding 属性定义元素边框与元素内容之间的空白区域。
    padding-left/right/top/bottom    左内边距/右内边距/上内边距/下内边距
    例如:h1 {
          padding-top: 10px;
          padding-right: 0.25em;
          padding-bottom: 2ex;
          padding-left: 20%;
          }
    可以单独使用控制单独一边的效果,当然也可以合并一起使用
    例如:
        padding:2px 3px 4px 5px;    /*上内边距2px 右内边距3px 下内边距4px 左内边距5px*/
        padding:2px 3px 4px;        /*上内边距2px 右/左内边距3px 下内边距4px*/
        padding:2px 3px;        /*上/下内边距2px 右/左内边距3px*/
        padding:2px;            /*上右下左内边距都为2px*/
二、border(边框)
    在 HTML 中,我们使用表格来创建文本周围的边框,但是通过使用 CSS 边框属性,我们可以创建出效果出色的边框,并且可以应用于任何元素。元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。
    1、border-left/right/top/bottom(与padding类似)
    2、border-style(边框样式)
        border-left/right/top/bottom-style
            例如:border-style:dotted solid double dashed;
            /*上边框是点状 右边框是实线 下边框是双线 左边框是虚线*/
        具体样式:
            none        /*无效果,默认*/
            solid        /*实线*/
            double        /*双实线*/
            dotted        /*点状*/
            dashed        /*虚线*/
            groove        /* 3D 凹槽边框*/
            ridge        /*3D 垄状边框*/
            inset        /*3D inset 边框*/
            outset        /*outset 边框*/
            inherit        /*规定应该从父元素继承边框样式*/
            
    3、border-color(边框颜色)
        border-left/right/top/bottom-color
        例如:p {
              border-style: solid;
              border-color: blue rgb(25%,35%,45%) #909090 red;
            }
    4、border-width(边框宽度)
        border-left/right/top/bottom-width
        例如:p {
            border-style: solid; border-width: 15px 5px 15px 5px;
            }
    5、border-radius(边框半径,可绘制圆角边框)
        例如:div{
            border:2px solid;
            border-radius:25px 50px 75px 100px;
            -moz-border-radius:25px 50px 75px 100px; /* Old Firefox */
            }
            与border的其他属性相似,它也是可以作用在四个角上的(左上,右上,右下,左下)
    6、box-shadow (边框阴影)
        例如:div{box-shadow: 10px 10px 5px red;}    
            表示:水平方向的距离10px(正值:阴影在右边)    /*可以为负值,负值则表示阴影在左边*/
                  竖直方向的距离10px(正值:阴影在左边)    /*可以为负值,负值则表示阴影在上面*/
                  模糊度5px                    
                  阴影颜色red                
    7、border-image(边框图)
        border-image-sourcesource: url(xx.png)
        border-image-width:边框宽/九宫格格宽
        border-image-repeat: stretch(拉伸)/repeat(重复)/round(平铺)
        当然也可以将这三种方式合并在一起,例如:
            div{
                border: 20px solid transparent;
                border-image:url(box.png) 20 round;    /*注意:此种写法width的值不能带单位*/
                /*-webkit-border-image:url(box.png) 20 round;*/
            }
    
三、margin(外边距)
    margin-left/right/top/bottom(与padding类似)
    (略)

四、补充
    outline(轮廓)
        outline-color || outline-style || outline-width
        该属性是复合属性,且不占页面空间,用法如下:
        img { outline-color: orange; outline-style: solid ; outline-width: medium ; }
五、综合
    1、一个区块元素所占的空间总大小:
css-盒子模型
        X轴:margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
        同理,Y轴:margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom
    2、区块元素合并
        无浮动
            竖直方向上排布,相邻元素的Margin会合并,合并后的值是二者指定的间距中的较大值,Padding各自独立;
css-盒子模型
            当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并。请看下图:
css-盒子模型
            假设有一个空元素,它有外边距,但是没有边框或填充。在这种情况下,上外边距与下外边距就碰到了一起,它们会发生合并:
css-盒子模型
            如果这个外边距遇到另一个元素的外边距,它还会发生合并:
css-盒子模型
        有浮动
            padding各自独立;
            竖直/水平方向Margin上都各自独立
    3、内联元素合并
        内联元素:水平方向上排布,一行不够自动排布到下一行,
        Margin:水平方向上各自独立,不合并;竖直方向上无效。
        Padding:水平方向上各自独立;竖直方向上有效但不占用页面空间(即上下两行的padding可能会重叠)
六、其他:
        (1)outline、box-shadow不会占用页面空间,故也不计入盒子模型的计算。
        (2)float会对间距的合并产生影响
        (3)区块若想在父元素中水平居中,margin: 0  auto;    由浏览器自动计算左右间距——平均分配
        (4)为了屏蔽浏览器默认值造成的兼容性问题,页面布局时可以添加 *{margin:0; padding:0}

上一篇:Bootstrap全局css


下一篇:生成ISO文件