博文尚美案例知识点总结

一、使用伪元素::after

1. 清除浮动

.clearfix::after{  ----在类名为“clearfix”的元素内最后面加入内容
	content: "";  ----内容，可写可不写
	clear: both; ----清除左右两边浮动
	display: block; ----加入的元素转为块级元素
	height: 0; ----高度
    visibility: hidden; ----可见度设为隐藏
}

注意： visibility: hidden和display:none;是有区别的。visibility:hidden;仍然占据空间，只是看不到而已

2.使用伪元素::after也可以实现对样式的改变：

3. 实现左右翻转

.section-header-left::after{
    right: 0;
}
.section-header-right::after{
    left: 0;
}

效果图：

二、相对定位与绝对定位的使用

position:relative	相对于自己原来的位置进行偏移
position：absolute	相对于父元素进行偏移

由此可得“父相子绝”：即父元素是相对定位，子元素是绝对定位
即可保证子元素在随父元素偏移的过程中始终在父元素内进行偏移

三、CSS选择器

CSS选择器有：id选择器、类选择器、标签选择器、后代选择器、子元素选择器、伪类选择器。

css选择器优先级顺序为：
id选择器 >类选择器 >标签选择器 >子选择器>后代选择器 >伪类选择

1. id选择器、类选择器、标签选择器是使用最普遍的选择器如：id=“name”、class=“age”、p 。
2. 后代选择器，例如：#head .nav ul li 从父集到子孙集的选择器
3. 子元素选择器，例如：div>p ,带大于号>
4. 伪类选择器，例如：链接样式a元素的伪类，4种不同的状态：link、visited、active、hover