title | date |
---|---|
CSS布局(下) |
2017/02/21 14:47:11 |
float的意思就是元素漂浮在上层。
可以直接通过设置float属性实现图文混排,代码如下:
<div style="width:200px;height:200px;border: 1px solid gray;">
<img src="" alt="" style="width:100px;height:100px;float:right;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor.
</div>
当为元素设置float只有,它将会漂浮起来。那么它之后的元素就会忽略它,而进行定位。所以会导致元素重叠:
<div style="width:50px;height:50px;border:1px solid red;float:left">
我是悬浮元素
</div>
<div style="width:100px;height:100px;border:1px solid blue;">
我是标准div元素内容
</div>
我是悬浮元素
我是标准div元素内容
这个时候,就需要清除浮动(clear:both),另外,还可以通过clear:left|right来分别清除左右浮动:
<div style="width:50px;height:50px;border:1px solid red;float:left">
我是悬浮元素
</div>
<div style="width:100px;height:100px;border:1px solid blue;clear:both;">
我是标准div元素内容
</div>
我是悬浮元素
我是标准div元素内容
在内容的浮动元素高度大于外部容器时,效果如下:
<div style="width:100px;border:1px solid blue;">
<div style="width:50px;height:150px;border:1px solid red;float:right">
我是悬浮元素
</div>
我是标准div元素内容
</div>
我是悬浮元素
我是标准div元素内容
可以通过clearfix样式来修复:
<style>
.clearfix {
overflow: auto;
zoom: 1;/*针对IE需要额外关照*/
}
</style>
<div class="clearfix" style="width:100px;border:1px solid blue;">
<div style="width:50px;height:150px;border:1px solid red;float:right">
我是悬浮元素
</div>
我是标准div元素内容
</div>
我是悬浮元素
我是标准div元素内容
百分比宽度可以非常容易的实现动态布局,但是当窗口变得很窄的时候,元素的展示可能会错乱。所以需要选择最合适的布局方式。
另外,不能使用min-width来修复这个问题,因为如果是左右结构,对左边的元素设定min-width,右边的元素是不会遵守的,可能会引起重叠。
“响应式设计(Responsive Design)”是一种让网站针对不同的浏览器和设备“响应”不同显示效果的策略,这样可以让网站在任何情况下显示的很棒!
如果要兼容移动端,请加上如下类似meta
<meta name="viewport" content="width=device-width, maximum-scale=2, minimum-scale=0.5, user-scalable=no">
因为众所周知,手机端的屏幕分辨率相当多,所以可以强制指定屏幕的width是等于设备宽度的,忽略分辨率。 maximum-scale 是指最大缩放比例。
CSS columns是较新的标准,不支持IE9及以下和Opera Mini,所以需要使用浏览器前缀。Column可以很轻松的实现文字的多列布局,示例如下:
<div style="width:150px;-webkit-column-count:3;-webkit-column-gap: 1em;">
CSS布局CSS布局CSS布局CSS布局CSS布局CSS布局CSS布局CSS布局CSS布局CSS布局
</div>
CSS布局CSS布局CSS布局CSS布局CSS布局CSS布局CSS布局CSS布局CSS布局CSS布局
flexbox布局模式被用来重新定义CSS中的布局方式。
<style>
.container{
width: 80%;
border: 1px solid red;
height:50px;
display: flex;
}
</style>
<div class="container">
<div style="width:100px;"></div>
<div style="flex:3;background:lightgray;">1</div>
<div style="flex:5;background:lightyellow;">2</div>
</div>
1
2
分析一下以上代码,只需要在容器上设置display:flex,那么内部元素的如果设置了flex样式,那么就会按照flex进行计算,然后实现flex布局。
flex布局,还能实现简单的垂直居中布局。
<div class="container" style="align-items: center; justify-content: center;">
我是垂直居中的元素
</div>
我是垂直居中的元素
其中,align-items设置水平居中,justify-content设置了垂直居中。