css盒子模型有几种?以及盒模型设置？

2023-09-12 12:26| 来源: 网络整理| 查看: 265

css盒子模型有几种?以及盒模型设置？ 1.CSS盒模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。

2.W3C盒子模型(标准盒模型)和IE盒子模型(怪异盒模型) （1）W3C盒子模型(标准盒模型)

1.标准盒模型中width指的是内容区域content的宽度；height指的是内容区域content的高度。 2.标准盒模型下盒子的大小 = content + border + padding + margin

在这里插入图片描述

.box { width: 200px; height: 200px; border: 20px solid black; padding: 50px; margin: 50px; }

在这里插入图片描述

（2）IE盒子模型(怪异盒模型)

1.怪异盒模型中的width指的是内容、边框、内边距总的宽度（content + border + padding）；height指的是内容、边框、内边距总的高度 2.怪异盒模型下盒子的大小=width（content + border + padding） + margin

在这里插入图片描述

.box { width: 200px; height: 200px; border: 20px solid black; padding: 50px; margin: 50px; }

在这里插入图片描述

3.两种模式下如何解决样式的兼容性问题

建议不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。

4.设置盒子模型（CSS3指定盒子模型种类）：语法： box-sizing: content-box; box-sizing: border-box; box-sizing: inherit;

即box-sizing属性可以指定盒子模型种类，content-box指定盒子模型为W3C（标准盒模型），border-box为IE盒子模型（怪异盒模型）。

在这里插入图片描述

【本文地址】

今日新闻