所谓盒子模型就是把HTML页面的元素看作一个矩形盒子,也将就是盛装内容的容器,每个矩形都市元素的内容,内边距(padding

),边框(border),和外边距(margin)组成.

border-style的属性值

none:没有边框属性值 solid:边框为单实线(最常用)

dashed:边框为虚线 dotted:边框为点线 double:边框为双实线

boder-radio:设置边框的圆角半径

边框综合设置 border:四边框的宽度四变宽的样式四边框颜色

内边距(padding)

padding属性用于设置内边距,是指边框与内容之间的距离

padding:第一个值第二个值第三个值第四个值这四个值分别表示上左下右顺时针排序,只有两个值得时候表示上下,左右三个值得时候,第一个值是上,第二个值是左右,第三个值是下

外边距 margin属性用于设置外边距,属性值的使用同padding

外边距实现盒子的居中

必须满足以下两个条件:1,必须是块级元素. 2,盒子必指定宽度(width) 然后给左右的外边距都设置为auto,可以使盒子中元素水平居中

外边距塌陷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父盒子,子盒子</title>
    <style>
        .father{
            width:800px;
            height:800px;
            background-color: darkred;
            /*padding-top: 100px;*/
            padding-left: 100px;
            margin-top: 50px;
            /*border-top: 1px solid white;*/
            /*overflow: hidden;  */
            /*对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外
             边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使
             父元素的上外边距为0，也会发生合并。*/
            /*解决方案：
            1. 可以为父元素定义1像素的上边框或上内边距。
            2. 可以为父元素添加overflow:hidden*/
        }
        .child{
            width:300px;
            height:300px;
            background-color: pink;
            margin-top: 100px;
            margin-left: 50px;
            /*float:left;*/
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="child"></div>
    </div>
</body>
</html>

css盒子模型的理解

外边距实现盒子的居中

猜你喜欢