css的基本布局、定位布局、浮动布局
1.1.基本布局
标准文本流
标准流指的是在不使用其他的与排列和定位相关的特殊CSS规则时，各种元素的排列规则。网页在解析的时候，遵循于从上向下，从左向右的一个顺序，这个顺序就是来源于标准文本流。
标准文本流等级森严,标签分为两种等级：块级元素和行内元素。
块级元素总是以块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右自动伸展，直到包含它的元素的边界，在水平方向不能并排。
行内元素不占据单独的空间，依附于块级元素，行内元素没有自己的区域。
什么是脱离文本流?
简单说，就是将元素从普通的布局排版中拿走，别的元素会当它不存在，拿走之后不影响其他快元素布局，不占普通文档的空间。
块级元素和行内元素
块级元素（默认会自动换行）：
<div>、<h1>-<h6>、<p>、<ul>、<li>、<ol>、<dl>、<dt>、<table> 、<tr>、<blockquote>、<address>、<caption>
1. 一个块元素独占一行。
2. 元素的行高以及顶和底边距都可设置。
3. 元素宽度在不设置的情况下，是它本身父元素的100%，除非设定一个宽度。
行内元素（默认不会换行）：
<img>、<label>、<input> 、<span>、<th>、<td>、<a>、<b>、<q>
1. 和其它元素都在一行上。
2. 元素的高度以及顶部和底部边距不可设置。
3. 元素的高度就是他所包含的图片或文字的宽度。
共同点：它们的共同点是都是DOM树中的一个节点。
1.2.定位布局(position属性)
1. 什么是定位布局：
定位的基本思想为，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
2. 定位布局的原理：
css中定位布局基于position属性。
1.在父元素没有设置相对定位或绝对定位的时候，元素相对于根元素html元素进行绝对定位。
2.父元素设置了相对定位或绝对定位，元素会相对于离自己最近的设置相对定位或绝对定位的父元素进行定位。这里离自己最近的父元素定位不是默认的static。
3. 定位布局的生成：
position有四个值：absolute/relative/fixed/static(绝对/相对/固定/静态(默认))，通过定位属性可以设置一些不规则的布局，使用TLBR(top，left，bottom，right，下同)来调整元素位置。
position的默认值为static，当静态定位时，元素会依据正常的文本流布局。
4. 定位布局的影响：
1. static未脱离文本流，对文本流没有影响
2. relative未脱离文本流，就算有偏移，其在文本流中的位置依然存在
3. fixed、absolute是彻底脱离文本流的，它不会影响其他元素的布局
1.3浮动布局（float属性）
1. 什么是浮动布局：
在我们布局的时用到的一种技术，能够方便我们进行布局，通过让元素浮动，我们可以使元素在水平上左右移动，再通过margin属性调整位置
2. 浮动布局的原理：
使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘
3. 浮动的生成：
使用css属性float：left/right/none 左浮动/右浮动/不浮动（默认）
4. 浮动的影响：
1. 对附近的元素布局造成改变，使得布局混乱；
2. 浮动后的元素可以设置宽度和高度等，也就是说元素浮动后会变成块级元素，但我更倾向于说元素变成inline-block类型的元素，即同时拥有块级与行内元素的特征；
3. 因为浮动元素脱离了普通流，会出现一种高度塌陷的现象：原来的父容器高度是当前子元素撑开的，但是当子元素浮动后，脱离普通流，那父容器的高度就会坍塌。
5. 清除浮动 clear：both
使用clear元素清除外面浮动，解决外面元素浮动对自己的影响
优点：通俗易懂，容易掌握
缺点：可以想象通过此方法，会添加多少无意义的空标签，有违结构与表现的分离
- 闭合浮动
常用属性：overflow：hidden；display：table
当前块级中，其子元素使用了浮动，会给当前块内部和块外部的布局带来影响，所以将当前块中的浮动闭合，能将影响最大化清除。
浮动没有闭合：
没有闭合元素，父元素的高度为0
代码示例：
显示结果：
结论：子元素脱离文本流，不占有文本的高度，导致父元素高度塌陷，所以背景设置的黄色没有显示。
推荐闭合方式
使用伪元素 :after，用元素闭合浮动。
代码示例：
显示结果：
结论： 给box1添加上clearfix 这class，可以清除浮动。
display:block 使生成的元素以块级元素显示,占满剩余空间；
clear:both 清除外部元素的浮动，控制子元素高度对父元素的影响；
闭合浮动之后：父元素的高度为21px（chrome默认字体行高），显示黄色背景。
二、Position属性概况
一．Position各属性的理解
1.1 static的理解和用法
static定位，也叫静态定位，默认值。是html元素默认的定位方式，它遵循正常的文本流，占用文档空间，该定位方式下，top、right、bottom、left、z-index等属性是无效的。
代码示例：
显示结果：
结论：值为static的情况下，元素相较于它的正常位置没有任何改变。
1.2 fixed的理解和用法
fixed定位，又叫固定定位。它脱离了文本流，并且能够根据top、right、left、bottom属性进行定位。它是根据窗口为原点进行偏移定位的，不会随滚动条的滚动而进行偏移。
代码示例：
显示结果：
结论：
1. 值为fixed的情况下，元素相较于浏览器窗口偏移了距离头部50px，距离左边50px;
2. 原本的行内元素变成了块状元素；
3. 普通文本流没有为它保留位置；
1.3 relative的理解和用法
relative定位，又叫相对定位，遵循正常的文本流，生成相对定位的元素，相对于其正常位置进行定位。
top、right、left、bottom属性是生效的。
代码示例：
显示结果：
1.4 absolute的理解和用法
absolute定位，也叫绝对定位，脱离文本流，只能根据祖先类元素(父类以上)进行定位，而且这个祖先类还必须是以position属性非static方式定位的。
使用绝对定位，它会从父类开始找起，寻找以position属性非static方式定位的祖先类元素，直到<html>标签为止。
代码示例：
显示结果：
1．值为absolute的情况下，元素相较于<html>根元素偏移了距离头部50px，距离左边50px;
结论：
- 值为relative的情况下，元素相较于原本位置偏移了距离头部50px，距离左边50px；
- 普通文本流为它保留了位置；
2. 原本的行内元素变成了块状元素；
3. 普通文本流没有为它保留位置；
1.5 inherit的理解和用法
inherit 关键字指定一个属性应从父元素继承它的值。
inherit 关键字可用于任何 HTML 元素上的任何 CSS 属性。所以，position也有inherit值
代码示例：
显示结果：
结论：
1．值为inherit的情况下，子元素继承了父元素absolute的值，相较于父元素元素偏移了距离头部50px，距离左边50px;
2. 原本的行内元素变成了块状元素；
3. 普通文本流没有为它保留位置；
二、属性值是否受TRBL影响
思路：给每个属性值的top,right,bottom,left都设置成50px；看页面会怎样渲染，由此看出TRBL是否生效。
Static
代码示例：
显示结果：
结论：position的值为static时，TRBL都不生效。
Fixed
代码示例：
显示结果：
结论：position的值为fixed时，TRBL都生效。
Fixed定位垂直水平居中的
Relative
代码示例：
显示结果：
结论：position的值为relative时，TRBL只有TL生效；
如果top和bottom同时存在，那么只有top生效；
如果left和right同时存在，那么只有left生效；
Absolute
代码示例：
显示结果：
结论：position的值为absolute时，TRBL都生效。
三．position属性各值的特点
static
1. 根据文本流定位；如果该标签是页面最外层标签，则根据<body>进行定位
2. 不可以设置定位属性，即不受TRBL，z-index影响；
3. 不脱离文本流；不影响其他元素位置；
4. 不会把行内元素变为行内块元素
Fixed
1. 以浏览器窗口为原点进行定位；
2. 可以设置定位属性，受TRBL, z-index影响；会把行内元素变为块状元素
3. 脱离文本流；不影响其他元素位置；
4. 会把行内元素变为行内块元素
Relative
1. 根据元素原本位置进行定位；如果该标签是页面最外层标签，则根据<body>进行定位
2. 可以设置定位属性，即受TRBL, z-index影响；如果top和bottom同时存在，那么只有top生效；如果left和right同时存在，那么只有left生效
3. 未脱离文本流，但其在文本流中的位置依然存在；不影响其他元素位置；
4．不会把行内元素变为行内块元素
Absolute
1. 从父元素开始找起，寻找以position属性非static方式定位的祖先类元素，如果父元素没有position属性，则根据<html>口进行定位;
2. 可以设置定位属性，即受TRBL, z-index影响
3. 脱离文本流；不影响其他元素位置；
4. 会把行内元素变为行内块元素
四：主要元素之间的关系与异同
relative和absolute的关系
这两个元素经常搭配使用：子绝父相。父元素相对定位，子元素绝对定位，然后设置子元素的TRBL值。
不同点：
1. relative未脱离文本流，但其在文本流中的位置依然存在；absolute脱离文本流，但其在正常流中的位置不在存在。
2. relative定位方式总是相对于文本流中最近的父元素，无论其父元素是何种定位方式；
absolute定位方式是.从父元素开始找起，寻找以position属性非static方式定位的祖先类元素，如果父元素没有position属性，则根据<html>口进行定位;
Fixed和absolute的异同
相同点：
1. 脱离文本流，不占文本流的位置，不影响其他元素的显示；
2. 会将行内元素转换为行内块状元素，将display置为inline-block
3. 覆盖非定位文档元素
4. 没有滚动条的情况下没有差异
不同点：
1. fixed基于浏览器窗口定位；absolute基于非static值的父元素或<html>定位
2. 在有滚动条的情况下，fixed定位不会随滚动条移动而移动，而absolute则会随滚动条移动
五. z-index属性介绍
z-index，又称为对象的层叠顺序。它的特性分为如下4点：
- 同级元素间的堆叠，它用一个整数来定义堆叠的层次，整数值越大，则被层叠在越上面；
示例代码：
显示结果：
结论：红色块的层高为1，黄色块的层高为2，蓝色块的层高为3，红色在最下，黄色在中间，蓝色在最上面；所以同级元素之间，整数值越大，则被层叠在越上面。
- 两个同级元素的此属性具有同样的值，那么将依据它们在HTML文档中流的顺序层叠，写在后面的将会覆盖前面的。
示例代码：
显示结果：
结论：红色块和黄色块的层高都为1，黄色块显示在红色块的上面；所以依据它们在HTML文档中流的顺序层叠，写在后面的将会覆盖前面的。
- 父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下。
代码示例：
显示结果：
结论：红色是父元素，黄色是子元素，虽然红色的层高为100，黄色层高为1，黄色还是显示在红色元素的上方，由此可见，父子关系是用z-index来设定层叠顺序是无效的。
- 使用static 定位或无position定位的元素z-index属性是无效的。
代码示例：
显示结果：
结论：红色元素和黄色元素的同级的，红色元素层高为100，黄色元素为1，但黄色元素还是显示在红色
元素的上方，由此可见，使用static 定位，层高是无效的。
本章总结：
对本人而言，加深了position各值之间的定位的理解，熟悉专业术语，增强了对各属性理解的表达能力。
为快速选择最合适的定位模式，显示出最好的效果奠定了坚实的理论基础。
- float的属性概况
一．float各属性的理解
1.none
默认值。元素不浮动，并会显示在其在文本中出现的位置。
代码示例：
显示结果：
结论：按照正常的文本流显示。
2.left
元素向左移动
代码示例：
显示结果：
结论：元素脱离文本流向左移动；li标签按照顺序依次显示；ul的高度塌陷，所以黄色背景没有显示。
虽然float:left是脱离文本流的，但不是绝对脱离的，所以会导致文本环绕它；常见于一些文章中图片和文字的环绕效果排版，这也是这个属性设计的初衷。
代码示例：
显示结果：
3.right
元素向右浮动。
代码示例：
显示结果：
结论：元素脱离文本流向右浮动；li标签按照倒序依次显示；ul的高度塌陷，所以黄色背景没有显示。
跟float:left一样，float:right也是脱离文本流的，但也不是绝对脱离的，所以会导致文本环绕它；
代码示例：
显示结果：
4.inherit
规定应该从父元素继承 float 属性的值。
没有设置float属性时
代码示例：
显示结果：
结论：按照正常的文本流显示。
父类设置了float:left值时
代码示例：
显示结果：
结论：float会把元素设置为行内块，所以ul和li都被渲染成行内块显示，ul会随li的宽高变化而变化;
li标签按顺序依次显示。
父类设置了float:right值时
代码示例：
显示结果：
结论：float会把元素设置为行内块，所以ul和li都被渲染成行内块显示，ul会随li的宽高变化而变化;li标签按倒序依次显示。
float的破坏性
float的破坏性主要是指它会使父容器的高度塌陷，也就是父元素在高度计算的时候会忽略浮动的元素
四、Position 和 float 的结合使用
1.static与 left、right 的结合使用
无float属性时：
代码示例：
显示结果：
有float属性时：
代码示例：
显示结果：
结论：position：static时，距离左边50px没有生效，float:left把块状元素转换成了行内块元素；
2.fixed与 left、right 的结合使用
无float属性时：
代码示例：
显示结果：
有float属性时：
代码示例：
显示结果：
结论：position：fixed时，有无float属性显示的结果相同，由此可见，fixed定位时，float设定值是无效的。
3. relative与 left、right 的结合使用
无float属性时：
代码示例：
显示结果：
有float属性时：
代码示例：
显示结果：
结论：position:relative时，无float属性时元素的按块状的规则显示的；
有float属性时元素是按行内块的规则显示的
4. absolute与 left、right 的结合使用
无float属性时：
代码示例：
显示结果：
有float属性时：
代码示例：
显示结果：
结论：position：absolute时， 有无float属性显示的结果相同，由此可见，absolute定位时，float设定值是无效的。
五、定位布局和浮动布局的异同
相同：
1. 浮动和绝对定位/固定定位都是脱离文本流；
2. float和absolute/fixed都能引起父元素的高度塌陷
3. fixed和absolute, float:left/right,都可以将行内元素转换成块状元素；
不同：
1. 绝对定位/固定定位是彻底脱离文本流，不会影响其他元素的布局；浮动布局是会影响的，会导致文本环绕它。
2. float 的父元素高度塌陷是有办法清除的；absolute/fixed是完全脱离文本流，这种情况的高度塌陷是没办法清除的；
3. 绝对定位/固定定位时，文本会直接覆盖普通文本流的元素；float布局时，其他元素会环绕显示，不会遮挡其他元素；
2030
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
