盒子模型介绍
发布网友
发布时间：2022-09-14 19:50
共2个回答
懂视网
时间：2023-02-20 21:31
盒子模型是指CSS盒子模型，CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。
CSS假定所有的HTML文档元素都生成一个描述该元素在HTML文档布局中所占空间的矩形元素框，可以形象地将其看作是一个盒子。通过定义一系列与盒子相关的属性，可极大地丰富和促进各个盒子乃至整个HTML文档的表现效果和布局结构。CSS盒子模型由内容区、填充、边框和空白边四部分组成。内容区是盒子模型的中心，呈现盒子的主要信息内容；填充是内容区和边框之间的空间；边框是环绕内容区和填充的边界；空白边位于盒子的最外围，是添加在边框外周围的空间。
CSS盒子模型特点：
1、丰富的样式定义：CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。
2、易于使用和修改：CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。
3、多页面应用：CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。
热心网友
时间：2023-02-20 18:39
作用： CSS 围绕这些盒子产生了一种“盒子模型”概念，通过定义一系列与盒子相关的属性，可以极大地 丰富 和 促进 各个盒子乃至整个 HTML 文档的 表现效果和布局结构 。
组成： 每个盒子都由元素的内容(content)、内边距（padding）、边框（border）和外边距（margin），4个属性组成。
每个属性都包括4个部分：上、右、下、左。属性的4部分可以同时设置，也可以分别设置。
一、内容(content)
宽度width和高度height属性设置，对盒子内容大小的大小进行控制
二、内边距（padding）
padding属性用于设置内边距。 是指边框与内容之间的距离。
a）padding-top、padding-right、padding-bottom、padding-left
b) padding: 1px 2px 3px 4px( 顺时针 )
注意： 后面跟几个数值表示的意思是不一样的。值的个数表达意思：
1个值padding：上下左右边距 比如padding: 3px; 表示上下左右都是3像素
2个值padding: 上下边距 左右边距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素
3个值padding：上边距 左右边距 下边距 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素
4个值padding: 上内边距 右内边距 下内边距 左内边距 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px
三、盒子边框（border）
border 属性来定义盒子的边框，该属性包含3个子属性：border-style(边框样式)，border-color(边框颜色)，border-width(边框宽度)。
1、定义宽度
a） border-top-width、border-bottom-width、border-left-width、border-right-width
b） border-width:2px;
border-width:1px 2px 3px 4px;
注意： 当定义边框宽度时，必须要定义边框的显示样式，由于 默认样式为none ,所以仅设置边框的宽度，由于样式不存在，边框宽度也自动被清除为 0。
2、定义颜色
Demo:border-top-color: green; border-color: yellow;
3、定义样式 border-style:
hidden:隐藏边框(IE 不支持) dotted:点线
dashed:虚线 solid:实线 double:双线边框
4、复合属性
综合写法：border : border-width || border-style || border-color
注意：顺序不能错误。
5、圆角边框（CSS3）：
语法：border-radius: 左上角 右上角 右下角 左下角;
Demo：border-radius: 10px; /* 一个数值表示4个角都是相同的 10px 的弧度 */
border-radius: 50%; /* 100px 50% 取宽度和高度 一半 */
四、外边距（margin）
margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”，定义了元素与其他相邻元素的距离， 这段空白通常不能放置其他内容。
margin-top、margin-right、margin-bottom、margin-left
margin:1px 2px 3px 4px( 顺时针 )
常用功能：
一、盒子水平居中
可以让一个盒子实现水平居中，需要满足一下两个条件：
块级元素和盒子必须指定宽度（width）
左右的外边距都设置为auto，就可使块级元素水平居中。
二、外边距合并
margin的外边距合并（margin collapsing）
margin属性有一个特别的行为，就是外边距合并，这个行为只对普通文档流中的块级元素的 垂直外边距有效； 行内框（inline-block）、浮动元素和绝对定位的原素不会发生外边距合并。
发生外边距合并的两种基本情况：
1、两个或多个垂直毗邻的兄弟元素，上面元素的下边距会与下面元素的上边距发生合并，合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
2.父元素和子元素之间，父元素的上外边距和第一个子元素的上外边距、父元素的下外边距和最后一个子元素的下外边距。发生这种情况的前提是父元素和第一个（或最后一个）子元素之间不存在边框和内边距把外边距分隔开，合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
三、盒子模型和box-sizing
box-sizing是用来 设置width、height的作用对象 的。
三个值:content-box(默认值) 、 border-box 、inherit（继承父类）;
注意：没有margin-box
box-sizing:conten-box，width=元素的内容区 (标准盒子模型)
box-sizing:border-box，width=元素内容区+padding+border (IE盒子模型)
四、背景剪裁 (Background clip)
当我们给一个元素设置background-color和background-imge时，这个背景会覆盖到元素border的外边界，background-clip属性可以用来 调整背景所覆盖的区域:
border-box:背景延伸到边框外，默认值
padding-box：背景延伸到内边距外，但是不会绘制到border。
content-box：背景被裁剪至内容区（content box）外沿。
五、溢流（overflow）
当用绝对的值设置盒子的大小时（比如，固定像素的 width 和 height），内容可能会超出设置的大小，此时内容就会溢流盒子。要控制这时候发生的事情，我们可以使用 overflow 属性。 最常用的：
hidden：溢出部分不会显示
visible：默认值，子元素会从父元素溢出，在父元素外部显示
scroll：生成两个滚动条，通过滚动条来查看完整的内容
auto：根据需要生成滚动条
六、轮廓(Outline)
盒子的 outline 看起来像边界，但是它不是盒模型的一部分。它表现得像边界，但是是画在盒子之上，不会修改盒子的大小（具体来说，ouline 是画在边界框之外，外边距区域之内）。
七、盒子显示（display）类型
display 三种常见的值为 block、inline、inline-block
block（块盒）：盒子之前以及之后的内容出现在不同的行上
inline （行内盒）：与块盒相反：与周围的文本和其它行内元素出现在同一行，并且其内容会像段落中的文本行一样，随着文本流换行（宽度和高度设置对行内盒无效，在行内盒上的所有内边距、外边距和边界设置会改变周围文本的位置，但是不会影响周围块盒的位置。）；
inline-block（行内块盒）：
介于前两者之间：
像行内盒一样，跟随周围的文本流堆放，不会在其前后创建换行；
像块盒一样，使用宽度和高度设置大小，并且维护其块完整性 — 它不会跨段落行换行。
块级元素默认设置为 display: block; ，行内元素默认设置为 display: inline 。
display: flex — 允许你处理一些困扰CSS已久的一些传统布局问题，例如布置一系列弹性等宽容器或者垂直居中内容。
