这是我参与「第四届青训营」笔记创作活动的第2天

定位

子绝父相

相对定位：人走茶不凉；

绝对定位：人走茶凉。

固定定位：以浏览器的可视窗口为参照为移动元素；跟父元素没有任何关系；不占有原先任何的位置。

1.行内元素添加绝对或固定定位，可以直接设置高度和宽度。

2.块级元素添加绝对或固定定位，如果不加宽度或者高度，默认大小是内容的大小。脱标的盒子（浮动元素、绝对定位、固定定位）都不会触发外边距合并的问题。

绝对定位使元素脱离文档流，因此不占据空间。

普通文档流中元素的布局就当绝对定位的元素不存在时一样。

因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素。

浮动元素的定位是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。

一个元素浮动或绝对定位后，它将自动转换为块级元素，而不论该元素本身是什么类型。

权重

继承或* ( 通配符） 0000

元素（标签）|伪元素选择器 0001

类|伪类|属性选择器 0010

ID选择器 0100

行内样式“style=” 1000 !important 无穷大

（权重相加不进位）

浮动的盒子只会影响后面的标准流，不会影响前面的标准流。

全部盒子都应该加浮动。

清除浮动（主要是为了解决父级元素因为子级浮动引起的内部高度为0的问题）：

1.隔墙法：在浮动元素末尾添加一个空的标签，例如<div style="clearbox"></div>。

2.父级添加overflow属性，无法显示溢出部分。

3.父元素添加after伪元素，但需要照顾低版本浏览器。

代码： .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { /IE6、7专有/ *zoom:1; }

4.双伪元素，相当于前后都加一个盒子。

浮动的盒子之间没有缝隙。

浮动的盒子不会有外边距合并的问题。

1.display：none 隐藏，但是元素不占有位置；

2.visibility：hidden（visible），元素保留原来的位置；

3.overflow：visible（显示溢出部分）/hidden（隐藏溢出部分）/scroll（溢出的部分显示滚动条，两边都有） /auto（超出部分才显示滚动条）。