如何用CSS快速布局（一）—— 布局元素详细
一、什么是块级元素和内联元素
1，块级元素：
display:block表现出来的特点是折行的， 一般来说可以包含块级元素和内联元素；
例外：
P 元素，只能包含内联元素，而不能包含块级元素。
"form"这个块元素比较特殊，它只能用来容纳其他块元素。
2，内联元素：
display:inline表现出来是不换行的，内部只能包含内联元素。
像“span”这样的行内元素，没有自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。 其实你需要知道的行内元素就是 span 和 a
3，浮动元素自动设置为"block"元素
不管是block还是inline定义了浮动之后,可以定义高度,宽度.
<a>正常情况下是不能定义高度的。宽度倒是可以定义，但是对鼠标有反应的只有文字部分
如果加上float:left的话，能定义高宽，整块对鼠标有反应 但是 它是横向菜单，
设置display:inline;这个属性能够修复著名的IE双倍浮动边界问题。↓（貌似这个问题只存在于IE6？）
http://www.zzzszy.com/a/2016/0927/896160.html
| 块元素(block element) | 内联元素(inline element) |
|
* address - 地址 * blockquote - 块引用 * center - 举中对齐块 * dir - 目录列表 * p - 常用块级容易，也是css layout的主要标签 * dl - 定义列表 * fieldset - form控制组 * form- 交互表单 * h1 - 大标题 * h2 - 副标题 * h3 - 3级标题 * h4 - 4级标题 * h5 - 5级标题 * h6 - 6级标题 * hr - 水平分隔线 * isindex - input prompt * menu - 菜单列表 * noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容 * noscript - ）可选脚本内容（对于不支持script的浏览器显示此内容） * ol - 排序表单 * p - 段落 * pre - 格式化文本 * table - 表格 * ul - 非排序列表 |
* a - 锚点 * abbr - 缩写 * acronym - 首字 * b - 粗体(不推荐) * bdo - bidi override * big - 大字体 * br - 换行 * cite - 引用 * code - 计算机代码(在引用源码的时候需要) * dfn - 定义字段 * em - 强调 * font - 字体设定(不推荐) * i - 斜体 * img - 图片 * input - 输入框 * kbd - 定义键盘文本 * label - 表格标签 * q - 短引用 * s - 中划线(不推荐) * samp - 定义范例计算机代码 * select - 项目选择 * small - 小字体文本 * span - 常用内联容器，定义文本内区块 * strike - 中划线 * strong - 粗体强调 * sub - 下标 * sup - 上标 * textarea - 多行文本输入框 * tt - 电传文本 * u - 下划线 * var - 定义变量 |
4，可变元素
可变元素为根据上下文语境决定该元素为块元素或者内联元素。
* applet - java applet
* button - 按钮
* del - 删除文本
* iframe - inline frame
* ins - 插入的文本
* map - 图片区块(map)
* object - object对象
* script - 客户端脚本
5，display:inline-block；
维持块级元素可设置宽高，但又能像内联元素一样和其他内联元素置于一行。
二、盒模型
三、如何定位——相对定位、绝对定位、浮动
相对定位：指相对于文档流中的其他已定义的元素位置进行定位。
static（默认值）：如果使用默认值，在CSS中为元素定义的top,left,right,bottom.z-index都不会生效。
relative：相对元素本身进行移动。
绝对定位：会脱离正常的文档流，不再占据空间。
absolute：相对一个不为static的父元素进行绝对定位，如果不指定父元素的position，absolute将相对整个html文档进行绝对定位。会优先显示于正常文档流定位元素以及float元素。
fixed：相对浏览器窗口进行定位，不论网页如何滚动，该元素始终停留在屏幕的某个位置上。
浮动：float
脱离文档流——相对父元素大小调整位置。如果父元素宽度为100，两个子元素宽度分别为200，则依旧显示为上下层次，而不是左右。
外盒子——会优先显示于正常文档流定位元素。内盒子——弱于块级元素，强于内联元素
重点！定位元素与文档流显示关系
1，正常文档流之间的内外部盒子显示关系：
代码结构如下（粗略展示）<p>黄色块正方形 <p>红色块</p> <p>红色块</p></p><p>蓝色块正方形</p>
黄色和蓝色为外部文档流，红色的为黄色块的两个内部文档流。
外部盒子为外部文档流，内部盒子有自己的文档流，互不干扰，但（非自身父元素的）外部文档流会优先显示于内部文档流。
2，内部盒子浮动元素和内部文档流元素关系：
内联元素和浮动元素的优先级：
正常文档流中，<a>内联元素和块级元素各占一行。
然而当设置为浮动元素后，文档流内联元素让位于浮动元素（<a>先后于<p>定义结果一样）。如下：
还会出现文字包绕现象：
块级元素和浮动元素优先级
当块级元素先于浮动元素定义时，浮动元素换行排后。当浮动元素先定义时，脱离文档流，不对正常文档流的块级元素造成影响。
3，内部盒子浮动元素和外部文档流内部元素关系：
浮动元素覆盖外部文档流元素，但不占据空间。
绿色块和图片是蓝色块的内部元素，可见，块级元素照正常文档流显示，但内联元素img还是会让步于浮动元素，即使是外部文档流的浮动元素。
4，兄弟元素绝对定位和浮动的优先关系
蓝色块为黄色内部块的absolute定位元素，且先于红色块设置p。红色块为Float定位元素，被absolute覆盖。
5，绝对定位和文档流元素的优先关系&相对定位元素的优先关系
绝对定位position：absolute。
1，相对一个不为static的父元素进行绝对定位，如果不指定父元素的position，absolute将相对整个html文档进行绝对定位。
2，如果没有设置top\left\bottom\right，则其顶端和左侧将与原文档流位置一致（即跟没有设置position一样），但又会覆盖掉外部文档流内部浮动元素多出部分。
下图为蓝色块设置position:absolute;
（注：黄色块（内含红色和绿色子元素）和蓝色块（内含绿色子元素）是兄弟元素）
调换下顺序，蓝色块首先设置p，position为absolute。黄色块没设置position，即默认static。因为脱离了文档流，absolute元素优先显示。
设置黄色块position为relative，黄色块覆盖绝对定位元素。即当相对定位元素后于绝对定位元素定位时，相对定位元素优先显示。
总结：
1，正常文档流下，外部盒子优先显示于先定义元素的内盒子（如果超出会被覆盖）。块级元素和内联元素不会在同一行。
2，对内外部文档流，浮动元素脱离文档流，对于先定义的元素按正常文档流显示（让位块级，挤开内联），对后定义的元素不造成布局影响，但却影响正常文档流的内联元素展示，表现为内联元素依旧会被浮动元素“挤开”（不论哪里的内联元素，都不会被覆盖在浮动元素之下）
3，绝对定位元素优先显示于浮动元素。
4，不设置具体值的绝对定位元素会按正常文档流排列，但脱离文档流，不对后定义元素造成影响。
5，如果兄弟元素设置了position:relative；当先于绝对定位元素定义时，绝对定位元素优先显示于相对定位元素。
当后于绝对定位元素定义时，相对定位元素优先显示于绝对定位元素。
四、如何居中对齐
水平居中：
1.实现行内元素的居中。方法：在行内元素外面的块元素的样式中添加：text-align:center;
2.实现块级元素的水平居中。
方法一：margin:0 auto;
注意：如果块级元素是body的直接子元素，不设置宽，则默认100%，看不出效果；不设置高，且p中没有内容，则高度默认为0。因此，一定要同时设置块级元素的宽和高，这样才能看出来效果。对于在一个p中的另一个p希望居中，也可以使用这个方式，因为这时的margin是相对于其父元素而言的。
方法二：使用绝对定位和负边距。
position:absolute;
left:50%; ——相对于父元素向左移动50%宽度
margin-left:-50px; ——移回自身宽度的一半
垂直居中
1.行内元素的垂直居中
方法一：让字体垂直居中，line-height设置为父元素高度。
方法二：设置padding让其垂直居中。
方法三：父元素设置line-height，行内元素设置vertical-align:middle。
2.块级元素的垂直居中。
方法一：使用绝对定位和负边距。
方法二：在父元素中添加display:flex;align-items:center;即可实现竖直居中。
实现水平和垂直居中
方法一：使用绝对定位和负边距
方法二：使用display：flex
在父元素的样式中添加display：flex；align-items:center实现竖直居中，justify-content:center;实现水平居中。
方法三：同样使用display:flex.在父元素中设置display:flex;在子元素中设置margin：auto。
方法四：使用css3属性——translate()变形函数
position: absolute; top:50%; left:50%; transform:translate(-50%,-50%);
五、关于样式继承
盒模型样式是不可继承的，例如width、height（宽高）、border（边框）、margin（边距）、padding（补白）和背景等
vertical-align不可继承
可继承属性
color
cursor
direction
font
letter-spacing
line-height
list-style
text-align
text-indent
text-shadow
text-transform
whitewhite-space
word-break
word-spacing
word-wrap
writing-mode
更多如何用CSS快速布局（一）—— 布局元素详细 相关文章请关注PHP中文网！
上一篇： ie 浏览器想用时间过长,该怎么解决
下一篇： 深入理解PHP7之zval