前端基础-CSS基础（七）

efonfighting

发布于 2019-12-24 11:58:02

3230

发布于 2019-12-24 11:58:02

文章被收录于专栏：一番码客一番码客

本文目录

盒子模型

参考

盒子模型

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .div1{
                width: 100px;
                height: 200px;
                border: 5px solid red;
                padding: 10px 20px 30px 40px;
                margin: 0 auto;
                box-sizing: border-box; /*不更改盒子的大小*/
            }
        </style>
    </head>
    <body>
        <div class="div1"></div>
    </body>
</html>

外边距不会改变盒子的大小，盒子大小：
- 宽 = width + border左右的宽度 + padding左右的宽度。
- 高 = height + border上下的宽度 + padding上下的宽度。
padding
- padding：10px；上下左右都是10px。
- padding：10px 20px；上下10px，左右20px。
- padding：10px 20px 30px；上10px，左右20px，下30px。
- padding：10px 20px 30px 40px；上右下左顺时针指定值。
margin：0 auto；设置水平居中。
可定义宽高的元素：
- 块级元素（独占一行）：p、div、h1-h6、ul、li、ol、dl、dt、dd。
- 替换元素：img、input、textarea。
marging可以指定负值。
默认情况下，块级元素时有margin的，因此可以自己声明样式覆盖默认样式。
margin设置为auto时，元素会有水平居中。
外边距合并：垂直方向的外边距相遇时会合并成一个外边距，这个外边距的高度等于较大的那个外边距。