CSS盒模型

文档流

网页是一个多层的结构，设置样式也是一层一层的设置，最终我们看到的最上面的一层。

文档流是网页最底层

​ 我们创建的元素默认情况下，都在文档流中

​ 元素分为两种状态：在文档流中，脱离文档流

元素在文档流中的特点

​ 块元素

​ 1:会独占一行

​ 2:块元素的宽度默认是父元素的100%

​ 3:块元素的高度默认是被内容撑开的

​ 内联元素（行内元素）

​ 1:不会独占一行

​ 2:宽度高度默认都是被内容撑开的，不能自己定义宽高

​ 行内块元素

​ 1、不会独占一行，可以设置宽高

一旦元素通过某种方式，例如浮动、绝对定位等等，脱离文档流，则原来在文档流中划分元素类型，特点都不复存在

盒模型

css盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、边距、填充和实际内容。盒子模型允许我们在其他元素和周围元素边框之间的空间放置元素。

margin(外边距)-清除边框外的区域，外边距是透明的

Border(边框)-围绕在内边距和内容外的边框

padding(内边距)-清除内容周围的区域，内边距是透明的

Content(内容)-盒子的内容，显示文本和图像

影响盒子大小的因素：内容区，内边距，边框会影响盒子的大小，外边距不会影响

• 所谓盒子模型
• 就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器
• 盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。
• 盒子里面的文字和图片的等元素是内容区域
• 盒子的厚度成为盒子的边框
• 盒子内容与边框的距离是内边距（类似单元格的cellpadding）
• 盒子与盒子之间的距离是外边距（类似单元格的cellspacing）

1、盒子边框（Box Boder）

语法：

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

属性	作用
border-width	定义边框粗细，单位是px（与电脑分辨率相关）
border-style	边框的样式
bortder-color	边框颜色

上边框	下边框	左边框	右边框
borber-top-style:样式	borber-bottom-style:样式	borber-left-style:样式	borber-right-style:样式
borber-top-width:宽度	borber-bottom-width:宽度	borber-left-width:宽度	borber-right-width:宽度
borber-top-color:颜色	borber-bottom-color:颜色	borber-left-color:颜色	borber-right-color:颜色
borber-top:宽度,样式,颜色	borber-bottom:宽度,样式,颜色	borber-left:宽度,样式,颜色	borber-right:宽度,样式,颜色

• 边框的样式
  none：没有边框即忽略所有边框的宽度（默认值）
  solid： 边框为单实线
  dashed： 边框为虚线
  dotted : 边框为点线

.box {
            width: 200px;
            height: 200px;
            background-color: blueviolet;
            /* 实线边框 */
            /* border-style: solid; */
            /* 虚线边框 */
            /* border-style: dashed;  */
            /* 点线边框 */
             /* border-style: dotted;  */
            /* 边框宽度 */
             /* border-width: 10px; */
            /* 边框颜色 */
            /* border-color: black; */
            /* 边框圆角 */
            /* border-radius: 10px; */
            /* 取消四个边框 */
            /* border: none; */
            /* 上边框 */
            /* border-top: 10px solid red; */
            /* 左边框 */
            /* border-left: 10px solid red; */
            /* 右边框 */
            /* border-right: 10px solid red; */
            /* 下边框 */
            /* border-bottom: 10px solid red; */
            /* 简单写法 */
            /* border: 10px solid red; */
        }

2、表格的细线边框

通过CSS属性：

table{border-collapse：collapse；}（表示相邻边框合并在一起）

3、内边距（padding）

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

注意
在改内边距时，盒子会变大

            /* 上下左右都是20像素内边距 */
            /* padding: 20px; */
            /* 上下是10，左右是20的内边距 */
            /* padding: 10px 20px; */
            /* 上10，左右20，下30 */
            /* padding: 10px 20px 30px; */
            /* 顺时针 10 20 30 40  */
            padding: 10px 20px 30px 40px;

4、内盒尺寸计算（元素实际大小）

盒子的实际大小=内容的宽度和高度+内边距+边框

 /* 盒子的实际大小=内容的宽度和高度+内边距+边框 */
 /* 内边距是一定要给的，只能改变内容宽度 让他减去多出来的内边距 */

特殊情况：如果没有给一个盒子指定宽度，此时给这个盒子指定padding，则不会撑开盒子。

5、外边距（margin）

块级盒子实现水平居中

• 盒子必须指定宽度
• 左右设置auto

写法：

            /* 让块级盒子水平居中对齐 */
            /* margin-left: auto;
            margin-right: auto; */

            /* margin: 0 auto; */

            margin: auto;
            /* 让块级盒子垂直居中对齐 */
            /* margin-top: auto;
            margin-bottom: auto; */

6、文字居中和盒子居中区别

1、文字水平居中是text-align：center，而且还可以让行内元素和行内块元素居中对齐
2、块级盒子水平居中 左右margin改为auto

text-align: center;

/* 文字 行内元素 行内块元素水平居中 */
 margin: 10px auto;
/* 块级盒子水平居中 左右margin 改为auto 就可以了 上下margin都可以 */

7、插入图片和背景图片的区别

1、插入图片 应用于如产品展示类 ，移动位置只能靠盒模型padding margin
2、背景图片一般用于小图标背景 超大背景图片 只能通过background-position

 img {
        width: 80px;/*插入图片更改大小 width个height*/
        height: 100px;
        margin-top: none;/*插入图片更改位置 可以用margin 或padding 盒子模型*/
        margin-left: none;/* 插入当图片也是一个模型*/
    }
    div {
        width: 400px;
        height: 400px;
        border: 1px solid purple;
        background: burlywood;
        background-position: 30px 50px;/*背景图片更改位置*/
    }

8、清除元素的默认内外边距

代码（以后写CSS第一句代码）：

    * {
        padding: 0;/*清除内边距*/
        margin: 0;/*清除外边距*/
    }

9、外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并

1. 相邻块元素垂直外边距合并

   当上下相邻的两个块元素相遇时，如果哦上面的元素有下外边距margin-bottom

   下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom和margin-top之和

   取两个值得较大者这种现象被称相邻块元素垂直外边距的合并（也称外边距塌陷）

   解决方案：尽量只给一个盒子添加margin值

2. 嵌套块元素垂直外边距的合并（塌陷）

   对于两个嵌套关系的块元素，如果父元素没有上内边距及边框

   父元素的上外边距会与子元素的上外边距发生合并

   合并后的外边距为两者中的较大者

解决方案：
1、可以为父元素定义上边框
2、可以为父元素定义上内边框
3、可以为父元素添加overflower：hidden

        .fathere {
            width: 500px;
            height: 500px;
            background-color: pink;
            /* 嵌套关系 垂直外边距合并 解决方案 */
            /* 1.父亲定义上边框 transparent 透明 */
            /* border-top: 1px solid transparent; */
            /* 2.可以给父亲指定一个上padding值 */
            /* padding-top: 1px; */
            /* 3.给父亲添加overflower：hidden */
            overflow: hidden;

    
        }
        .son {
            width: 200px;
            height: 200px;
            background-color: purple;
            margin-top: 100px;
        }

还有其他方法，如浮动，固定，绝对定位

10、盒子模型布局稳定性

根据稳定性来分，按照优先使用 宽度 其次使用内边距 再次使用 外边距

width>padding>margin

原因：

margin会有外边距合并还有le6下面margin 加倍的bug，所以最后使用
padding 会影响盒子大小，需要进行加减计算，其次使用
width没有问题，经常使用宽度剩余法 高度剩余法来做