一、静态布局
静态布局就是传统的网站形式,网页上的所有元素的尺寸一律使用px作为单位。
1.布局特点
不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态(定宽度)布局的,也就是设置了min-width,这样的话,如果小于这个宽度就会出现滚动条,如果大于这个宽度则内容居中外加背景,这种设计常见于pc端。
代码如下:
浮动方面经常出现的问题:
上下两个div,如果上面的div设置浮动的话一定要立即给下面的div设置清除浮动(clear:both;加在下面那个div样式上, clear:both; 的意思是不允许上面有浮动)
下图为纠正后的正确表现(把清除浮动加在红色div上):
上下都有div的情况,设置上下间距时一定要从上往下挤,不能从下往上(用margin-bottom:20px;)
谈到浮动,我们还要讲下 块级元素和内联元素的区分和使用:
块级元素有:<div>、<p>、<ul>、<li>、<ol> ....
块级元素:是可以控制宽和高、margin等,并且会换行。
内联元素:是不可以控制宽和高、margin等;并且在同一行显示,不换行。
二、自适应布局
简单来说就是分别为不同的屏幕分辨率定义布局,即创建多个静态布局,每个静态布局对应一个屏幕分辨率范围。
1.布局特点
屏幕分辨率变化时,页面里面元素的位置会变化而大小不会变化。
三、流式布局
页面元素的宽度按照屏幕分辨率进行适配调整,但整体布局不变(栅格布局)。
1.布局特点
当屏幕分辨率变化时,页面里元素的大小会变化而但布局不变。这就导致如果屏幕太大或者太小都会导致元素无法正常显示。
四、响应式布局
为不同的屏幕分辨率定义布局,同时,在每个布局中,应用流式布局的理念,即页面元素宽度随着窗口调整而自动适配。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。
- 布局特点
每个屏幕分辨率下面会有一个布局样式,即元素位置和大小都会变。(把元素的长度设置成百分比、利用相对定位、绝对定位的方式布局)
①.相对定位:相对于原来自己所在的位置偏移,相对定位原来的位置依旧还占据。
②.绝对定位:可以用负值,原来的位置消失了。
③.固定定位:position: fixed;
④.重叠元素堆叠:z-index
五、弹性布局(rem/em布局)
rem是相对于html元素的font-size大小而言的,而em是相对于其父元素。使用rem单位的弹性布局在移动端很受欢迎。
1.优点
2.属性设置
网页可以看成由一个个"盒子"组成
如下图所示
1、常见布局
- 单列布局
代码如下
![](https://user-gold-cdn.xitu.io/2019/5/9/16a9886ec26605f0?w=968&h=404&f=png&s=37264)
效果如下
- 双列布局
代码如下
![](https://user-gold-cdn.xitu.io/2019/5/9/16a9887492af9f76?w=1011&h=656&f=png&s=57884)
效果如下
- 三列布局
代码如下
![](https://user-gold-cdn.xitu.io/2019/5/9/16a98878dc5ff9a5?w=529&h=324&f=png&s=3980)
效果如下
- 混合布局(综合布局)