css布局匯總
阿新 • • 發佈：2017-09-17
pan big left float ive 定位 清除浮動 進行 需要
1.塊元素： margin：0 auto；
2.行內塊或行內元素：text-align:center;
3.position：static（默認），relative（相對自身的位置定位），absolute（相對最近的有定位元素的父盒子定位，除static之外的兩種），定位配合top，left，right，bottom使用
4.float：left，right ，註意：需要清除浮動影響
- 對後面一級的元素使用clear：both；
- 使用overflow：hidden；
- 對浮動的元素的父盒子設置容納浮動盒子的高
- 使用偽元素.clear:after{content:".";display:block;clear:both;height:0;width：0；}
- 為了兼容IE，需要加上*zoom：1；
5.利用對父盒子設置display：table-cell ；但是，這種方法只能在IE8+、谷歌、火狐等瀏覽器上使用，IE6、IE7都無效。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 .big{ 8 width: 500px; 9 height: 500px; 10 background-color: #ccc; 11 text-align: center; 12 display: table-cell; 13 vertical-align: middle; 14 } 15 .small{ 16 width: 200px; 17 height: 300px; 18 display: inline-block; 19 background-color: #53ff53; 20 } 21 </style> 22 </head> 23 <body> 24 <div class="big"> 25 <div class="small"></div> 26 </div> 27 </body> 28 </html>
6.對盒子進行position：absolute；top：50%；left：50%；margin-left:負的盒子寬度的一半；margin-top：負的盒子高度的一半；
7.對上面的代碼進行小改動，在不知道盒子的大小的時候，對偏移的位置用transform：translate3d(-50%.-50%,0)
8.利用float：left和相對定位position：relative定位，細節是不需要知道居中的盒子的大小，不過需要對定位的盒子加一層盒子，先對中層盒子移動一半，然後再對小盒子移動多走的一半
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap{
width: 300px;
height: 300px;
}
.big{
background: #ccc;
float: left;
clear: both;
position: relative;
left: 50%;
}
.small{
position: relative;
left: -50%;
background-color: #53ff53;
}
</style>
</head>
<body>
<div class="wrap">
<div class="big">
<div class="small">sadskla</div>
</div>
</div>
</body>
</html>
css布局匯總