CSS-03 布局的三种机制

CSS布局的三种机制

（摆放盒子））
1、普通流（标准流）

2、浮动
3、定位

为什么需要浮动

如何让div水平排列成一行（行内块中块与块之间有缝隙，inline-block很难处理）
如何让其水平对称

什么是浮动

设置了浮动属性的元素会：
1、脱离普通标准流的控制
2、移动到指定的位置

语法：
选择器{ float:属性值； }

1、浮（漂浮在普通流的上面）
俗称“脱标”
2、漏
把自己下面的位置给普通流的盒子
3、特
特性：改变元素的display属性
任何元素都可以浮动，会生成一个块级框（与行内块相似）
两个盒子都浮动，排列在一行，且之间没有空隙(区别）
如果父亲装不下，会另起一行对齐

浮动的元素不会遮盖父盒子的边框和内边距

浮动元素和兄弟盒子的关系：
浮动的，两个顶部对齐
如果第一个不浮动，第二个浮动，
浮动只会影响当前的的或者是最后面的标准流盒子，不会影响前面的标准流

清除浮动

原因：父级盒子不方便给高度（子盒子自动撑开比较合理
）

会使页面布局变乱


** 清除浮动的本质**
为了解决父元素因为子元素浮动引起的内部高度为0的问题
清除浮动之后，会根据子盒子自动监测高度

清除浮动的方法

语法
选择器{
clear:both/left/both
}【一般都是用both】
1、额外标签法
找到浮动的最后一个元素，在后面添加一个空标签，style中添加这行代码
.clear{
clear:both;
}
结构较差
2、父元素添加overflow
overflow:hidden||auto||scroll
内容增多容易造成不会自动换行导致内容被隐藏，无法显示需要溢出的元素

3、使用after伪元素清除浮动（方法一的升级版，不用额外加标签了）
声明清除浮动的样式
.clearfix：after{
content:" "
display:block;
height:0;
visibility:hidden;
clear:both;
}

.clearfix{
*zoom:1;
}【为i6i7清除浮动的样式】

4、双伪元素清除浮动

.clearfix:before,
.clearfix:after{
content:"";
display:table;
}
.clearfix:{
clear:both;
}
.clearfix{
*zoom:1;
}

PS切图

定位

将盒子固定在某个位置，自由的漂浮在其他盒子（标准流和浮动）上面，定位是用来布局的，通过边偏移来移动位置

定位=定位模式+边偏移

语法：
选择器{
position:属性值；
top:100px;
left:100px;
}

静态定位（static）
默认方式（无定位），没有边偏移，基本不用

相对定位（relative）
相对于原来标准流的位置移动，
原来在标准流中的区域继续占有，后面的盒子仍然把其当做标准流

绝对定位（absolute）
以带有定位的父元素来移动位置

标准流的子盒子一般以父盒子为准移动位置
绝对定位子盒子：如果父盒子没有定位，按照浏览器定位
如果父亲有，就以父盒子为准
如果爷爷有，父亲没有，就按爷爷定位

为父盒子添加一个相对定位：

绝对定位的盒子不占位置（完全脱标）
口诀：子绝父相（子级用绝对定位时，父级要用相对定位）
父亲需要占有位置而儿子要任意摆放

有Padding不适合用浮动，可以用子绝

固定定位（fixed）
是绝对定位的一种特殊形式
1、完全脱标（不占位置）
2、只认可浏览器的可视窗口
浏览器可视窗口+边偏移属性 来设置元素的位置
和父元素无关
不随滚动条滚动

扩展

绝对定位的盒子居中
绝对/固定 不能通过 margin:auto 设置水平居中

1.left: 50%【让盒子左侧移动到父元素的水平中心位置】
2、margin-left:-100px【让盒子向左移动自身高度的一半】

堆叠顺序（Z-INDEX）
出现盒子重叠情况，加了定位的盒子默认后来居上
用== z-index==层叠等级属性可以调整盒子的堆叠顺序

定位改变display属性
行内块不给宽度默认就是内容的宽度

浮动元素，绝对定位元素不会发生外边距合并的问题


(总结没看