前端布局

Posted 2021-11-28

一、静态布局

静态布局就是传统的网站形式，网页上的所有元素的尺寸一律使用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.布局特点

当屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。这就导致如果屏幕太大或者太小都会导致元素无法正常显示。

四、响应式布局

为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。

1. 布局特点

每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。（把元素的长度设置成百分比、利用相对定位、绝对定位的方式布局）

①.相对定位：相对于原来自己所在的位置偏移，相对定位原来的位置依旧还占据。

②.绝对定位：可以用负值，原来的位置消失了。

③.固定定位：position: fixed;

④.重叠元素堆叠：z-index

五、弹性布局（rem/em布局）

rem是相对于html元素的font-size大小而言的，而em是相对于其父元素。使用rem单位的弹性布局在移动端很受欢迎。

1.优点

2.属性设置

网页可以看成由一个个"盒子"组成

如下图所示

1、常见布局

• 单列布局
  代码如下

效果如下

• 双列布局

代码如下

效果如下

• 三列布局
  代码如下

效果如下

• 混合布局(综合布局)

代码如下

效果如下