这种布局一般使用在一个元素相对于父元素的定位,如右下角,中间等。首先把父元素,即布局元素要参考的元素设置position为relative,然后自身设置absolute,这样就可以达到相对布局的效果了。这里会有一种特殊情况,即需要定位在中间,即元素是垂直且水平居中,首先设置定位元素top: 50%; right: 50%; 这时元素并不是被定位在参考元素的中间,这时要把需要定位的元素设置宽高,然后margin-left: 宽度一半;margin-top:高度一半;这样就能达到定位在中间的效果了。具体看下面代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.wrap {
border: 1px solid #aaaaaa;
background-color: #eeeeee;
width: 300px;
height: 300px;
position: relative;
}
.k1 {
position: absolute;
bottom: 0;
right: 0;
}
.k2 {
position: absolute;
width: 20px;
height: 20px;
left: 50%;
top: 50%;
margin-left: -10px;
margin-top: -10px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="k1">1</div>
<div class="k2">2</div>
</div>
</body>
</html>
inline-block可以使行内元素,如a,span,i等,可以设置宽高,也可以使div在同一行排列起来。缺点是元素间会有间隔,可以在父元素上设置
font-size: 0;
-webkit-text-size-adjust:none;
来消除这个间隔。
这个样式我主要是使用在把图片与文字居中显示。如果我们要把img与span里的文字居中显示。只需要把img与span设置
display: inline-block;
vertical-align: middle;
checkbox与文字居中也可以用这种方式来实现。
最近需要做兼容到ie8及以上的页面,而且没有使用UI框架,全是需要自己用css来构建。通过参考一些大的门户网站(因为这些网站面向所有群体,所以兼容肯定做得不赖,虽然有些比较丑),发现了以下的布局方法。
接下来通过代码来演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.wrap {
width: 610px;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.f-l {
float: left;
}
.item {
border: 1px solid #aaaaaa;
background-color: #eeeeee;
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
}
</style>
</head>
<body>
<div class="clearfix wrap">
<div class="item f-l">块1</div>
<div class="item f-l">块2</div>
<div class="item f-l" style="height: 300px">块3</div>
<div class="item f-l" style="height: 300px">块4</div>
<div class="item f-l">块5</div>
</div>
</body>
</html>
效果图如下:
模拟表格的方式来对元素进行布局排列。因为表格的样式更符合布局的习惯,或者说更符合一些设计的需求。但因为表格元素有特定的语义,所以不建议直接使用表格元素布局,但display可以让我们满足表格形式的布局。具体看代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.wrap {
width: 610px;
display: table;
}
.row {
display: table-row;
}
.item {
border: 1px solid #aaaaaa;
background-color: #eeeeee;
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
display: table-cell;
}
</style>
</head>
<body>
<div class="wrap">
<div class="row">
<div class="item f-l">块1</div>
<div class="item f-l">块2</div>
<div class="item f-l">块3</div>
</div>
</div>
</body>
</html>
注:这种布局的特点时,在设置元素宽高的时候,可以不包括border。这也使得有时候更方便计算。
CSS居中完整指南
六种实现元素水平居中
去除inline-block元素间间距的N种方法
CSS3圆角圆边 支持IE6-IE8浏览器
感谢您的阅读!
如果看完后有任何疑问,欢迎拍砖。
欢迎转载,转载请注明出处:http://www.yangrunwei.com/a/37.html
邮箱:glowrypauky@gmail.com
QQ: 892413924