css浮动 定位 伪类

浮动 float

1. 值：left|right|++none++(默认值)|inherit
2. 浮动元素会以某种方式将浮动元素从文档的正常流中删除，不过他还是会影响布局。采用css的特有方式，浮动元素几乎“自成一派”，不过他们还是对文档的其余部分有影响。
3. 浮动元素的外边距不会合并，（带边距浮动）
4. 浮动元素的包含块：其最近的块级祖先元素，浮动元素会生成一个块级框，所以浮动元素都会像块级元素一样定位。
5. 浮动元素会延伸，从而包含其所有后代浮动元素。将父元素设为浮动元素，就可以将浮动元素包含在其父元素内。（css2.1）
6. 清除浮动（clear）：
   • left|right|both|++none++(默认值)|inherit
   • 为单个元素清除浮动
7. 结合伪类为父盒子清除浮动，避免为每一个盒子清除浮动：
   .clearFloat:after{content:'';display:table;clear:both;}

定位position

1. 值：++static++(默认值)|relative|absolute|fixed|inherit
2. relative:元素框偏移某个距离，元素仍保持其未定位前的形状，原来的空间保留。
3. absolute：元素框完全从文档流删除，并相对于其包含块定位，原来的空间被删除。元素定位后会生成一个块级框，而不论原来它在正常流中生成何种类型的框。
4. fixed：相当于position设置为absolute，不过其包含块是视窗本身。
5. 定位的包含块：
   • 根元素的包含块由用户代理建立，大多数浏览器是视窗。
   • position：为最近的position不是static的祖先元素
6. 偏移属性：
   • left|right|bottom|top
7. 内容溢出和裁剪(overflow)
   • 值 visible|hidden|scroll|auto|inherit
8. 内容裁剪（clip）：
   • rect(top,right,bottom,left)|auto|inherit
   • 只适应于绝对定位元素

伪类 ：| 伪元素 ：：

1. 写在前面：

   • 所有伪元素都为inline行内元素（不支持宽高）
   • 伪类一般反应无法在css中轻松或可靠的检测到的某个元素的属性或状态，伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。
   • 伪元素可用于定位文档中包含的文本，但无法在文档树中定位。另外表示DOM外部的某种文档结构，用于创建一些不在文档树中的元素，并为其添加样式。
   • ：：用来解决CSS2遗留的伪类与伪元素区分不开的问题。

2. 常用伪类

   • a:link{color:black;} a:visited{color: #ccc;} a:hover{text-decoration: none;} a:active{color: black;}
   • focus伪类：
   • e:focus
   • target伪类：
   • e:target
   • 

3. 为什么要用伪元素：

   • 简化HTML文件结构
   • 减少js查DOM的负担
   • 加快浏览器加载HTML文件速度，对SEO有帮助。

4. 常用伪元素：

   • ::after | :after（考虑向下兼容）&& ::before | :before（考虑向下兼容）
   • a[href^=www]::after{ content: "("attr(href)")"; }拿到a标签的href属性并加在a标签后面