学习css也有了一段时间，总的来说，还算是小有所获吧。个人觉得css主要还是网页整体布局的应用，而html则是网页的内部结构。虽然css也能不依靠js实现一些特效，但总感觉略显生硬，不过也能实现。以下是我学css的个人总结，有在网上找的，感觉比较重要的知识点，也有我自己的总结。如有不对之处，还望评论区指正。
目录
- 常见问题及知识点
- 1 css命名规则
- 2 书写顺序
- 3 清除浮动
- 4 css选择器及其优先级
- 5 伪类选择器与伪元素选择器得区别
- 6 后代选择器和子代选择器的区别
- 7 css三大特性
- 8 常见隐藏元素的方法
- 9 嵌套块元素垂直外边距的塌陷
- 10 多个盒子之间外边距的影响
- 11 inline-block元素间的换行符空格间隙问题
- 12 style标签写在body后与body前有什么区别
- 13img是inline元素，为什么可以设置宽高？
- 12 box-sizing:content-box(内容盒子)，border-box(边框盒子)
- 13 display的值及作用
常见问题及知识点
1 css命名规则
1、页面结构
网页结构 CSS命名
头 header
内容 content/container
页面主体 main
尾 footer
导航 nav
侧栏 sidebar
栏目 column
页面外围控制整体佈局宽度 wrapper
左右中 left right center
2、导航
网页结构 CSS命名
导航 nav
主导航 mainbav
子导航 subnav
顶导航 topnav
边导航 sidebar
左导航 leftsidebar
右导航 rightsidebar
菜单 menu
子菜单 submenu
标题 title
摘要 summary
3、功能
网页结构 CSS命名
标志 logo
广告 banner
登陆 login
登录条 loginbar
注册 register
搜索 search
功能区 shop
标题 title
加入 joinus
状态 status
按钮 btn
滚动 scroll
标籤页 tab
文章列表 list
提示信息 msg
当前的 current
小技巧 tips
图标 icon
注释 note
指南 guild
服务 service
热点 hot
新闻 news
下载 download
投票 vote
合作伙伴 partner
友情链接 friendlink
版权 copyright
4、使用有意义的名称，使用结构化或者作用目标相关的，而不是抽象的名称。
5、尽量不缩写，除非一看就明白的单词。
6、不要随意使用id
2 书写顺序
2.1 书写顺序
1.Display & Flow (显示与流)
2.Position (位置)
3.Size (尺寸)
4.Padding,Borders,Outline,Margins (填充，边缘，轮廓，边界)
5.Typographic Styles (排版样式)
6.Backgrounds (背景)
7.Opacity,Cursors,Generated Content (透明度，光标，生成内容)
具体代码如下
el {
/* 显示与流 */
display: ;
visibility: ;
float: ;
clear: ;
/* 位置 */
position: ;
top: ;
right: ;
bottom: ;
left: ;
z-index: ;
/* 尺寸 */
width: ;
min-width: ;
max-width: ;
height: ;
min-height: ;
max-height: ;
overflow: ;
/* 填充 */
padding: ;
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;
/* 边界 */
border: ;
border-top: ;
border-right: ;
border-bottom: ;
border-left: ;
border-width: ;
border-top-width: ;
border-right-width: ;
border-bottom-width: ;
border-left-width: ;
border-style: ;
border-top-style: ;
border-right-style: ;
border-bottom-style: ;
border-left-style: ;
border-color: ;
border-top-color: ;
border-right-color: ;
border-bottom-color: ;
border-left-color: ;
/* 边缘 */
margin: ;
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;
/* 轮廓 */
outline: ;
list-style: ;
table-layout: ;
caption-side: ;
border-collapse: ;
border-spacing: ;
empty-cells: ;
/* 排版样式 */
font: ;
font-family: ;
font-size: ;
line-height: ;
font-weight: ;
text-align: ;
text-indent: ;
text-transform: ;
text-decoration: ;
letter-spacing: ;
word-spacing: ;
white-space: ;
vertical-align: ;
color: ;
/* 背景 */
background: ;
background-color: ;
background-image: ;
background-repeat: ;
background-position: ;
/* 不透明度、光标、生成内容 */
opacity: ;
cursor: ;
content: ;
quotes: ;
}
1 优先级第一定位属性：position display float left top right bottom overflow clear z-index
2 优先级第二自身属性：width height padding border margin background
3 优先级第三文字样式：font-family font-size font-style font-weight font- varient color
4 优先级第四文本属性：text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow line-height
5 优先级第五css3中新增属性：content box-shadow border-radius transform……
2.2 作用
减少浏览器reflow（回流），提升浏览器渲染dom的性能。
1 解析html构建dom树，解析css构建css树：将html解析成树形的数据结构，将css解析成树形的数据结构
2 构建render树：DOM树和CSS树合并之后形成的render树。
3 布局render树：有了render树，浏览器已经知道那些网页中有哪些节点，各个节点的css定义和以及它们的从属关系，从而计算出每个节点在屏幕中的位置。
4 绘制render树：按照计算出来的规则，通过显卡把内容画在屏幕上。
css样式解析到显示至浏览器屏幕上就发生在2、3、4步骤，可见浏览器并不是一获取到css样式就立马开始解析而是根据css样式的书写顺序将之按照dom树的结构分布render样式，完成第2步，然后开始遍历每个树结点的css样式进行解析，此时的css样式的遍历顺序完全是按照之前的书写顺序。
这里大家可能不是很理解，但只要记住书写样式时按照上面的书写顺序就会提高程序的性能与网页的流畅度。
3 清除浮动
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style type="text/css">
.box1 {
background: red;
}
.kid {
width: 100px;
height: 100px;
float: left;
}
.kid1 {
background: yellow;
}
.kid2 {
background: orange;
}
.box2 {
width: 300px;
height: 150px;
background: blue;
color: white;
}
</style>
</head>
<body>
<div class="box1">
<div class="kid kid1">子元素1</div>
<div class="kid kid2">子元素2</div>
</div>
<div class="box2">box2</div>
</body>
</body>
</html>
我们期望的的结果
实际结果
通过结果我们不难发现，box1和box2同为块级元素，按标准文档流来，box2应该另起一行位于box1的下面一行，也就是位于子元素1和子元素2的下面。他们本来不应该有重叠的部分，但是box1和box2却跑到了子元素1和子元素所在区域的下面。造成这种状况的原因是父元素未设置高度，再加上子元素浮动导致父元素box1高度塌陷，父元素的高度无法把子元素包括在内。此时父元素高度为0，因为父元素未设置高度。这也导致box2仍然在box1高度为0的下面继续按标准文档流来布局，所以他们有了我们不期望有的重叠部分，box1和box2却跑到了子元素1和子元素所在区域的下面。
解决方法
1 给父元素设置高度
（只适合高度固定的布局，若元素高度需要改动，仍需再改，不推荐）
.box1 {
background: red;
width: 200px;
height: 100px;
}
2 给父元素添加：overflow:hidden/auto/scroll都可以清除浮动
（内容增多时不会自动换行，导致内容被隐藏，无法显示需要溢出的元素）
.box1{overflow:hidden}
3 给浮动元素末尾添加空标签，给空标签添加clear:both(会添加许多无意义的标签，导致代码冗余)
4 伪元素清除法：::afte{content:“”;display:block;clear: both;height:0;overflow: hidden;visibility: hidden;}
.box1::after{
content:"";
display:block;
clear: both;
height:0;
overflow: hidden;
visibility: hidden;
}
5 使用before和after双伪元素清除浮动
<style>
.father{
border: 1px solid black;
*zoom: 1;
}
.clearfix:after,.clearfix:before{
content: "";
display: block;
clear: both;
}
.big ,.small{
width: 200px;
height: 200px;
float: left;
}
.big{
background-color: red;
}
.small{
background-color: blue;
}
</style>
<div class="father clearfix">
<div class="big">big</div>
<div class="small">small</div>
</div>
<div class="footer"></div>
</div>
4 css选择器及其优先级
1. CSS选择器
选择器 格式 优先级权重
id选择器 #id 100
类选择器 .classname 10
属性选择器 a[ref=“eee”] 10
伪类选择器 li:last-child 或 a:hover 10
标签选择器 div 1
伪元素选择器 li::after 1
相邻兄弟选择器 h1+p 0
子选择器 ul>li 0
后代选择器 li a 0
通配符选择器 * 0
2、选择器的优先级权重
内联样式：1000
id 选择器：100
类选择器、伪类选择器、属性选择器：10
标签选择器、伪元素选择器：1
注意事项：
!important声明的样式的优先级最高；
如果优先级相同，则最后出现的样式生效；
继承得到的样式的优先级最低；
通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以它们的权值都为 0 ；
样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式。
5 伪类选择器与伪元素选择器得区别
伪类选择器是用来向某些选择器来添加效果。
伪元素选择器则是用来将特殊的效果添加在选择器上。
其本质上在于是否创建了新的元素：伪类不修改DOM容，通过一些特定的选择器根据特定的状态，特定条件来修改元素的样；而伪元素可能改变DOM结构，创造了虚拟的DOM。
代码看区别
<div>
<p href="">p</p>
<p href="">p p</p>
</div>
如上述代码中存在两个a标签，如果我们想让第一个a标签给他设置宽高背景色为绿色，我们应该怎么做呢？
接下来，我们先通过伪类选择器进行修改：
<style>
div{
width: 200px;
height: 200px;
background: skyblue;
border:2px solid green;
}
p:first-child{
font-size: 30px;
color: orange;
}
</style>
如果我们不通过伪类选择器，那我们就需要给第一个a标签设置一个class或id名：
<div>
<p href="" class="p1">p</p>
<p href="">p p</p>
</div>
<style>
div{
width: 200px;
height: 200px;
background: skyblue;
border:2px solid green;
}
.p1{
font-size: 30px;
color: orange;
}
</style>
通过伪元素选择器进行修改时：
<style>
div{
width: 200px;
height: 200px;
background: skyblue;
border:2px solid green;
}
p::first-letter{
font-size: 30px;
color: orange;
}
</style>
在此情况下如果不通过伪元素选择器呢？
<div>
<p href=""><span>p</span></p>
<p href="">p p</p>
</div>
<style>
div{
width: 200px;
height: 200px;
background: skyblue;
border:2px solid green;
}
div p span{
font-size: 30px;
color: orange;
}
</style>
区别
所以，通过上述的对比，我们很明显的可以看出伪类选择器与伪元素选择器的本质区别，伪类选择器只是相当于给标签加上了个名字，让我们能够找到精准的位置，而伪元素选择器修改了他原本的结构，创造出了一个虚拟的内容来辅助我们找到元素的位置，就像例子的span标签一样。
伪元素在一个选择器中只能出现一次，并且只能出现在末尾
伪类与伪元素的本质区别就是是否抽象创造了新元素（伪元素抽象创建了新元素）。
伪类的效果可以通过添加实际的类来实现；伪元素的效果可以通过添加实际的元素来实现
另外，伪类选择器在c3中使用一个冒号，而伪元素选择器可使用两个冒号或一个冒号，这也是平时我们可以区分的方法之一。
在分辨出两者的区别之后，来总结一下常用的伪类选择器跟伪元素选择器：
常见伪元素选择器：
::after
::before
::first-letter
::first-line
::selection
::placeholder
常见伪类选择器：
（1）结构伪类选择器：
:first-child
:last-child
:nth-child(n)
:nth-last-child(n)
:first-of-type
:last-of-type
:nth-of-type(n)
:nth-last-of-type(n)
:only-child
:only-of-type
:root
:empty
（2）反选伪类选择器：
父元素 （空格） :not（标签名）
（3）目标伪类选择器：
:target
（4）UI元素状态选择器：
:enabled
:disabled
:checked
（5）动态伪类选择器：
:link
:visited
:hover
:active
（6）用户行为伪类选择器
:focus
6 后代选择器和子代选择器的区别
后代选择器：用于指定元素所有的后代元素
//选择div下所有的span元素，无论层级
div span {
color: red;
}
子元素选择器：用于选择元素指定类型的所有的后代元素
//选择div下一级的span元素
div>span {
color: red;
}
代码
<body>
<div>父1
<span>子1</span>
</div>
<div>父2
<em>
<span>子2</span>
</em>
</div>
</body>
div>span 父1中的子1，此时被选中
div span 父2中的子2和父1中的子1，此时都被选中
7 css三大特性
CSS的三大特性
CSS有三个非常重要的三个特性：层叠性、继承性、优先级。
1. 层叠性
相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题。
层叠性原则：
样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
样式不冲突，不会层叠
2. 继承性
现实中的继承：我们继承了父亲的姓。
CSS中的继承：子标签会继承父标签的某些样式，如文本颜色和字号。简单的理解就是：子承父业。
- 恰当地使用继承可以简化代码，降低CSS样式的复杂性
- 子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）
行高的继承性
- 行高可以跟单位也可以不跟单位
- 如果子元素没有设置行高，则会继承父元素的行高为1.5
- 此时子元素的行高是：当前子元素的文字大小* 1.5
- body行高1.5这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高
3. 优先级
当同一个元素指定多个选择器，就会有优先级的产生。
选择器相同，则执行层叠性
选择器不同，则根据选择器权重执行
选择器权重如下表所示。
优先级注意点：
1 权重是有4组数字组成，但是不会有进位。
2 可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推。
3 等级判断从左向右，如果某一位数值相同，则判断下一位数值。
4 可以简单记忆法：通配符和继承权重为0，标签选择器为1，类(伪类)选择器为10，id选择器100，行内样式表为1000，!important无穷大。
5 继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。
详情请看链接
8 常见隐藏元素的方法
1. opacity 和 filter: opacity()
opacity: N 和 filter: opacity(N) 属性可以传递一个 0 到 1 之间的数字，或者 0% 和 100% 之间的百分比，对应地表示完全透明和完全不透明。
opacity: N：该属性用来设置元素的透明度；
filter: opacity(N) ：filter属性用来设置元素的滤镜，opacity是滤镜重的透明度，用来设置元素的透明度。
div {
opacity: 0;
}
div {
filter: opacity(0%);
}
在现代浏览器中，这两者之间几乎没有实际的区别，但如果同时应用多种效果（模糊、对比度、灰度等）时，应该使用 filter 属性。
2. color alpha 透明度
可以将元素的color、background-color 和 border-color 等属性设置为rgba(0,0,0,0)，这样就会使元素完全透明：
div {
color: rgba(0,0,0,0);
background-color: rgba(0,0,0,0);
}
这三个属性都是支持设置动画效果的，需要注意，透明度不能应用于带有背景图片的元素，除非它们是使用 linear-gradient 或类似方法生成的。
Alpha 通道可以设置为：
transparent：完全透明（中间不能插入动画）；
rgba(r, g, b, a)：红色、绿色、蓝色和 alpha；
hsla(h, s, l, a)：色相、饱和度、亮度和 alpha；
#RRGGBBAA 或 #RGBA。
3. transform
transform 属性可以用于元素的平移、缩放、旋转或倾斜等。可以使用 scale(0) 或者 translate(-9999px, 0px) 属性值来将元素隐藏：
div {
transform: scale(0);
}
div {
translate(-9999px, 0px)
}
transform 属性提供了出色的性能和硬件加速，因为元素被有效地移动到了单独的层中，并且可以在 2D 或 3D 中进行动画处理。原始的布局空间会保持原样，并不会受影响。使用这种方式隐藏的元素不会触发任何事件。
4 clip
clip-path 属性可以创建一个剪辑区域，用于确定元素的哪些部分是可见的。使用 clip-path: circle(0) 可以将元素进行隐藏。
div {
clip-path: circle(0);
}
clip-path为添加动画效果提供了空间，不过它只能在现代浏览器中使用。
- visibility: hidden
visibility 属性可以设置为 visible 或 hidden 来显示和隐藏元素。
div {
visibility: hidden;
}
除非使用collapse值，否则元素使用的空间保持不变。
6. display: none
display 可能是最常用的元素隐藏方法; 。当其值为 none 时元素就隐藏了。被隐藏的元素不会在页面中占据位置，也不会响应绑定的监听事件。
div {
display: none;
}
然而，在大多数情况下，display 可能是最糟糕的 CSS 属性。除非使用 position:absolute 将元素移出文档流，或者采用contain属性，否则它的隐藏过程无法设置动画，并将触发页面重新布局。
7. z-index
可以通过将元素的 z-index 属性设置为负值，以实现元素的隐藏。这实际上就是将元素放在了我们看不到的层。
div {
z-index: -1;
}
8. position
position属性允许使用top、bottom、left、right 从页面中的默认位置移动元素。因此，绝对定位的元素可以通过左键：-9999px 等值移出屏幕：
div {
position: absolute;
left: -999px;
}
9. 覆盖另一个元素
通过在元素的上面放置与背景颜色相同的元素，可以在视觉上隐藏一个元素。下面来使用::after伪元素来实现：
div::after {
position: absolute;
content: ‘’;
top: 0;
bottom: 100%;
left: 0;
right: 0;
background-color: #fff;
}
虽然这从技术上讲是可以实现的，但是这样做需要更多的代码。
10. 缩小尺寸
可以通过使用width、height、padding、border-width 或 font-size 来缩小元素的尺寸以实现元素的隐藏。可能还需要应用 overflow: hidden; 来确保内容不会溢出。
div {
height: 0;
padding: 0;
overflow: hidden;
}
使用这种形式我们可以在隐藏过程中使用动画效果，并且他的性能会比 transform 好很多。
11 z-index图层遮盖
9 嵌套块元素垂直外边距的塌陷
代码演示
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 100px;
height: 100px;
background-color: purple;
margin-top: 10px;
}
.son {
width: 50px;
height: 50px;
background-color: pink;
margin-top: 20px;
}
</style>
<div class="father">
<div class="son"></div>
</div>
你以为
实际上
原因及解决方法
原因：对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值
- 可以为父元素定义上边框2
- 可以为父元素定义上内边距
- 可以为父元素添加 overflow: hidden;
- 还有其他方法，比如浮动、固定，绝对定位的盒子不会有塌陷问题
为父元素定义上边框
* {margin: 0;padding: 0;}
.father {
width: 100px;
height: 100px;
background-color: purple;
margin-top: 10px;
/*为父元素定义上边框*/
/*border: 1px solid transparent;*/
border-top: 1px solid transparent;
}
.son {width: 50px;height: 50px;background-color: pink;margin-top: 20px;}
为父元素定义上内边距
* {margin: 0;padding: 0;}
.father {
width: 100px;
height: 100px;
background-color: purple;
margin-top: 10px;
/*为父元素定义上内边距*/
/*padding: 1px;*/
padding-top: 1px;
}
.son {width: 50px;height: 50px;background-color: pink;margin-top: 20px;}
为父元素添加overflow:hidden
* {margin: 0;padding: 0;}
.father {
width: 100px;
height: 100px;
background-color: purple;
margin-top: 10px;
/*为父元素添加 overflow: hidden;*/
overflow: hidden;
}
.son {width: 50px;height: 50px;background-color: pink;margin-top: 20px;}
10 多个盒子之间外边距的影响
11 inline-block元素间的换行符空格间隙问题
描述：
当多个行内块元素排列在一起，会出现换行符/空格间隙(padding margin已清0)。
解决方式：
1.向其所属的父元素添加font-size:0
2.向其所属的父元素添加letter-spacing:-5px
12 style标签写在body后与body前有什么区别
页面加载解析是自上而下的。
如果style放在body后面，可能会导致页面先行加载后，再去加载样式时，导致页面重新渲染，引起页面的闪烁。
13img是inline元素，为什么可以设置宽高？
img标签没有独占一行，所以是行内元素。
既然是行内元素为什么能够设置宽高呢？
从元素本身的特点来讲，可以分为不可替换元素和替换元素；
不可替换元素
HTML 的大多数元素是不可替换元素，即其内容直接表现给用户；比如h标签
可替换元素
首先，浏览器根据元素的标签和属性，来决定元素的具体显示内容，
例如：浏览器会根据 img 标签的src属性的值来读取图片信息并显示出来，
又例如：根据 input 标签的type属性来决定是显示输入框，还是单选按钮等。
可替换元素的特性，同设置了display:inline-block的元素一致
HTML中的、、、、 都是替换元素。这些元素往往没有实际的内容，即是一个空元素
所以，由于img标签属于替换元素，所以具有内置的宽高属性。
12 box-sizing:content-box(内容盒子)，border-box(边框盒子)
13 display的值及作用
display常用属性值
1. none：隐藏对象
1.1 不用none前：
1.2 用了none的时候：
2. inline： 指定对象为行内元素
3. block： 指定对象为块元素
4. inline-block：指定对象为行内块元素
5. table-cell：指定对象为表格单元格
6. flex：弹性盒
6.1 未使用flex前：
6.2 使用flex后：
7. inline转块级元素
display的值及作用
display属性可以设置元素的内部和外部显示类型，元素的外部显示类型将决定该元素在流式布局中的表现，例如块级或内联元素，元素的内部显示类型可以控制其子元素的布局，例如grid或flex。目前所有浏览器都支持display属性，但是对于属性值的兼容性仍需注意。
外部显示
这些值指定了元素的外部显示类型，实际上就是其在流式布局中的角色，即在流式布局中的表现。
display: none
display: none;是CSS1规范，无兼容性问题，该属性值表示此元素不会被显示，依照词义是真正隐藏元素，使用这个属性，被隐藏的元素不占据任何空间，用户交互操作例如点击事件都不会生效，读屏软件也不会读到元素的内容，这个元素的任何子元素也会同时被隐藏。当使用该属性将元素从显示状态切换为隐藏状态时，元素不占据原本的空间，会触发浏览器的重绘与回流。为这个属性添加过渡动画是无效的，他的任何不同状态值之间的切换总是会立即生效。这种方式产生的效果就像元素完全不存在，但在DOM中依然可以访问到这个元素，也可以通过DOM来操作它。
display: block
display: block;是CSS1规范，无兼容性问题，该属性值表示此元素将显示为块级元素，此元素前后会带有换行符，元素独占一行，封闭后自动换行，默认宽度为100%，可以指定宽度和高度，内外边距对于四个方向有效。
display: inline
display: inline;是CSS1规范，无兼容性问题，该属性值表示此元素会被显示为内联元素，元素会生成一个或多个内联元素框，这些框不会在自身之前或之后产生换行符，在正常流中，如果有空间，则下一个元素将在同一行上，元素排在一行，封闭后不会自动换行，不能指定高度与宽度，可以使用line-height来指定高度，外边距对于水平方向有效，垂直方向无效，内边距对于水平方向正常有效，垂直方向只有效果，对其他元素无任何影响。
display: inline-block
display: inline-block;是CSS2规范，无兼容性问题，该属性值表示此元素将显示为内联块元素，该元素生成一个块元素框，该框将随周围的内容一起流动，就好像它是单个内联框一样，与被替换的元素非常相似，它等效于内联流根inline flow-root，可以指定宽度和高度，内外边距对于四个方向有效元素排在一行，但是在回车后会有空白缝隙。
display: run-in
display: run-in;是CSS2规范，绝大部分浏览器都不兼容，目前这是个实验性属性值，不应该用作生产环境，该属性值表示此元素会根据上下文决定对象是内联对象还是块级对象，如果它后一个元素是block那么它会变成inline并和后一个元素并排，如果它后一个元素是inline那么它会变成block。
内部显示
这些关键字指定了元素的内部显示类型，它们定义了该元素内部内容的布局方式，需要假定该元素为非替换元素。
display: flow-root
display: flow-root;是CSS3规范，兼容性一般，该属性值表示此元素会生成一个块元素盒子，该元素盒子可建立一个新的块格式化上下文BFC，定义格式化根所在的位置。
display: table
display: table;是CSS2规范，兼容性良好，该属性值表示此元素会作为块级表格来显示，类似
，表格前后带有换行符。display: flex
display: flex;是CSS3规范，目前主流浏览器都已支持，是布局的首选方案，该属性值表示此元素会作为弹性盒子显示，在外部表现为block，内部作为弹性盒子使用，弹性布局可以为盒状模型提供最大的灵活性。在兼容移动端浏览器的方案上，有可能需要使用display:-webkit-box;，也就是内核前缀-box，同样都是弹性盒子，由于各阶段草案命名的原因，其命名从box更改为flex，flex是新的规范属性，此外flex并不能完全替代box，使用这两种方式在实际布局中会存在差异。
display: grid
display: grid;是CSS3规范，目前主流浏览器都已支持，该属性值表示将元素分为一个个网格，然后利用这些网格组合做出各种各样的布局。Grid布局与Flex布局有一定的相似性，都可以指定容器内部多个成员的位置。不同之处在于，Flex布局是轴线布局，只能指定成员针对轴线的位置，可以看作是一维布局。Grid布局则是将容器划分成行和列，产生单元格，然后指定成员所在的单元格，可以看作是二维布局。
display: inline-table
display: inline-table;是CSS2规范，兼容性良好，该属性值与display: table;在元素内部表现相同，在元素外部显示表现为inline。
display: inline-flex
display: inline-flex;是CSS3规范，目前主流浏览器都已支持，该属性值与display: flex;在元素内部表现相同，在元素外部显示表现为inline。
display: inline-grid
display: inline-grid;是CSS3规范，目前主流浏览器都已支持，该属性值与display: grid;在元素内部表现相同，在元素外部显示表现为inline。
display: list-item
display: list-item;是CSS1规范，无兼容性问题，该属性值表示将元素的外部显示类型变为block盒模型，并将内部显示类型变为多个list-item inline盒模型。
内部表现
table布局模型有着相对复杂的内部结构，因此它们的子元素可能扮演着不同的角色，这一类关键字就是用来定义这些内部显示类型，并且只有在这些特定的布局模型中才有意义。
display: table-row-group
display: table-row-group;是CSS2规范，兼容性良好，该属性值表示此元素会作为一个或多个行的分组来显示，类似于。
display: table-header-group
display: table-header-group;是CSS2规范，兼容性良好，该属性值表示此元素会作为一个或多个行的分组来显示，类似于。
display: table-footer-group
display: table-footer-group;是CSS2规范，兼容性良好，该属性值表示此元素会作为一个或多个行的分组来显示，类似于。
display: table-row
display: table-row;是CSS2规范，兼容性良好，该属性值表示此元素会作为一个表格行显示，类似于。
display: table-column-group
display: table-column-group;是CSS2规范，兼容性良好，该属性值表示此元素会作为一个或多个列的分组来显示，类似于。
display: table-column
display: table-column;是CSS2规范，兼容性良好，该属性值表示此元素会作为一个单元格列显示，类似于。
display: table-cell
display: table-cell;是CSS2规范，兼容性良好，该属性值表示此元素会作为一个表格单元格显示，类似于和。
display: table-caption
display: table-caption;是CSS2规范，兼容性良好，该属性值表示此元素会作为一个表格标题显示，类似于。
159
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
