S1 S2 选择S1所有的后代的S2元素S1>S2 选择作为S1子级的S2元素S1+S2 选择S1同级且紧挨着的S2元素S1~S2 选择S1同级的所有兄弟节点:link, :visited, :hover,:active:first-child,:last-child, :nth-child(), :nth-last-child(), :only-child :checked,:enabled, :disableds1, s2, #ID, .classspan {
border : 1px solid blue;
padding : 10px 20px;
font-size : 15px;
line-height : 37px;/* 1px + 10px + 15px + 10px + 1px*/
}
块级元素在内外边距设置时会产生边界坍塌或者边界重叠的现象，具体来说有以下两种情况：
<style>
div {
width : 100px;
height : 100px;
}
.d1 {
margin : 100px;
}
.d2 {
margin : 150px;/*上下DIV的实际距离是150px*/
}
</style>
<div class="d1">
上面的DIV
</div>
<div class="d2">
下面的DIV
</div>
父子关系的块级元素：
<style>
.container {
background : #000;
}
.container div {
width : 100px;
height : 100px;
}
.d1 {
background : pink;
margin-top : 50px;
}
.d2 {
background : green;
}
</style>
<div class="container">
<div class="d1">
d1
</div>
<div class="d2">
d2
</div>
</div>
浮动是css中实现布局的一个重要工具。基本上在页面排版时都要借助于浮动来完成，一个最基本的需求是实现块级元素和行内元素之间的混排，而浮动就是为了解决这些问题的。
浮动就是让一个元素往左或右边“尽量挤靠”，以使其周边文字（行内元素）可以围绕该浮动元素显示。
其典型的表现就是一张图片向左对齐（align=”left”）的时候，图片标签前后的文字都能够绕着图片展示。
这是“浮动”的原本含义和作用，如下图所示：在介绍浮动之前 我们可能已经发现一个问题，块状元素尽管设置了高和宽的属性 但是他总是占据一整行，这样的“造型”会产生大量旁白，显然不是我们希望遇见的，浮动的出现就可以改变这种现状。
float属性的几个可选值：
left： 元素向左侧浮动
right ：元素向右侧浮动，右浮动时 最先在页面中出现的容器 在最右边
none：元素不浮动，默认值
<style>
.container {
border : 5px solid gray;
}
.container div {
width : 100px;
height 100px;
float : right;
}
.d1 {background : pink}
.d2 {background : green}
.d3 {background : blue}
</style>
<div class="container">
<div class="d1">
d1
</div>
<div class="d2">
d2
</div>
<div class="d3">
d3
</div>
</div>
<style>
.container {
border: 5px solid gray;
}
.container div {
width: 100px;
height: 100px;
background: pink;
/*行内元素some text的空间被挤占，但块级p标签不会*/
float: left;
}
</style>
<div class="container">
<p>hello world</p>
<div></div> some text
</div>
浮动元素脱离了原来的文档流（普通文档流），出现在其上方的浮动层当中，原来的位置会被后续元素补充。
浮动的元素也被称之为浮动框，浮动元素会浮动至包含框边缘或浮动层的浮动框之后
案例演示
<style>
div {
border:1px solid white;
width:100px;
height:100px;
}
.d1 {
background:red;
}
.d2 {
background:green;
}
.d3 {
background:blue;
}
.fl {
float : left;
}
</style>
previous line
<div class="d1 fl"></div>
<div class="d2 fl"></div>
<div class="d3 fl"></div>
next line
浮动之后的元素无论其原先是何种状态，浮动后都会成为行内块状（inline-block）元素。所谓行内块状是指它具有块状元素的高和宽属性 但是不占据整行 ，可以在行内显示 img就是一个典型的行内块状元素。
<style>
span {
border : 1px solid blue;
width : 100px;
height : 100px;
float : left; /*设置浮动后 span具有高宽属性*/
}
</style>
<span>some text</span>hello world
<style>
div {
border : 1px solid blue;
float : left; /*浮动之后 div不在整行显示*/
}
</style>
<div>some text</div>hello world
使用display属性可以设置元素的类型，它有以下几种情况：
list-type属性设置列表项元素浮动后脱离了普通文档流，“包含框”的内容（元素）会越来越少，导致包含框在文档流中占据的空间越来越小，尤其当包含框中所有元素都浮动后，整个“框”会出现塌陷。这样从视觉效果来说是很不友好的，同时它会影响后续元素的排版。
若要使得包含框重新包含浮动框，我们可以在包含框中添加一个不浮动的空元素，如DIV，设置它的高度或者上外边距和浮动元素的高度一致，重新“撑起”包含框：
<div class="container">
<div class="d1">d1</div>
<div class="d2">d2</div>
<div class="d3">d3</div>
<!-- 新建一个空DIV 通过设置高度将容器撑起来 -->
<div></div>
</div>
通过增加上外边距或高度的办法可以帮助我们解决坍塌，但前提是必须掌握好浮动元素的最大高度。CSS为我们提供了一个解决坍塌的办法，就是清除浮动（clear）。使用属性clear，有常见的3个值：
left：表示不允许该元素左边出现左浮动元素；
right：表示不允许该元素右边出现右浮动元素；
both：表示该元素两边都不要出现浮动元素；——这是最常见的需求（场景）。
所谓清除浮动，其实就是让包含框中的浮动特性终止（结束） 而浮动框不受影响。这样包含框就具有了正常的高度，可以正常包住其内部的浮动盒子。可以给包含框内部的末尾添加一个“清除浮动”的空的块盒子来清除浮动。
一个更加灵活的写法是使用伪元素选择器给在父盒子最后位置创建空元素，空元素必须声明为块级类型，然后设置清除浮动。
<style>
.container::after {
content : "";
display : block;
clear : both;
}
</style>
<div class="container">
<div>浮动元素1</div>
<div>浮动元素2</div>
<div>浮动元素3</div>
</div>
最后一种解决塌陷的办法是使用overflow 溢出控制，当父元素的高height:auto时（也就是不设置），我们使用overflow：hidden清除浮动（原理是Block Fomatter Context）。当一个盒子里面有浮动元素，则：
overflow常用值有：
auto： 自动，按浏览器的默认设置自动处理，各浏览器可能会有所不同。
scroll： 滚动，就是超出范围的时候，盒子出现滚动条（像浏览器的滚动条那样）。
hidden： 隐藏，就是将超出部分隐藏起来（视觉上不可见）。
visible： 显示，就是虽然超出去了，但仍然显示出来，这是这个属性的默认值，无需设置。
此时，虽然可能超出外层盒子，但不会影响外层盒子后续的位置（布局）。
visibility属性用来设置元素的可见性。主要有两个值：visible（可见）和hidden（隐藏）
设置visibility为hidden，虽然元素不可见了，但元素原本所占的空间仍然存在（效果是一片空白）
对比：设置display为none，也是隐藏，但此时该元素不但不可见，而且不占版面空间。
| 样式 | 可选值 | 含义 |
|---|---|---|
| border-collapse | collapse（合并）、separate（分离） | 合并边框 |
| border-spacing（限边框分离模式） | Xpx/ Xpx Ypx | 水平和垂直间距为X px |
| text-align | left、center、right | 单元格水平对齐方式 |
| vertical-align（限单元格） | top、center、middle | 单元格垂直对齐方式 |
给UL和li添加边框，查看其作用效果，我们能得出以下结论
ul列表作为块状元素整行显示，并且默认头尾产生空白行，可以视作上下的外边距（margin)
ul列表默认具有左内边距，该内边距中包含了项目符号
列表项的项目符号处于ul的padding之中，在列表项的外面
项目符号设置单一
| 样式 | 值 | 含义 |
|---|---|---|
| list-style-type | none、square、disc、circle | 设置项目符号 |
| list-style-position | inside、outside | 项目符号位置 |
| list-style-image | url(‘图片位置‘) | 将图片设置为项目符号 |
| list-style | list-style: list-style-type list-style-pisition list-style-image | 综合设置（有顺序之分） |
原文：https://www.cnblogs.com/xiaoyixiang/p/14902190.html