1.定位（position）
设定元素在文档中的位置。会将标签（元素）转换为块级。
1.1定位的分类
1)static:静态定位
默认值，没有定位，不设置偏移值（left/top/right/bottom）,占用标准流（文档流）
2）relative：相对定位
占用标准流（文档流），它会出现在文档流中它该出现的位置，通过设置偏移值改变其位置。它相对于自身位置所占的位置做偏移
3）absolute:绝对行为
脱离文档流，相对于body做偏移（left/top/right/bottom）
绝对定位一般与相对定位结合使用，它相对的父级是relative定义的元素做偏移。relative的元素是absolute的父级
一般在项目开发中relative+absolute结合使用
4)fixed:固定定位
脱离文档流，相对于浏览器窗口左上角（0，0）做偏移，他与relative设定的对象没有关系。也就是说，它跟父级的定位没有关系
一般在开发中用于固定导航栏
1.2 z-index
当多个元素添加绝对定位，元素将会叠加在一起，使用z-index可以设置元素显示的层次。文档流默认的z-index的值为0。
用在static和relative元素上将无效
2.网页整体布局
2.1网站开发策略：
先整体再局部，至顶向下，逐步细化
1）双飞翼布局:
由三列组成，两端固定，中间自适应
双飞翼布局的优点：
（1）兼容性好，兼容所有主流浏览器，包括万恶的IE6。
（2）因为在DOM中center_panel在三列结构的最前面，因此可以实现主要内容的优先加载。
2）圣杯布局:
由三列组成，两端固定，中间自适应，外观与双飞翼一样
布局时与双飞翼比增加了定位和偏移
3）侧边栏固定布局
I）两栏布局
a.左侧宽度固定，右侧自适应
b.左侧自适应，右侧固定
c.左右都固定
II)三栏布局
a.左右固定，中间自适应
b.左侧自适应，中间，右侧定宽
c.左边和中间固定，右边自适应
3.BFC&IFC
FC：FC的含义就是Fomatting Context（格式上下文）。它是CSS2.1规范中的一个概念。它是页面中的一块渲染
区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
BFC和IFC
都是常见的FC。分别叫做Block Fomatting Context 和Inline Formatting Context。
1）BFC:块级格式上下文
a)形成BFC的条件
1.浮动元素（float除none之外的值）
2.定位元素（position：absolute/fixed））
3.display（值为inline-block/table-shell/table-caption时）
4.overflow(值为hidden、auto、scroll)
b)BFC 特性（规则）
1.内部的盒子会在垂直方向一个接一个的放置//跟普通文本流一样
2.垂直方向的距离会叠加，上下距离值由margin的最大值决定（属于同一个BFC的两个相邻Box的上下margin会发生重叠；）
（如果不想要Margin值叠加，需要将其变成一个独立地容器，用两个div包裹）
3.*BFC的区域不会与float元素区域重叠
4.计算BFC的 高度是，浮动元素也参与计算
5.BFC就是页面上的一个独立地容器，容器里面的子元素不会影响到外面的元素
c)BFC和普通文档流的区别：
普通文档流布局规则
1.浮动的元素是不会被父级计算高度
2.非浮动元素会覆盖浮动元素的位置
3.margin会传递给父级
<body>
<div class="container">
<div class="box1">上盒子</div>
<div class="box2">下盒子</div>
</div>
</body>
.container{
background-color: #e10000;
}
.box1{
width: 100px;
height: 100px;
background-color: #3fb5da;
margin:50px 0;
}
4.两个相邻元素上下margin会重叠
.container{
background-color: #e10000;
}
.box1{
width: 100px;
height: 100px;
background-color: #3fb5da;
margin:50px 0;
}
.box2{
width: 100px;
height: 100px;
background-color: #000000;
margin:100px 0;
}
BFC布局规则
1.浮动的元素会被父级计算高度（父级触发了BFC）
2.非浮动元素不会覆盖浮动元素位置（非浮动元素触发了BFC）
3.margin不会传递给父级（父级触发了BFC）
4.两个相邻元素上下margin会重叠（给其中一个元素增加一个父级，然后让他的父级触发BFC）
参考链接：https://blog.csdn.net/qq_40301211/article/details/88931805
d)BFC的作用
i）解决margin重叠的问题（添加独立BFC）
ii)解决float高度塌陷的问题（在父集添加ovverflow:hidden）
iii)解决侵占浮动元素的问题在父集添加ovverflow:hidden清除浮动）
2）IFC：内联（行级）格式上下文
a)形成IFC 的条件：
1.font-size
2.line-height
3.height
4.vertical-aligin
b)IFC 的特性（规则）
1.IFC的元素会在一行中从左只有排列
2.在一行的所有元素会在该区域形成一个行框
3.行宽的高度为包涵框的高度，高度为行框中最高元素的高度
4.浮动的元素不会再行框中，并且浮动的元素会压缩行框的宽度
5.行框的宽度容纳不下子元素时，子元素会自动换下一行显示，并且会产生新的行框
6.行框的元素内遵循tetx-align和vertical-align
容器的高度：
height=line-height+vertical-align
扫一扫
226
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
