一，CSS盒模型定义
CSS盒模型：将页面所有元素表示为一个个矩形的盒子，CSS决定这些盒子的大小，位置以及属性。
二，块级盒子和内联盒子
1. 块级盒子
1.1 特征：
- 盒子会在水平方向上扩展并占据父容器在该方向上所有可用空间
- 每个盒子都会换到新行
-
width和height属性有效 - 内边距，外边距和边框会将其他元素从当前盒子周围推开
- 可通过
display属性改变显示类型
1.2 常见的块级标签
<h1>...<h6>、<p>、<div>、<ul>、<ol>、<li>、<dl>、<dt>、<dd>、<header>、<main>、<footer>、<aside>、<nav>、<section>、<table>、<pre>
2.内联盒子
2.1 特征
- 盒子不会产生换行
-
width和height属性将不起作用 - 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于
inline状态的盒子推开 - 水平方向的内边距，外边距以及边框会被应用会把其他处于
inline状态的盒子推开； - 可通过
display属性改变显示类型
2.2 常见的行级标签
<a>、<span>、<em>、<strong>、<img>、<input>、<label>、<textarea>、<select>、<button>、<code>
3. 块级盒子和内联盒子的区别
-
块级盒子可以包含文本，块级，行内元素 ，而内联盒子只能包含文本和行内元素；
-
块级盒子可以单独占据一整行，内联盒子占据的位置只有自身文本宽度的空间；
块级不换行，内联主要是靠内容占据宽度
-
块级盒子可以设置宽高，内联盒子设置宽高无效，由内容决定；
块级宽高有效，内联宽高无效
-
块级盒子的
padding，margin值设置有效，内联盒子padding，margin上下的值设置无效，但左右有效；
块级margin, paidding有效，内联margin,padding只有左右有效，上下没有生效。
4. inline-block css常见样式二
1. 写法：display: inline-block
2. 特性：
- 既有块级特性也有行内特性
- 设置的宽高属性有效
- margin，padding以及border会推开其他元素
- 不会跳转到新行
- 多个并排会产生缝隙
3. inline-block缝隙 css常见样式二
4. display的值
- none ：隐藏元素
- block：块级特性
- inline-block：行内块级特性
- inline：行内特性
- flex：采取flex布局
- inline-flex：flex布局采取行内特性
- grid：采取grid布局
- inline-grid：grid布局采取行内特性
- table：
- table-cell
...
三，盒子的组成
1. 盒模型组成
盒模型组成成分
- 内容
Content:这个区域是用来显示内容，大小可以通过设置width和height。 - 内边距
Padding:包围在内容区域外部的空白区域；大小通过padding相关属性设置，内边距的颜色一般默认是和内容一样的。 - 边框
Border：边框包裹内容和内边距，大小通过border相关属性设置 - 外边距
Margin：这是最外面的区域，是盒子和其他元素之间的空白区域，大小通过margin相关属性设置，一般默认是透明。
1.1 内边距和外边距分别可以通过padding属性, margin属性来设置宽度。
- 指定一个宽度，它将会作用于元素四周（上、右、下、左）
div{
padding: 10px; /*四个padding值都相同的缩写*/
}
div{
margin: 10px; /*四个margin值都相同的缩写*/
}
- 指定两个宽度， 第一个宽度会作用于顶部和底部，第二个宽度作用于右边和左边
div{
padding: 10px 20px; /*上下padding相同为10px，左右padding相同为20px*/
}
div{
margin: 10px 20px; /*上下margin相同为10px，左右margin相同为20px*/
}
- 按照顺序指定四个宽度： 上、右、下、左。
div{
padding: 6px 8px 10px 12px;
}
div{
margin: 6px 8px 10px 12px;
}
1.2 margin外边距会有和页面合并的现象。
- 相邻元素合并
①：块级元素的上外边距和下外边距有时会合并（或折叠）外一个外边距，其大小取其中的最大者，左右外边距不会合并。
②：浮动元素和绝对定位元素的外边距不会折叠。
外边距相邻合并
-
父子元素合并
父子元素合并
-
空的块级合并
如果一个块级元素中不包含任何内容，并且在其margin-top与margin-bottom之前没有边框，内边距，行内内容、height、min-height将两者分开，则该元素上下 边距会折叠。
PS:
-
如果参与折叠外边距包含负值，折叠后的外边距的值为最大的正边距与最小的外边距的和。
-
如果所有参与折叠外边距都为负，折叠后的外边距的值为最小的负边距的值。（适用于相邻元素和嵌套元素）
-
消除合并方法
①：在父元素加一个padding: 1px; 即可；
②：或者加一个和背景色一样的边框，或者透明的边框
③：创建块级格式化上下文
④：改变盒子特性（浮动，绝对定位，改变display）
PS：通过设置margin让元素居中
margin居中
1.3 边框border
1.3.1 设置边框的值
div{
border-top:1px;
border-right: 1px;
border-bottom: 1px;
border-left: 1px;
}
1.3.2 边框常用属性
- border- style边框样式
- border- width边框宽度
- border- color边框颜色
div{
border: 1px solid #000; /*分别对应粗细，样式，颜色*/
}
- border-radius边框半径，也有4个值，分别对应4个角。顺序是左上，右上，右下，左下。
html
<body>
<div class="layout">
<h1>hello</h1>
</div>
</body>
css
.layout {
width: 200px;
margin-left: auto;
margin-right: auto;
background: red;
border:4px solid black;
border-radius: 100px;
}
实现效果：
直角变为圆角
1.4 content文本内容区域，可以用width和height设置区域大小。
1.5 width、heigth
-
width: 100%是代表当自己的content等于父亲的content，如果还有border或padding和margin溢出父容器可以设置box-sizing: border;为ie盒模型即可。
-
height（一般需要固定高度才设置），height:100%代表自己的直接父亲必须也要有一个height值，直接父亲height值也是百分比的时候，直到html必须也要有height才会生效。
案例：满屏的效果
满屏
四、标准盒模型与IE盒模型的区别
1.标准盒模型
- chrome,ie9+,ie678(添加doctype)使用标准盒模型
- 设置的width和height指的是Content
.box {
width: 350px;
height: 150px;
margin: 10px;
padding: 25px;
border: 5px solid black;
}
标准盒宽高=content box
- margin不计入实际大小，但会影响盒子实际占用空间,但是影响的盒子外部空间。盒子的范围到边框为止，不会延伸到margin。
IE盒模型
- IE盒模型是指在ie678怪异模式（不添加doctype）下使用ie盒模型，
- 设置的width和height包含内边距和边框
.box {
width: 350px;
height: 150px;
margin: 10px;
padding: 25px;
box-sizing: border-box; //浏览器默认标准模型，box-sizing: border-box;就是ie模型，box-sizing: content-box; 就是标准模型。
}
IE盒模型宽高=padding+border+content box
- 让页面的全部元素使用IE盒模型
//页面所有元素都是使用ie盒模型
* {
box-sizing: border-box;
}
//孩子继承父亲的样式，可以单独设置效果会比较好
*, *::before, *::after {
box-sizing: inherit;
}
- PS: 两种盒模型的宽度计算是不一样的：
- 标准盒模型宽度：宽度=内容宽度；
- IE盒的模型宽度：宽度=内边距+边框+内容宽度。
参考：
https://static.xiedaimala.com/xdml/file/f40ceb64-df08-4420-9226-7f76dbff15d5/2019-11-6-10-45-8.pdf
https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model
网友评论