目录
1.元素间隔与基线对齐
元素间隔
为什么行元素和行内块之间会有间距？因为HTML代码在书写的时候为了保持美观，每个元素会单独写一行，所以元素之间会有空格和回车，这些空格和回车在页面解析的时候会解析为一个空格，间隙就是这个空格造成的。
元素间隔的解决办法
1.清除元素之间的空格和回车；例如：把所有元素写在同一行；将下一行的开始标签写在上一行的尾部。
2.在文本后面添加空格（针对文本标签）；但是这种方法并不推荐使用。
3.给元素添加外间距抵消整个间隙；
4.将字符的大小改为0 （通配符样式使font-size：0；）
2.基线对齐
基线对齐所使用的是vertical-align，它的值有1.auto，效果：按照浏览器默认状态执行。2.middle，效果：中线对齐。3.top，效果：顶部对齐。4.bottom，效果：底部对齐。5.baseline，效果：文本基线对齐（四线三格的第三条线）。
基线
图片和空块的基线在底部，文本基线在文本的中下部（四线三格的第三条线）。正常元素中带有文本，默认其元素的基线对齐以文本为准。通常情况下，为了让文本和图片进行对齐，两个或多个元素在一行显示，会按照默认的对齐规则对齐。也就是所说的基线对齐。
3.文档流
流式布局
元素依次从左到右（行元素、行内块元素）从上到下（块元素）的方式进行排列。
文档流
一个元素内部的子元素采用流式布局时，这个元素内部就会形成一个文档流，每个子元素在文档流中都有自己的位置。
一个元素如果脱离了文档流，就不在参与流式布局。父元素里面不再有他的位置。
块元素脱离文档流之后，宽度不在默认为父元素的100%，需要主动设置宽度。
HTML中所有的标签默认都是static定位，static采用的是流式布局。
4.Css中的定位
绝对定位：position：absolute
1.元素添加绝对定位之后，会脱离文档流，不占据文档流中的位置，位置会被正常文档流中的内容所替代。
2.元素使用绝对定位之后，位置从左上角出发。
3.在嵌套中，后代元素会相对外层有定位（非static的定位）的元素的左上角出发，如果都没有定位，则从相对页面的左上角出发。
4.给元素添加绝对定位之后，会转换为行内块元素。
绝对定位的出发位置
以有定位方式的父级元素为参考，如果父级元素没有定位方式再往上找，直到找到有定位方式的父级元素位置；
如果父级元素都没有定位，位置从浏览器的左上角出发。
相对定位：position：relative
1.元素使用相对定位之后不会脱离文档流，还占据文档流中的位置。
2.元素使用相对定位之后，位置从自身原来在文档流中的位置出发。
3.子绝父相：子元素使用绝对定位，父元素使用相对定位。位置从父元素的左上角出发。
4.行内元素使用相对定位之后不会转换为行内块。
固定定位：position: fixed
1.元素添加固定定位之后，会脱离文档流，不占据文档流中的位置，位置会从被文档流中正常的内容所替代。
2.元素使用固定定位之后，位置从浏览器的左上角出发。
3.在嵌套中不管外层元素是否有定位，元素只要使用固定定位，位置永远从立刻领取的左上角出发。
4.给行内元素添加固定定位之后，会转换为行内块元素。
5.Css中的伪类和伪元素
伪类
正常在选择器后面的”：“可以添加伪类，但是伪类一般需要在一定的条件下才能触发，拿一段来作为演示：
<a id="link" href="https://www.baidu.com/">百度</a>首先去除它的样式并且将字体变为黑色。之后用伪类选择器使鼠标移上去出现下划线并且颜色变为蓝色。代码如下图所示：
#link{
text-decoration: none;
color: black;
}
#link:hover{
text-decoration: underline;
color: blue;
}a标签有着自己的专用属性：visited，可以表示访问过的链接。
此外，除了hover比较常用之外，常用的伪类还有focus（焦点），当元素成为焦点时会触发，但是一个页面同一时刻只能有一个元素可以成为焦点。
伪类选择器扩展
1.checked： 选择所有选中的表单元素
2.disabled：选择所有禁用的表单元素
3.empty：选择所有没有子元素的p元素
伪元素
伪元素相对于伪类的区别一个是选择器后面有一个”：“，而伪元素选择器后面有两个”：“，常见的伪元素有：
p::first-letter：选择文本的第一个字。
p::first-line：选择第一行。
p::before：前缀伪元素，伪元素加一个前缀
p::after:后缀伪元素，伪元素加一个后缀
前缀伪元素与后缀伪元素效果图如下图所示：
伪元素扩展
1.link：选择所有未访问链接
2.active：选择正在活动链接
6.序号选择器
序号选择器的种类可以分为三种：
一、不区分类型（根据元素的位置序号找到元素）：
:first-child:选中同级别中的第一个元素。
：last-child：选中同级别中最后一个元素
：nth-child（number）：选中同级别中的第几个（从1开始）元素。
二、区分类型（根据元素的种类找到元素）
:first-of-type:选中同级别中的第一个元素
:last-of-type:选中同级别中的最后一个元素。
:nth-of-type(number):选中同级别中第几个元素。
三、奇偶数选择：
odd 选择同级别中所有的奇数
even 选择同级别中所有的偶数
403
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
