盒模型知识点汇总（附实例、图解）

目录

1. 边框属性
   1.1 表格边框
   1.2 圆角框的使用
   1.3 关于input标签边框默认初始化的内容
2. 内边框属性
3. 外边距
   3.1 盒子水平居中
   3.2 margin垂直合并现象
   3.3 margin包含塌陷现象及解决方法
4. 关于盒子大小的计算
5. 盒子模型布局稳定性
6. css3盒模型
7. 盒子阴影box-shadow
8. 页面初始化

正文

1. 边框属性

      /* 设置上边框的宽度 */
       border-top-width: 10px;
   
       /* 设置上边框的颜色 */
       border-top-color: red;
       
       /* 设置上边框的样式：虚线、实线、点线等 */
       border-top-style: dashed;
   

下边框同上

       边框的样式设置语法能合写
        border-top: 宽度 样式 颜色;

border-left: 6px double yellow;

一行css设置上下左右所有边框的样式 （连写）

 border: 10px dotted yellow;

/* 去掉默认边框兼容性最好的写法 */
border: 0 none;

1.1 表格边框

要设置表格边框border得同时设置在table标签跟td标签上

只设置在table上时：

同时设置时：

边框合并：

Border-collapse
取值：
separate： 边框独立
collapse： 相邻边被合并

 border-collapse: collapse;

效果：

1.2 圆角框的使用

Border-radius
取值：
< length > ：用长度值设置对象的圆角半径长度。不允许负值
< percentage >： 用百分比设置对象的圆角半径长度。不允许负值

例子：

border-radius: 50%;

效果：

注意：border-radius：

• 一个值时表示四个角都切相同的
• 两个值时第一个值表示左上跟右下另一个值表示右上跟左下
• 三个值时第一个表示左上角，第二个值表示右上角跟左下角，第三个值表示右下角
• 四个值时依次从左上角顺时针方向表示

半圆的做法：
盒子的宽为高的两倍
只设置相邻两边有圆角

 div{
            width: 200px;
            height: 100px;
            background: pink;
            border-radius: 100px 100px 0 0;
        }

1.3 关于input标签边框默认初始化的内容

/去掉input默认初始边框/
border: none;

/* 重新设置自己想要的边框 */
border: 10px solid pink;

         /* 去掉input获得焦点后的边框 */
         outline: none;

2. 内边框属性

padding属性用于设置内边距，也是复合属性，相关设置如下：

• padding-top：上内边距
• padding-right：右内边距
• padding-bottom：下内边距
• Padding-left：左内边距
• padding：上内边距[右内边距 下内边距 左内边距]

           /* 顺序：上 右 下 左 */
            padding: 1px 2px 3px 4px;

padding的值：

• 一个值的时候：上右下左都是该值
• 两个值时：第一个表示垂直方向，第二个表示水平方向
• 三个值时：第一个值表示上内边距，第二个表示左右内边距，第三个表示下内边距
• 四个值时：从上面开始，依次顺时针方向内边距(上右下左)

内边距是享有背景色的,文本内容位置会受内边距影响

3. 外边距

margin属性用于设置外边距，也是复合属性，相关设置如下：
~margin-top：上内边距
~margin-right：右内边距
~margin-bottom：下内边距
~margin-left：左内边距
~margin：上内边距[右内边距 下内边距 左内边距]

               /* 上右下左 */
            margin: 10px 0 20px 200px;

            /* 上下一起，左右一起 */
            margin: 20px 25px;

Margin的值：

• 一个值的时候：上右下左都是该值
• 两个值时：第一个表示垂直方向，第二个表示水平方向
• 三个值时：第一个值表示上内边距，第二个表示左右内边距，第三个表示下内边距
• 四个值时：从上面开始，依次顺时针方向内边距(上右下左)

3.1 盒子水平居中

对于元素应用宽度属性width,并将左右的外边距都设置为auto，可使块级元素居中，实际工作中常用这种方式进行网页布局.

 .box1 {
            width: 100px;
            margin: 0em auto;
        }

text-align用来设置文本在盒子中水平居中

注意：如果要让盒子水平居中必须满足两个条件：

            1，必须是块级元素（不是块则转为块）
            2，盒子必须设置宽度

对于行内块级元素在盒子中水平居中使用text-align：center；

3.2 margin垂直合并现象

当盒子在垂直方向上设置了同一个位置的margin值的时候，两者取最大的那个

.box {
            margin-top: 10px;
            margin-top: 100px;
        }

解决方案：无

所以在布局时尽量避免这种情况的出现

3.3 margin包含塌陷现象及解决方法

Margin包含塌陷现象：
有父子两盒子，子盒子嵌套在父盒子中，当在子盒子样式设置用margin-top想将其相对于父盒子向下移时，父盒子被连带拖下去的现象

初始时：

给子盒子设置margin-top发生塌陷：

解决方法：
1, 给父盒子加边框
2, 给父盒子加：overflow：hidden;

4. 关于盒子大小的计算

盒子的最终宽度= width+左右border+左右padding+左右margin
盒子的真实宽度=width+左右border+左右padding
盒子的最终高度=height+上下border+上下padding+上下margin
盒子的真实高度=height+上下border+上下padding

设置border跟padding都会影响盒子的真实大小

5. 盒子模型布局稳定性

布局建议：
按照优先使用 宽度（width） 其次使用内边距（padding） 再次 外边距（margin）
即：
Width>padding>margin
原因：
1，margin容易产生塌陷现象
2，padding会影响盒子大小

6. css3盒模型

Css3中可以通过box-sizing来指定盒模型。即可指定为content-box、border-box。这样我们计算盒子的大小就发生了改变

可分两种情况：

1，box-sizing：content-box 盒子大小为width+padding+border content-box：此值为默认值，其让元素维持W3C的标准box Mode
2，Box-sizing：border-box 盒子大小为width,就是说，padding和border是包括在盒子里面的

/* box-sizing: content-box; 保持盒子内容大小不变 /
/ box-sizing: border-box; 保持盒子的大小不变，只改变content的大小 */

7. 盒子阴影box-shadow

语法：

  水平距离 垂直距离 模糊距离 阴影距离 阴影类型
box-shadow: h-shadow v-shadow blur spread color inset;

  注意：设置盒子阴影时，水平距离跟垂直距离是必须要设置的，其他可选
  盒子阴影默认就是外部阴影outset，不用再设置outset了再设置反而错了

例子：

box-shadow: 10px 10px 5px 5px skyblue;

效果：

盒子多阴影

不同阴影用逗号隔开

例如：

          box-shadow: 210px 10px red,
      		          10px 210px yellow;

效果：

当多阴影重叠时，第一个阴影在最上面

例如：

 box-shadow: 10px 10px red,
             18px 18px yellow;

效果：

8. 页面初始化

为了更方便的控制网页中的元素，制作网页时，可使用如下代码清除元素的默认内外边距

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