标签：浮动 pre att 换行 width targe body 自动 developer
一、几类视图
内联视图：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;
}
<div class="clearfix">...</div>
source：
// Mixin itself
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
行内布局
单行，若设定 line-height 垂直方向自动居中。通过设定 text-align 元素将按一定顺序排列。
定位布局
-- 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; /* 有了这个就自动居中了 */
}
233
标签：浮动 pre att 换行 width targe body 自动 developer
原文地址：https://www.cnblogs.com/lemos/p/9826164.html
