在对于单个的模块我们已经可以设置好其内部的布局元素了，那我们就需要开始布置网页上分布着的大量的盒子
在CSS2种盒子有三种排版模型，即标准流排版，浮动排版和定位排版，同时在CSS3中增加了flex排版
浮动排版和定位排版都是通过更改元素的默认排版来获得的，而元素默认排版称为标准流排版
一、标准流排版
标准流排版是指在不使用其它与排列和定位相关的CSS规定时，各种页面元素默认的排列规则
即同级别的盒子依次在父级盒子中按照块级元素或行内元素或行内块元素的排列方式排列
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标准流排版</title>
</head>
<body>
<h2>块级元素默认垂直排列</h2>
<div>第一个DIV</div>
<div>第二个DIV</div>
<h2>行内元素默认横向排列</h2>
<span>第一个span</span>
<span>第二个span</span>
<h2>行内元素默认横向排列，且可设置宽高及内外边距</h2>
<img src="海绵宝宝.jpg">
<img src="皮卡丘.jpg">
</body>
</html>
就可得到下面这样的图（由于没有利用CSS设置一系列盒子的形状，以及图片的宽高，导致得到最简单，也比较丑的排版）
二、浮动排版
利用float来实现浮动
| 属性值 | 描述 |
|---|---|
| none | 默认值，元素不浮动，按照标准流排列元素 |
| left | 浮动在父元素的左边 |
| right | 浮动在父元素的右边 |
| inherit | 继承父元素float的属性 |
浮动元素的表现及特征
e.g.对于两个div块，若均设置float:left;
则均变成了浮动元素，两个div块显示在了同一行
浮动使行内块元素具有块级元素特征
在设置浮动的基础上对于两个浮动元素设置宽高以及边距都会显示，即都会有效
浮动元素不设置宽高时，宽高由内容撑开
即对于设置的块若只有float和块里面的内容则会块的大小由内容来决定
浮动元素向指定的方向移动，直到它的边缘碰到包含框或另一个浮动框的边框为止
即在一个父元素的块中，若一个div块往左，一个div块往右，则往右的块只能靠近父元素的边框，或者只能碰到左边的元素而不能再移动
浮动元素脱离文档流，浮动后的子元素无法撑开父元素（即高度塌陷）
比如在给父元素中的两个子元素都设置了浮动，而父元素没有设定高度，而当盒子没有设定高度时，高度由盒子的内容撑开，故所有子元素浮动之后，父元素并没有被撑开，这是由于浮动会使元素脱离文档流
故我们可以通过给父元素设置高度，但这种方法只能根据子元素高度是确定的时候才能使用
向同一个方向的浮动的元素形成流式布局
即在同一方向浮动的元素，排满一行或一行剩下的空间不足会使排列自动换行
而在换行中，若前面已经排列好的浮动元素高度大于后面的浮动元素，则会出现换行排列时被卡住的现象
流动会影响后续元素的布局
当元素设置为浮动之后，任何显示在浮动元素下方的元素都会在网页中上移，如果上移元素中包含文字，则会导致文字围绕在浮动元素周围，使布局面目全非
但是也可以因此来设置文字环绕模式
浮动元素会脱离文档流，提升层次
在页面上看到的使平面的，可以想象为立体的，在HTML中，元素实际是由两层组成
一层为元素层，
一层为内容层，内容层包括文字，图片，视频等
给元素设置浮动之后，元素曾就会浮动到内容层区域，看起来像是占据了内容层
而浮动层的后面元素会受到浮动元素脱离文档的影响，上移占据浮动元素原来的位置
浮动清除
针对子元素高度变化的父元素高度塌陷问题的一宗解决办法是清除子元素浮动，需要使用css clear属性
| 属性值 | 描述 |
|---|---|
| left | 元素左侧不允许有浮动元素 |
| right | 元素右侧不允许有浮动元素 |
| both | 元素左右两侧不允许有浮动元素 |
| none | 允许福哦的那个元素出现在元素的左右两侧 |
| inherit | 继承父级元素的clear属性 |
注意：
使用clear必须是块级元素
具有clear属性的元素，必须与浮动元素是同级关系，即是兄弟关系
clear是消除文档流元素上方的浮动元素对自身的影响
空div清除浮动
在父元素后面增加一个空的div，然后设置该div清除两侧的浮动元素，以此来解决父级元素高度塌陷问题
即代码为：
.son3{
clear: both;
}
伪元素清除父元素高度塌陷问题
即在父元素之后使用after
代码为：
.miaov: after{
content: "我是来解决父元素塌陷问题的";
}
BFC 解决父元素高度塌陷问题
BFC：块级格式上下文
为元素提供一个独立的布局环境，布局内外互不影响
由于我做的页面只是简单的几个盒子，并不会涉及到复杂的问题，故我一般只用前面提到的几种就可以解决面临的所有问题，这个方面学的不是很清楚，就不拿出来误导大家啦（嘻嘻嘻）
二、定位排版
浮动解决的是平面空间排版问题，那么定位展示的就是层次之间的叠加关系，使信息呈现朝着纵深的方向发展
定位排版属性
元素定位时需要用到position属性
| 属性值 | 描述 |
|---|---|
| static | 静态定位，默认值，元素按照标准流进行布局，一般不设置 |
| relative | 相对定位，相对于自身位置偏移 |
| absolute | 绝对定位，将对象从文档流中脱离出来，相对其最近的一个已定位的祖先进行绝对定位，如果不存在这样的祖先元素，则相对于最外层的包含框进行位置偏移 |
| fixed | 固定定位，依据浏览器窗口来进行位置偏移 |
注意：
相对，绝对，固定定位的偏移需要使用top, left, right, bottom属性来指定相对于参照物的偏移量及偏移方向，方向由正负值决定
静态定位：
元素按照标准流布局，不同类型元素将按照出现的先后顺序以及各自的默认特征在网页中排列显示，各个元素没有任何的移动效果
相对定位：
元素相对于自身的原始位置进行偏移，设置语法为：
position: relative;
其表现形式为：
- 只设置相对定位，不设置偏移量，元素位置和之前没有任何变化，如果要该改变定位后的元素位置，则要设置偏移量
- 元素移动后，元素的原始位置会被保留下来
- 提升元素的层级
- 根据自己的原始位置计算left, top或其它方向值
注意：
相对定位不会脱离文档流，所以其它元素不会受相对定位的影响，仍会按照原来的位置进行排列
元素定位是不能继承的
绝对定位：
相对于距离自己最近的有定位的祖先元素来进行定位或想相对于最外层的包含框的定位
设置语法为：
position: absolute;
其表现形式为：
- 只给元素设置绝对定位，不设置left等方向值，元素还在原来的位置上，但是脱离文档流
- 提升层级
- 根据距离最近有定位的祖先元素来计算坐标，如果所有的祖先元素都没有定位，就根据最外层的包含框来计算自己坐标
- 不设置宽度时，宽度由内容撑开
- 使行内元素变成块级元素，支持宽高，内外边距等样式设置
固定定位：
相对于浏览器可视窗口进行的定位，位置固定，不随网页移动而移动其元素的偏移设置与相对定位的设置一摸一样
设置语法为：
position: fixed;
其表现形式为：
- 脱离文档流，提升层级
- 固定在浏览器可视区的某一个位置上
- 根据浏览器可视窗口来计算位置
- 使内外元素支持宽高，内外边距等样式，行内元素和块级元素不设置宽度时，宽度由内容撑开
定位层级
层级高低，决定元素相互堆叠的顺序
使用z-index属性来修改，其取值为：
| 属性值 | 描述 |
|---|---|
| auto | 默认值，层级高低与父元素相等 |
| number | 设置父元素的层级高低，值越高，层级越高 |
| inherit | 继承父级元素的属性值 |
注意：
不同级别的定位元素的z-index是没有可比性的
且z-index只能在定位元素上使用，z-index支持负的属性值
定位相关知识
全屏
即设置整个大块的宽高均为100%即可
透明度
通过opacity来设置元素（包括图像）的透明程度
| 属性值 | 描述 |
|---|---|
| number | 规定透明度，取值从0.0（完全透明）到1.0（完全不透明） |
| inherit | 继承父级元素属性 |
注意：
透明度的参数是0-1的两位小数，并且不带单位，浏览器默认元素的透明度为1.0，如果要半透明则设置为0.5
在学了这些之后，我们就可以做一些基本的左右排版之类的事情了
这是了解了这些知识之后我所做的作品，大家有兴趣一定要多尝试，多实践！
该系列博客参考了聂常红 刘伟著的前端HTML+CSS修炼之道
第七篇HTML+CSS学习笔记到此结束 cheers! ?
478
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
