学习CSS盒子模型Day10

1.盒子模型

1.1 看透网页布局的本质

网页布局过程:

        1.先准备好相关的网页元素。网页元素基本都是盒子Box。

        2.利用CSS设置好盒子样式，然后摆放到相应位置。

        3.往盒子里面装内容

本质：利用CSS摆盒子

1.2 盒子模型组成

CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距、和实际内容。

1.3 边框（border）

border可以设置元素的边框。边框有三部分组成：边框宽度（粗细） 边框样式 边框颜色

border： border-width || border-style || border-color

    <style>
        div {
            width: 300px;
            height: 200px;
            /* border-width 边框的粗细  一般情况下都用 px */
            border-width: 5px;
            /* border-style 边框的样式  solid 实线边框   dashed 虚线边框  dotted 点线边框*/
            border-style: solid;
            /* border-style: dashed; */
            /* border-style: dotted; */
            /* border-color 边框的颜色  */
            border-color: pink;

        }
    </style>

    <style>
     div {
            width: 300px;
            height: 200px;
            /* border-width: 5px;
            border-style: solid;
            border-color: pink; */
            /* 边框的复合写法 简写:  */
            /* border: 5px solid pink; */
            /* 上边框 */
            border-top: 5px solid pink;
            /* 下边框 */
            border-bottom: 10px dashed purple;
        }
    </style>

1.4 表格的细线边框

border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

border-collapse:collapse；//表示相邻边框合并在一起

collapse单词时合并的意思

1.5 边框会影响盒子的实际大小

1.测量盒子大小的时候不量边框

2.如果测试的时候包含了边框，则需要width/height 减去边框宽度

1.6 内边距

padding属性用于设置内边距，即边框与内容之间的距离。

 当我们给盒子指定padding值之后，发生了2件事情；

1.内容和边距有了距离，增加了内边距。

2.padding影响了盒子实际大小。

也就是说，如果盒子已经有了宽度和高度，此时在指定内边框，会撑大盒子