盒子模型

发布于 2023-07-02  369 次阅读


1. 盒子模型介绍

盒子

  1. 页面中的每一个标签,都可看做是一个“盒子”,通过盒子的视角更方便的进行布局
  2. 浏览器在染(显示)网页时,会将网页中的元素看做是一个个的矩形区域,我们也形象的称之为盒子

盒子模型

​ CSS 中规定每个盒子分别由: 内容区域 (content) 、内边距区域(padding) 、边框区域(border) 、外边距区域(margin)构成,这就是盒子模型

111

盒子高度=边框+内边距+内容

2. 内容区宽高

【注意!】width和height默认设置的是内容区的大小,不是整个盒子的大小

属性名 作用 属性值
width 内容区域-宽 数字+px 或 百分比
height 内容区域-高 数字+px或 百分比

3. border边框

属性名 作用 属性值
边框粗细 border-width 数字+px
边框样式 border-style 实线solid、虚线dashed、点线dotted
边框颜色 border-color 颜色取值

也可以通过border一次给以上三个都设置的

  • 如果想给单方向设置边框
  • border-方位词

4. 盒模型自动内减

  • CSS3盒模型:
  • 属性名:box-sizing
  • 属性值:border-box

例:如下案例,宽高都设置成300,还设置了边框和内边距。配置box-sizing:border-box以后,会自动减小内容区的大小,从而使整个盒模型的宽高保持300

div {
    width: 300px;
    height: 300px;
    background-color: pink;
    border: 10px solid #000;
    padding: 20px;
    /* 自动内减 */
    box-sizing: border-box;
}

222

5. 外边距折叠现象

5.1. 合并现象

场景:垂直布局的块级元素,上下的margin会合并

结果:最终两者的距离边恒margin的最大值

解决办法:避免就好

​ 只给其中一个盒子设置margin

5.2. 坍塌现象

场景:互相嵌套块级元素,子元素的margin-top会作用在父元素上

结果:导致父元素一起往下移动

思路:

​ 方案一:子元素的margin-top和父元素的margin-top贴在一起,发生了类似合并现象的情况。为了解决这个问题,我们只需要想办法将这两个margin-top用东西分隔开即可。

​ 方案二:上面的方法会导致添加不必要的因素,导致页面不精准。所以可以使用下述的方法234

解决方法:

  1. 给父元素设置border-top或者padding-top

    1. 给父元素设置overflow:hidden

    2. 转换成行内块元素

    3. 设置浮动

6. 行内元素的margin和padding无效情况

场景:给行内元素设置margin和padding

结果:

  1. 水平方向的margin和padding布局中有效
  2. 垂直方向的margin和padding不居中无效

7. 不会撑大盒子的特殊情况

对于块级元素来说

  1. 如果子盒子没有设置宽度,此时子盒子的宽度,默认是父盒子的宽度
  2. 此时给子盒子设置左右的padding或者左右的border,此时不会撑大盒子

8. 出现异常情况的排查办法

222

如人饮水,冷暖自知。
最后更新于 2023-08-20