CSS布局1
说起布局就需要谈谈定位
谈及定位，我就得说说position属性
position
static :默认元素 该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
relative: 该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（移动后扔保留之前位置 相对定位）
absolute
不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
（相对非static 祖先元素定位 绝对定位）
fixed
不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖
（固定定位）
<div class="parent clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
1.左右布局
方法一 设置position的绝对位置 :为父元素设置position:relative; 为子元素设置position:absolute
.parent{
position:relative
height:500px
}
.left{
position:absolute;
top:0;
left:0;
}
.right{
position:absolute;
top:0;
left:300px;
}
方法二 子元素设置浮动，然后在其父元素上使用clearfix清除浮动。
.clearfix::after{
content: '';
display: block;
clear: both;
}
.left
.right{
float:left;
}
2.左中右布局
方法与上类似
3.水平居中
方法一：设置宽度然后通过margin:auto来实现
.left{
width: 960px;
margin-left: auto;
margin-right: auto;
}
方法二：浮动实现水平居中的方法:浮动配合position定位实现
利用float脱离文档流的特性然后利用position定位实现位置的水平居中
.left{
float: left;
left: 50%;
position: relative;
}
方法三：利用display:inline-block特性将div元素转换为行内块元素，然后在其父元素上设置text-align的属性为“center”
.parent{
text-align:center;
}
.left{
display:inline-block;
}
4.垂直居中
方法一：设定行高 ( line-height ) 适用于行内元素以及行内块元素（可以用display属性达到目的）
.parent{
width:200px;
height:150px;
border:1px solid #000;
line-height:150px;
text-align:center;
}
.left{
display:inline-block;
width:30px;
height:30px;
background:#c00;
}
方法二：通过绝对定位和负边距
.parent {
position: relative;
border: 1px solid red;
width: 500px;
height: 500px;
}
.left {
position: absolute;
width: 100px;
height: 50px;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -25px;
text-align: center;
border: 1px solid red;
}
网友评论