你的位置:首页 > 软件开发 > 网页设计 > 这可能是史上最全的CSS自适应布局总结

这可能是史上最全的CSS自适应布局总结

发布时间:2016-04-22 15:00:08
标题严格遵守了新广告法,你再不爽,我也没犯法呀!屁话不多说,直入!所谓布局,其实包含两个含义:尺寸与定位。也就是说,所有与尺寸和定位相关的属性,都可以用来布局。大体上来说,布局中会用到的有:尺寸相关的盒子模型,普通流、浮动、绝对定位这三种定位机制,CSS3中的transform和 ...

标题严格遵守了新广告法,你再不爽,我也没犯法呀!屁话不多说,直入!

所谓布局,其实包含两个含义:尺寸与定位。也就是说,所有与尺寸和定位相关的属性,都可以用来布局。

大体上来说,布局中会用到的有:尺寸相关的盒子模型,普通流、浮动、绝对定位这三种定位机制,CSS3中的transform和弹性盒子模块还有试验中的grid模块。博客园还有一些论坛逛多了,经常可以听到浮动布局,inline-block布局,弹性盒布局这几个名词,这几种都是比较常用的布局方法。现在对布局也算有一点了解,做个总结巩固一下。如果你也看了很多资料但是实际动手的时候对布局还是无从下手的话,希望本文可以帮你理清思路。

唠叨一句:看到一个效果图或者网站的时候,千万不要急着手贱去敲代码!先思考清楚页面的构造,理清各元素之间的关系,特别需要注意的是在不同的设备下需要有怎样的展现(自适应),当你思路清晰找到最好的布局方案时,coding其实真的不需要多少时间。

 

尺寸相关


为什么要先说尺寸呢?因为尺寸在布局中的作用非常核心,布局方式定位这些知识改变了他们之间的关系,没有尺寸就什么也不是。比如我们通常会用margin来控制跟其他元素的距离,这就是布局。

很多人都会觉得,什么width、margin、padding太简单了,早就掌握了。这种心态我一开始学习CSS的时候也有,觉得很好理解很简单,但是后面才发现自己原来很多东西都没真正掌握。看看张鑫旭大神给我们上的政治课:http://www.zhangxinxu.com/wordpress/2012/07/bottleneck-css-study/ 

先说说百分比,百分比是相对父对象的,这里特性非常好用,很多时候会用在自适应布局上面。浏览器尺寸的改变,就是根节点html的长宽改变,我们可以用%来将浏览器尺寸和元素尺寸联系起来,做到自适应。 另外一个比较有意思的值是auto,auto是很多尺寸值的默认值,也就是由浏览器自动计算。首先是块级元素水平方向的auto,块级元素的margin、border、padding以及content宽度之和等于父元素width。使用auto属性在父元素宽度变化的时候,该元素的宽度也会随之变化。但是当该元素被设为浮动时,该元素的width就变成了内容的宽度了,由内容撑开,也就是所谓的有了包裹性。overflow | position:absolute | float:left/right都可以产生包裹性,替换元素也同样具有包裹性。在具有包裹性的元素上想利用width : auto;来让元素宽度自适应浏览器宽是不行的。

高度方向的话,有外边距的重叠,外边距auto为0,这两点需要注意。书写方向什么的,接触比较少就不扯了。那为什么margin:auto对不能计算垂直方向的值呢?很简单,垂直方向是被设计成可以无限扩展的,内容越多浏览器便产生滚动条来扩展,所以垂直方向都找不到一个计算基准,以此返回一个false,便成了0。

用处:通过width、height控制大小,各个方向的margin值控制与边界或者与其他元素的距离来定位。

 

浮动


目前PC网站大多使用float布局,从成本上考虑大改的概率很小,所以不要说浮动无用,总是会有机会让你维护的!代表网站:淘宝、腾讯、京东、百度等。

浮动听得多了,博客园上关于用浮动布局的介绍也非常的多。浮动原本用于文本环绕,但却在布局被发扬光大,这就是命!我的理解:浮动布局的核心就是让元素脱离普通流,然后使用width/height,margin/padding将元素定位。脱离普通流的元素,就像脱离地心引力一样,可以叠在其他元素上面产生重叠或者使用负边距跑到父元素外,理解了这一点浮动布局就很好理解了。

下面用个圣杯布局的例子说明一下,理解了这个之后其他布局更加简单:

 

left,宽度高度固定

 

HTML & CSS:

 

这可能是史上最全的CSS自适应布局总结这可能是史上最全的CSS自适应布局总结
<!DOCTYPE html><html>  <head>    <meta charset="utf-8" />    <title>宽度自适应布局</title>    <style>      .wrap {        background-color: #F00;      }      .clearfix:after {        content: "";        clear: both;        display: block;      }      .left {        float: left;        width: 100px;        background: #00f;        height: 180px;      }      .right {        float: right;        width: 150px;        background: #0f0;        height: 200px;      }      .center {        background: #FFFFFF;        margin-left: 110px;        margin-right: 160px;        height: 150px;      }    </style>  </head>  <body>    <div class="wrap clearfix">      <div class="left">left,宽度高度固定</div>      <div class="right">right,宽度高度固定</div>      <div class="center">center,可以自适应浏览器宽度,高度固定。</div>    </div>  </body></html>

原标题:这可能是史上最全的CSS自适应布局总结

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。