一、几类视图
内联视图:inline
单行
块级视图:block
换行,有高度
行内块级视图:inline-block
单行,有高度
二、几类布局
块级布局
换行,通过设置 margin 水平居中
<div class="center-block">...</div>
source:
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
浮动布局
<div class="pull-left">...</div>
<div class="pull-right">...</div>
source:
.pull-left { float: left !important;
}
.pull-right {
float: right !important;
}
source:
// Mixin itself
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
相关要点
①容器塌陷:
source:
<div class="box-1">
<button class="pull-right box-2">button 1</button>
<button class="pull-right box-2">button 2</button>
</div>
<button class="box-3">button 3</button>
<div class="box-1 clearfix">
<button class="pull-right box-2">button 1</button>
<button class="pull-right box-2">button 2</button>
</div>
<button class="box-3">button 3</button>
附:style
<style type="text/css">
body {
margin-top: 10rem;
}
.br-grey {
border: 1px solid #ccc;
}
.br-blue {
border: 1px solid blue;
}
.br-red {
border: 1px solid red;
}
.box-1 {
display: block;
/*height: 10rem;*/
width: 50rem;
}
.box-2 {
display: inline-block;
line-height: 2rem;
}
.box-3 {
display: inline-block;
line-height: 2rem;
}
</style>
②将浮动元素单独封装在一起
目的—— 避免浮动元素与非浮动直接接触。把所有浮动的元素封装一层不会塌陷(并且不为浮动)的父容器。(括号里表示浮动的父容器虽然也不会塌陷,但不符合要求; 主动限定容器高度也不建议使用)
<div class="bfc 或 clearfix">
<div class="br-grey box-1 pull-left ">
<button class="br-red box-2 pull-right">button 1</button>
<button class="br-red box-2 pull-right">button 2</button>
</div>
</div>
<button class="br-red box-3">button 3</button>
③若父容器同时包含浮动与非浮动元素
则只有非浮动元素会撑开容器,若父容器清除浮动,则所有元素都会撑开容器,并且以最高子元素为父容器最终高度。一个父容器中,,尽量保证子元素全部为浮动或非浮动元素,否则容易发生中心线错乱(因为不在一个流中)。
显示结果:
主动调整高度或框高,使得中心线高度一致
.box-1 {
display: inline-block;
line-height: 5rem;
width: 60rem;
padding: 2rem;
}
.box-2 {
display: inline-block;
line-height: 5rem;
}
.box-3 {
display: inline-block;
line-height: 2rem;
}
行内布局
单行,若设定 line-height 垂直方向自动居中。通过设定 text-align 元素将按一定顺序排列。
特点:
inline-block 与 block 元素都可以通过 text-align: center 水平居中。
如果父类 line-height 设的很高,可以使子元素垂直居中。或者 inline-block 之间是水平排列,以其中最大的行高为当前行高。
相关要点:
inline-block 相邻,如果有一方包含一个 block 块,则那一方的 高度被挤开。可能导致相邻的其它 inline-block 塌陷。解决方法是,将那个 block 添加浮动。
显示效果
<div class="container">
<div class="row">
<div class="left">33</div>
<div class="right">22
<div class="block">This is a block</div>
</div>
</div>
</div>
或者
<div class="container">
<div class="row">
<div class="left">33</div>
<div class="right">
<div class="block">block</div>22
</div>
</div>
</div>
附 style
<style>
.left {
display: inline-block;
}
.right {
display: inline-block;
}
.block {
display: block;
height: 80px;
width: 50px;
}
</style>
定位布局
-- relative
相对于元素自身最初位置进行偏移,偏移后位置跟最初位置相关联,即最初位置若受其他元素影响,会导致偏移后位置受关联影响。
-- absolute
相对于父类非默认定位,即设置了('absolute'、'relative' 或者 'fixed')父类元素进行偏移,如果都没有,则相对于 body 进行偏移。绝对脱离文档流。
三、BFC
四、相关布局实例
① 绝对定位实现单个元素垂直居中
a 一般用法
.element {
width: 600px; height: 400px;
position: absolute; left: 50%; top: 50%;
margin-top: -200px; /* 高度的一半 */
margin-left: -300px; /* 宽度的一半 */
}
b css3 用法
.element {
width: 600px; height: 400px;
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */
}
c 特殊用法
.element {
width: 600px; height: 400px;
position: absolute; left: 0; top: 0; right: 0; bottom: 0;
margin: auto; /* 有了这个就自动居中了 */
}
② 行内布局实现多元素垂直居中
<ul class="tch-menu">
<li>序号</li>
<li>用户名</li>
<li>真实姓名</li>
<li>所在地域</li>
<li>院校工<br/>作单位</li>
<li>法律职业资格证书</li>
<li>联系电话</li>
<li>提交时间</li>
<li>审核人</li>
<li>状态</li>
<li>操作</li>
</ul>
附 style
.tch-menu {
display: inline-block;
background-color: #FAFCFC ;
font-size: 14px;
padding: 4px 0;
letter-spacing: -3px; /*消除行内布局间隔*/
}
.tch-menu li{
vertical-align: middle;
display: inline-block;
text-align: center;
min-width: 80px;
word-wrap:break-word;
word-break:break-all;
margin: 0;
padding: 0;
list-style: none;
letter-spacing: 0; /*消除行内布局间隔*/
}
实现效果:
③ 导航条浮动布局
方案 —— 内部全为浮动元素。为保证外部高度由子元素撑开并设定上下边距,需要清除浮动并设定 padding。
<div class="br-grey box-1 clearfix">
<button class="br-red box-2 pull-right">button 1</button>
<button class="br-red box-2 pull-right">button 2</button>
<button class="br-red box-3 pull-left">button 3</button>
</div>
附:style
.box-1 {
display: block;
width: 50rem;
padding: 2rem;
}
.box-2 {
display: inline-block;
line-height: 2rem;
}
.box-3 {
display: inline-block;
line-height: 2rem;
}
233