一. 概述
任何一个页面都是由各种布局组成的,而不同的布局方式适应不同的页面类型。与布局有关的属性主要有以下一些:position
,display
,padding
,margin
,width
,height
,min-width
,max-width
,min-height
,max-height
,box-sizing
,float
,clear
,z-inde
等。
以上布局的划分,是由个人喜好便于记忆划分,如有不当,望多多指出。
按表现结构分类
通栏布局
通栏布局即只有单列的布局,页面通栏布局是最基础布局的方式。
水平居中
使用
inline-block
和text-align
实现.parent { text-align: center; } .child { display: inline-block; }
优点:兼容性好;缺点:需要同时设置子元素和父元素
使用
margin
实现.child { width: 200px; margin: 0 auto; }
优点:兼容性好。缺点: 需要指定宽度
使用
table
实现.child { display: table; margin: 0 auto; }
优点:只需要对自身进行设置;不足:IE7+支持
使用
flex
实现.parent { display:flex; justify-content:center; } /*或*/ .parent { display:flex; } .child { margin:0 auto; }
缺点:兼容性差,如果进行大面积的布局可能会影响效率
绝对定位
.parent { position: relative; } .child { position: absolute; left: 50%; transform: translate(-50%); }
如果自身宽度确定,可以使用
margin-left
为 - 1/2 自身宽度。
缺点:兼容性差,IE9+
垂直居中
使用
vertical-align
vertical-align
需要依赖inline
或者inline-block
使用。
在使用vertical-align的时候,由于对齐的基线是用行高的基线作为标记,故需要设置line-height或设置display:table-cell;.parent { display: table-cell; vertical-align: middle; } /*或*/ .parent { display: inline-block; vertical-align: middle; line-height: 20px; }
使用绝对定位
.parent { position: relative; } .child { positon:absolute; top: 50%; transform: translate(0,-50%); }
如果自身高度确定,可以使用
margin-top
为 - 1/2 自身高度。
缺点:兼容性差,IE9+使用
flex
实现.parent { display: flex; align-items: center; }
缺点:兼容性差,如果进行大面积的布局可能会影响效率
水平垂直居中
使用
vertical-align
,text-align
,inline-block
实现,推荐使用.parent { display: table-cell; vertical-align: middle; text-align: center; } .child { display:block; }
使用绝对定位
.parent { position:relative; } .child { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
使用
flex
.parent { display: flex; justify-content: center; align-items: center; }
全屏布局
.parent { position: relative; } .child { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
多栏布局
等宽布局
使用
float
实现,含间距。推荐使用.parent { margin-left: -20px } .column { float: left; width: 25%; padding-left: 20px; box-sizing: border-box; }
使用
table
实现.parent-fix { margin-left: -20px; } .parent { display: table; table-layout: fixed; width: 100%; } .column { display: table-cell; padding-left: 20px; }
使用
flex
实现.parent { display: flex; } .column { flex: 1; } .column + .column { margin-left: 20px; }
九宫格布局
使用
table
实现<div class="parent"> <div class="row"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="row"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="row"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> </div>
.parent { display: table; table-layout: fixed; width: 100%; } .row { display: table-row; } .item { display: table-cell; width: 33.3%; height: 200px; }
使用
flex
实现.parent { display: flex; flex-direction: column; } .row { height: 100px; display: flex; } .item { width: 100px; background: red; }
非等宽布局
使用
float
与margin
实现,推荐使用.left { float:left; width:100px; } .right{ margin-left: 100px; }
IE6会有3px的bug
也可以这样实现:
<div class="parent"> <div class="left"></div> <div class="right-fix"> <div class="right"></div> </div> </div>
.left { width: 100px; float: left; } .right-fix { width: 100%; margin-left: -100px; float:right; }
使用
float
与overflow
实现 推荐使用.left { width: 100px; float: left; } .right { overflow: hidden; }
使用
table
实现.parent { display: table; table-layout: fixed; width: 100%; } .left{ width: 100px; } .right, .left { display: table-cell; }
使用
flex
实现.parent{ display: flex; } .left{ width: 100px; } .right{ flex: 1; }
上诉各种方式列举 左列定宽,右列自适应 ,其他 右列定宽,左列自适应 , 两列定宽,一列自适应 , 两侧定宽,中栏自适应 ,一列不定宽,一列自适应 情况类似,可以参考上诉方法写出。
按适应性划分
固定布局
固定宽度,固定高度。
固定宽高与弹性宽高转换
利用
min-width
,min-height
,max-width
,max-height
控制固定宽度与弹性宽度的变化。如:.box { max-width: 800px; margin: 0 auto; } .box2 { min-width: 800px; } .text { min-height: 80px; }
弹性布局
这里指的弹性布局,是指页面内容的宽度、高度能够随窗口、内容变化而弹性变化。
默认弹性
- 默认
display:inline
宽度适应内容。 - 默认
display:block
宽度适应父级宽度。
- 默认
设置弹性
使用相对单位与
%
详见:取值与单位 > 长度 > 相对长度
使用属性
- 利用
display:table-cell
- 利用
display:flex
- 利用
混合布局
固定布局与弹性布局组合使用。
响应式布局
响应式布局的理念是页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。使用同一种模板,用合适的CSS来制定内容在各种尺寸的屏幕上的呈现方式。
响应式布局的具体处理方式是利用媒体查询Media Queries
,来控制使用其他布局方式来使页面更够适应屏幕。其适应性具体可能会表现在以下方面:
- 尺寸变化
- 位置变化
- 增减变化
响应式布局一般实施原则: 移动端优先,从移动端向上设计。
Media Queries
@media mediatype and|not|only (media feature) { CSS-Code; }
mediatype
all
:用于所有设备aural
:已废弃。用于语音和声音合成器braille
:已废弃。 应用于盲文触摸式反馈设备embossed
:已废弃。 用于打印的盲人印刷设备handheld
:已废弃。 用于掌上设备或更小的装置,如PDA和小型电话print
:用于打印机和打印预览projection
:已废弃。 用于投影设备screen
:用于电脑屏幕,平板电脑,智能手机等。speech
:应用于屏幕阅读器等发声设备
media feature
aspect-ratio
:定义输出设备中的页面可见区域宽度与高度的比率color
:定义输出设备每一组彩色原件的个数。如果不是彩色设备,则值等于0color-index
:定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表,则值等于0device-aspect-ratio
:定义输出设备的屏幕可见宽度与高度的比率。device-height
:定义输出设备的屏幕可见高度。device-width
:定义输出设备的屏幕可见宽度。grid
:用来查询输出设备是否使用栅格或点阵。height
:定义输出设备中的页面可见区域高度。max-aspect-ratio
:定义输出设备的屏幕可见宽度与高度的最大比率。max-color
:定义输出设备每一组彩色原件的最大个数。max-color-index
:定义在输出设备的彩色查询表中的最大条目数。max-device-aspect-ratio
:定义输出设备的屏幕可见宽度与高度的最大比率。max-device-height
:定义输出设备的屏幕可见的最大高度。max-device-width
:定义输出设备的屏幕最大可见宽度。max-height
:定义输出设备中的页面最大可见区域高度。max-monochrome
:定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。max-resolution
:定义设备的最大分辨率。max-width
:定义输出设备中的页面最大可见区域宽度。min-aspect-ratio
:定义输出设备中的页面可见区域宽度与高度的最小比率。min-color
:定义输出设备每一组彩色原件的最小个数。min-color-index
:定义在输出设备的彩色查询表中的最小条目数。min-device-aspect-ratio
:定义输出设备的屏幕可见宽度与高度的最小比率。min-device-width
:定义输出设备的屏幕最小可见宽度。min-device-height
:定义输出设备的屏幕的最小可见高度。min-height
:定义输出设备中的页面最小可见区域高度。min-monochrome
:定义在一个单色框架缓冲区中每像素包含的最小单色原件个数min-resolution
:定义设备的最小分辨率。min-width
:定义输出设备中的页面最小可见区域宽度。monochrome
:定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备,则值等于0orientation
:定义输出设备中的页面可见区域高度是否大于或等于宽度。resolution:定义设备的分辨率。如
:96dpi, 300dpi, 118dpcmscan
:定义电视类设备的扫描工序。width
:定义输出设备中的页面可见区域宽度。
@media only screen and (max-width: 500px) { .gridmenu { width:100%; } .gridmain { width:100%; } .gridright { width:100%; } }
按标签或属性划分
表格布局
使用table
布局。
定位布局
使用positon
布局。
positon:absolute
positon:fixed
浮动布局
使用float
布局。
Flexbox布局
使用flex
布局。
Grid布局
使用display:grid
布局
具体详见:
z-index
层级
z-index
属性设置元素的堆叠顺序,可拥有负的属性值,仅能在定位元素上奏效。
CSS中的层级优先级 (同级元素、z-index生效):
z-index
较大者优先
定位元素优先于未定位元素
文档中靠后元素优先于靠前元素
系统中z-index
约定,试拟
z-index 区间 | 内容与功能 |
---|---|
0,1 | 隐藏的内容与结构 |
9 ~ 1 | 页面主体布局 |
99 ~ 10 | 页面内容 |
999 ~ 100 | 页面基本弹层 |
9999 ~ 1000 | 页面顶级弹层 |