css布局汇总
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css布局汇总相关的知识，希望对你有一定的参考价值。
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布局汇总的主要内容，如果未能解决你的问题，请参考以下文章