在实际开发过程中，我们一般使用display，float，position来构建页面布局。
定位
- static：无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。
- relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
- absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
- fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。
静态定位(static)
static，无特殊定位，它是html元素默认的定位方式，即我们不设定元素的position属性时默认的position值就是static，它遵循正常的文档流对象，对象占用文档空间，该定位方式下，top、right、bottom、left、z-index等属性是无效的。
相对定位(relative)
相对定位相对的是它原本在文档流中的位置而进行的偏移，而我们也知道relative定位也是遵循正常的文档流，它没有脱离文档流，但是它的top/left/right/bottom属性是生效的，最重要的是它还占有文档空间，而且占据的文档空间不会随 top / right / left / bottom 等属性的偏移而发生变动，也就是说它后面的元素是依据位置( top / left / right / bottom 等属性生效之前)进行的定位，这点一定要理解。
绝对定位(absoulte)
absoulte定位，也称为绝对定位，虽然它的名字号曰“绝对”，但是它的功能却更接近于”相对”一词，为什么这么讲呢？原来，使用absoult定位的元素脱离文档流后，就只能根据祖先类元素(父类以上)进行定位，而这个祖先类还必须是以postion非static方式定位的，举个例子，a元素使用absoulte定位，它会从父类开始找起，寻找以position非static方式定位的祖先类元素(注意，一定要是直系祖先才算哦~），直到标签为止，这里还需要注意的是，relative和static方式在最外层时是以标签为定位原点的，而absoulte方式在无父级是position非static定位时是以作为原点定位。和元素相差9px左右。我们来看下效果：
<html>
<style type="text/css">
html{border:1px dashed green;}
body{border:1px dashed purple;}
#first{ width: 200px;height: 100px;border: 1px solid red;position: relative;}
#second{ width: 200px;height: 100px;border: 1px solid blue;position: absolute;top :0;left : 0;}
</style>
<body>
<div id="first">relative</div>
<div id="second">absoult</div>
</body>
</html>固定定位(fixed)
fixed定位，又称为固定定位，它和absoult定位一样，都脱离了文档流，并且能够根据top、right、left、bottom属性进行定位，但不同的是fixed是根据窗口为原点进行偏移定位的，也就是说它不会根据滚动条的滚动而进行偏移。
浮动
float属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。 如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
注意：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。 如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：
在实际开发中我们还可能遇到这样子的情况，假如页面中只有两个元素div1、div2，它们都是左浮动，场景如下：
此时div1、div2都浮动，根据规则，div2会跟随在div1后边，但我们仍然希望div2能排列在div1下边，就像div1没有浮动，div2左浮动那样。
这时候就要用到清除浮动（clear），如果单纯根据官方定义，读者可能会尝试这样写：在div1的CSS样式中添加clear:right;，理解为不允许div1的右边有浮动元素，由于div2是浮动元素，因此会自动下移一行来满足规则。
对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。
布局是css中的重要部分，我们常会用到水平居中，垂直居中。
水平居中
1.定宽块状元素：margin和width实现水平居中最常见的是给一个元素一个宽度，然后加上margin左右值为auto。但是必须给元素指定的一宽度。
.center {
width: 960px;
margin-left: auto;
margin-right: auto;
} <div class="center">水平居中</div>2.不定宽块状元素：设置子元素为display:inline,然后在父元素上设置text-align:center;
.parent {
text-align: center;
}
.child {
display: inline;
}<div class="parent">
<div class="child">我要水平居中</div>
</div>3.浮动居中：position:relative 和 left:50%;
.container{
float:left;
position:relative;
left:50%
}
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>4.flex居中：对父元素设置display:flex;justify-content:center;
5.绝对定位。
6.fit-content居中：
垂直居中
1.父元素一定，子元素为单行内联文本：设置父元素的height等于行高line-height。
.vertical {
height: 100px;
line-height: 100px;
}<div class="vertical">我垂直居中</div>2.父元素高度确定的单行文本（内联元素） 设置 height = line-height； 3.父元素高度确定的多行文本（内联元素） a:插入 table （插入方法和水平居中一样），然后设置 vertical-align:middle； b:先设置 display:table-cell 再设置 vertical-align:middle； 4.块状元素:设置子元素position:fixed（absolute），然后设置margin:auto;
.box {
position: absolute;或fixed
top:0;
right:0;
bottom:0;
left:0;
margin: auto;
}3.使用position:absolute（fixed）,设置left、top、margin-left、margin-top的属性;
.box {
position:absolute;/*或fixed*/
top:50%;
left:50%;
margin-top:-100px;
margin-left:-200px;
}4.利用display:table-cell属性使内容垂直居中,这个方法在多行文字居中的时候用的比较多;
.box {
display:table-cell;
vertical-align:middle;
text-align:center;
width:100px;
height:120px;
background:purple;
}
.box span {
display: inline-block;
vertical-align: middle;
}<div class="box">
<span>多行文字，此处居中设置</span>
</div>
扫一扫
962
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
