说在前面
文档流
文档流包括浮动流、定位流以及普通的标准流。
一、常见的几种页面布局
- 静态布局
- 定位布局
- 流式布局
- 弹性布局
- 自适应布局
- 响应式布局
- 圣杯、双飞翼、栅格布局
1、静态布局
特点： 传统的网页布局形式，页面上的所有元素的尺寸均使用
px（像素）作为单位，当屏幕缩小的时候，会出现滚动条
优点 ：代码简单，编写容易，且无兼容性问题
缺点：无法根据不同的屏幕尺寸做出相应的表现
2、定位布局
特点： 使用
position属性定义定位类型，并指定元素位置来布局
position部分属性：static、fixed、relative、absolute、sticky堆叠顺序
- 使用
z-index属性控制堆叠顺序，值越大层级越高- 有定位的元素比没有定位的元素层级高
- 在都有定位的情况下，层级取决于书写顺序
-
static 定位：静态定位的元素遵循正常文档流对象，为HTML的默认值 -
fixed 定位：固定定位的元素相对于浏览器窗口是固定位置，窗口滚动也不会移动，完全脱离文档流，因此不占据空间，能与其他元素相重叠 -
relative 定位：相对定位的元素相对于自身正常位置，不脱离文档流，移动后原本占据的空间不会改变，也经常用来作为绝对定位的容器。 -
absolute 定位：绝对定位的元素相对于已定位的父元素，若无已定位的父元素，则相对于HTML，脱离文档流，不占据空间，与其他元素相重叠 -
sticky 定位：粘性定位是基于页面滚动位置，在相对定位和固定定位之间切换显示
关于sticky，它的常用场景：当元素距离页面视口（Viewport，也就是fixed定位的参照）顶部距离大于 0px 时，元素以 relative 定位表现，而当元素距离页面视口小于 0px 时，元素表现为 fixed 定位，也就会固定在顶部，关于它的详细介绍，可以看这篇博客关于sticky的详细介绍，这个兼容性不是很好，还是一个实验性属性，不是W3C推荐的标准
以下是博客代码运行的结果
3、流式布局
特点： 流式布局使用
%定义元素的宽度，使用px定义元素高度，当屏幕分辨率发生变化时，页面中元素大小改变，布局位置不变，往往配合max-width和min-width等属性控制元素尺寸流动范围，以免过大或过小影响阅读。优点： 在不同的屏幕尺寸下显示相同的样式（前端开发早期屏幕尺寸差异不大）。是移动端常用布局方式
缺点： 如果屏幕尺寸与最初设计的比例之间跨度过大，元素会被拉伸或挤压，导致内容显示不协调
4、弹性布局
特点： 弹性布局可以简单、完整、相应式的实现各种页面布局。并且兼容所有主流浏览器，对容器（父元素）与项目（子元素）添加属性进行布局，使用
em(相对父元素的尺寸)和rem(相对HTML元素的尺寸)为单位设置元素，且支持字体大小调整
优点： 灵活性高，可完美适应宽高比一样的屏幕尺寸
缺点： 这种只是宽度自适应，高度不是自适应，因此不能满足对高度或元素间距有要求的设计
关于弹性布局中涉及的相关知识以及模糊点：
1）px，em与rem的区别
px：px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的
em：em是相对长度单位，相对于当前对象内文本的字体尺寸，如当前对行内文本的字体尺寸未被设置，则相对于浏览器的默认字体尺寸，em的值是不固定的，em会继承父元素的字体大小
rem：rem是相对长度单位，相对于根元素（即html元素）的font-size计算值的倍数。任意浏览器的默认字体都是16px。所有未经调整的浏览器都符合 1rem=16px , 如果我们在css中设置了html根元素的font-size的值,为了方便计算，时常将在<html>元素中设置font-size:值为62.5%,也就是16*62.5%=10px,1rem=10px;）
以下是利用弹性布局，jquery做的移动端模仿点餐功能
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
width=device-width：设备的宽
initial-scale=1.0：初始缩放比例
maximum-scale=1.0：最大缩放比例
minimum-scale=1.0：最小缩放比例
user-scalable=no"：是否允许用户缩放
5、自适应布局
特点： 自适应布局是创建多个静态布局，每个静态布局对应一个屏幕尺寸范围，使用
@media 媒体查询在不同尺寸的设备上切换相对应的样式
优点： 通过开发多套界面来满足不同屏幕尺寸所对应的样式需求
缺点： 自适应屏幕适配是在一定范围内，若屏幕太小，页面内容会拥挤
6、响应式布局响应式布局实例
特点： 响应式布局的每个屏幕下会有一个布局样式，即元素位置和大小都会变，页面兼容所有屏幕尺寸，而不是为每一个屏幕尺寸做特定的样式，通常使用
@media媒体查询和网格系统配合进行布局。优点： 满足用户在不同设备上浏览访问的需求。 同时方便网站内容的管理与更新、针对搜索引擎友好等特点
缺点： 设计难，实现难，成本大
响应式布局的一些用法以及与自适应布局的区别
7、圣杯、双飞翼、栅格布局
圣杯、双飞翼布局特点：两侧宽度固定，中间宽度自适应的三栏布局
Bootstrap的栅格布局，主要分为以下几部分
container的设计
响应式布局实现
行
列
圣杯布局详解
双飞翼布局详解
从圣杯布局到栅格布局
栅格布局语法详解
其中圣杯布局设计到的负margin=-100%变化，橙色是margin：
二、BFC
1、普通标准流就是
FC（格式化上下文，它是页面中一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及与元素之间的关系和作用）
2、BFC(Block formatting context)：“块级格式化上下文”。它是一个独立的渲染区域，是用于布局块级盒子的一块渲染区域。并且与这个区域的外部毫无关系。
3、触发BFC的条件(以下条件满足其一即可)
根元素，即html元素float的值不为noneposition的值为absolute或fixedoverflow的值不为visibledisplay的值为inline-block、table-cell(关于table-cell属性的学习与应用)、table-caption4、
BFC的布局规则
普通文档流布局规则
1.浮动的元素是不会被父级计算高度
2.非浮动元素会覆盖浮动元素的位置
3.margin会传递给父级
4.两个相邻元素上下margin会重叠
BFC布局规则
1.浮动的元素会被父级计算高度（父级触发了BFC）
2.非浮动元素不会覆盖浮动元素位置（非浮动元素触发了BFC）
3.margin不会传递给父级（父级触发了BFC）
4.两个相邻元素上下margin不会重叠（给其中一个元素增加一个父级，然后让他的父级触发BFC
5、BFC 作用
① 阻止元素被浮动的元素覆盖（可作多栏布局自适应）
<style>
.green {
width: 100px;
height: 50px;
float: left;
background-color: green;
}
.red {
width: 200px;
height: 100px;
float: left;//解决覆盖
background-color: red;
}
</style>
</head>
<body>
<div class="green"></div>
<div class="red">red</div>
</body>
之前
之后
② 包含浮动元素（清除浮动）
清除浮动主要是为了解决父级元素因为子级浮动引起的内部高度为0的问题
<style>
.green {
background-color: green;
overflow: hidden;//解决浮动
}
.red {
width: 200px;
height: 100px;
float: left;
background-color: red;
}
</style>
</head>
<body>
<div class="green">
<div class="red">red</div>
</div>
</body>
之前：绿盒子被红盒子完全覆盖
之后
解决清除浮动的其他办法：
.red {
width: 100px;
background-color: red;
}
.hell{
width: 100px;
float: left;
background-color: yellow;
}
<div class="red">
<div class="hell">red</div>
</div>
1、给需要清除浮动的那个元素后面加一个空div,设置
style=clear：both
<div class="red">
<div class="hell">red</div>
<div style="clear:both"></div>
</div>
2、给父元素加高度
.red {
width: 100px;
height: 100px;
background-color: red;
}
3、给父元素加
overflow: hidden;
.red {
width: 100px;
overflow: hidden;
background-color: red;
}
4、利用双伪类元素
::before，::after，clear:both
.red::before,.red::after {
content: "";
display: table;
}
.red::after{
clear: both;//必须写
}
或者
.red::before,.red::after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/兼容写法
.red::after{
clear: both;
}
.red::after{
zoom: 1;
}
5、使用
after伪元素清除浮动
.red::after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.red {
clear: both;
}
③解决同一个 BFC 区域的垂直方式 margin塌陷 的问题
margin塌陷产生的条件
- 必须是处于常规文档流(
非float和绝对定位)的块级盒子，并且处于同一个BFC中。- 没有
padding和border将它们分别开。（注意：此时的padding、border是给父元素设置padding、border分隔，而非自身设置padding、border）- 都属于垂直方向上的外边距
解决：
overflow：hidden
<style>
.green {
background-color: green;
height: auto;
width: 100px;
margin-bottom: 50px;
overflow:hidden;//解决塌陷 自身建立bfc
}
.green>div {
background-color: pink;
}
</style>
</head>
<body>
<div class="green">
<div style="margin-bottom: 10px">222</div>
</div>
</body>
之前塌陷
之后，.green 盒子高度会计算222的 margin
加padding
<style>
.green {
background-color: green;
height: 100px;
width: 100px;
margin-bottom: 50px;
}
.red {
width: 100px;
height: 100px;
background-color: red;
padding: 10px;
}
.hell{
margin-top: 10px;
}
</style>
<body>
<div class="green"></div>
<div class="red">
<div class="hell">red</div>
</div>
</body>
之前
之后，解决塌陷
加border
在上面的
.red中去掉padding，加border
5376
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
