传统布局三种方式
- 标准流(盒模型)
- 浮动
- 定位
一、标准流
- 元素的划分
- 行内元素
- 块级元素
1. 元素的划分
- 行内元素 - inline
- 块级元素 - block
- 特殊的行内块元素 - inline-block
重点:
- 行内元素 负责页面的 横向 排版
- 块级元素 负责页面的 纵向 排版
【行内元素. 特性】
a. 不能设置宽高
b. 默认在一行排列显示
c. 当一行显示不下时,会自动换行显示
d. 不能设置垂直方向的外边距
e. 可以设置padding与水平方向的margin与border
【行内元素高度】
a. 由字体的高度+上下padding决定
b. 行高本身不影响行内元素的高度
c. 多余的部分会溢出
技巧
- 将行内元素的line-height 设置成父元素的height一样时,可以实现文本垂直居的效果, 也对行内块元素有效。
【行内元素的宽度】
a. 由字体的宽度+左右padding决定
【行内元素的margin】
a. 设置上下margin无效
b. 可以溢出, 不影响父级元素
【块级元素】
a. 可以设定宽高
b. 独占一行
c. 一般与行内元素组合使用
d. 高度不设置时,由内容撑开
e. 相邻的上下边距会合并,取其中最大值
f. 当子元素设置上边距时,且紧挨着父元素上边界时, 会造成margin-top塌陷
g. 解决: border, overflow(BFC), padding
【行内块元素】
a. 具有行内与块级的特点
b. 多行排列时,有换行的\n在浏览器显示时,有空格,
c. 可以用font-size:0, 或编辑不换行。
二、浮动
特性:
- 会脱离标准流, 影响正常的布局
- 一行可以排列多个,且能设置宽高
- 且具有顶部对齐的特点, 可应用于 【爆布流】
-------清除浮动: clear:both
- 额外标签法: 在最后一个浮动元素插入标签
- BFC法: overflow:hidden; 对于溢出的部分不能展示。
- 伪元素法: ::after, ::before;
/*::after法*/
.clearfix::after {
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{
*zoom: 1; /*兼容ie6、7, hack写法*/
}
/*::after, ::before*/
.clearfix::after,
.clearfix::before {
content: '';
display: table;
}
.clearfix::after {
clear: both;
}
.clearfix {
*zoom: 1; /*兼容ie6、7*/
}
三、定位
类型 | 说明 |
---|---|
相对定位 | 不脱离正常的标准流, 还占有以前的位置,相对于自己原因的位置定位。 |
绝对定位 | 脱离正常的标准流, 相对于最近一级有定位属性的元素进行定位 |
固定定位 | 脱离正常的标准流, 相对于body元素进行定位 |