CSS：布局

布局

普通文档流（标准文档流）：元素从上至下排列的顺序

脱离文档流：元素从正常的排列顺序被抽离

浮动：将元素移动到父元素最左和最右，可以将元素按着我们的意思进行排列

1.标准流（最稳定）

2.浮动流（float其次）

3.定位流（稳定性最后）

块级标签

独占一行，从上到下依次排列

在文档流中，不设置宽高时，宽度是充满父容器，高度包裹住内容，设置宽高起作用

脱离文档流后，不设置宽高，宽高是通过内容撑开，设置宽高起作用

行级标签

在一行中从左到右排列，如果到最右边会自动换行

在文档流中，不设置宽高时，宽高是通过内容撑开，设置宽高不起作用

脱离文档流后，不设置宽高，宽高是通过内容撑开，设置宽高起作用

display显示

display属性规定元素应该生成的框的类型

值	描述
none	此元素不会被显示。
block	设置为块级标签
inline	默认。设置为行内标签
inline-block	行内块标签

visibility可见性

visibility 属性规定元素是否可见

值	描述
visible	默认值。元素是可见的。
hidden	元素是不可见的。
collapse	当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。
inherit	规定应该从父元素继承 visibility 属性的值。

display和visibility的区别

display:none;      元素隐藏，不占空间

visibility: hidden; 元素隐藏，占空间

float浮动

float 属性可以让元素脱离文档流，让元素向左或向右浮动

浮动元素会变成行内块盒子

没有宽和高，如果需要宽和高的话手动添加宽和高

文档流中的块级盒子，会忽略浮动元素的存在

文档流中的行内盒子，其所在的行被压缩，围绕浮动元素

脱离文档流时，浮动到父容器的边框或碰到浮动标签元素停止

在浮动时，浮动的子元素所在的父元素一定要高度，如果没有高度，父元素会塌陷

父元素高度塌陷解决方法：

1. 手动给父元素加一个高度，给后面不需要占空间的元素clear:both;
2. 给父元素加overflow:hidden;
3. 添加一个空白div，给这个div属性clear:both;
4. 让父元素也浮动
5. 万能清浮动方法

.clearfixed:after{
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
}

值	描述
left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

clear清除浮动

clear属性规定元素的哪一侧不允许其他浮动元素，清除浮动

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

position定位

position 属性规定元素的定位类型，自动转成行内块元素，父元素的高度塌陷

static（静态）

fixed（固定）：原来的空间的不保留，相对浏览器改变位置

相对定位：relative

原来的空间保留，相对于自己原来的位置改变位置

开启相对定位后，不设置偏移量，是没有效果的 //偏移量left，top，right，bottom:20px/10%;

相对定位没有脱离文档流

当前元素开启相对定位之后，提升了一个层级

保持未定位前的形状，原本占用的空间也将保留

位置相对于原本占据的空间

绝对定位：absolute

原来的空间不保留，相对于离他最近最有定位属性的父素进行改变位置，如果都没有定位，相对浏览器改变位置

如果只开启绝对定位，不设置偏移量，当前元素不会改变

绝对定位脱离文档流

绝对定位生成块级盒子，不占据空间

位置相对于最近的已定位祖先空间

z-index：设置具有定位属性的元素的层次关系

z-index:-1 -2 -3 0 1 2 3;值越大，越在上层显示

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。