前端布局

前端布局

一、静态布局

静态布局就是传统的网站形式,网页上的所有元素的尺寸一律使用px作为单位。

1.布局特点

不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态(定宽度)布局的,也就是设置了min-width,这样的话,如果小于这个宽度就会出现滚动条,如果大于这个宽度则内容居中外加背景,这种设计常见于pc端。

代码如下:

浮动方面经常出现的问题:

上下两个div,如果上面的div设置浮动的话一定要立即给下面的div设置清除浮动(clear:both;加在下面那个div样式上, clear:both; 的意思是不允许上面有浮动)

下图为纠正后的正确表现(把清除浮动加在红色div上):

上下都有div的情况,设置上下间距时一定要从上往下挤,不能从下往上(用margin-bottom:20px;)

谈到浮动,我们还要讲下 块级元素和内联元素的区分和使用:

块级元素有:

    1. ....

      块级元素:是可以控制宽和高、margin等,并且会换行。

      内联元素:是不可以控制宽和高、margin等;并且在同一行显示,不换行。

      二、自适应布局

      简单来说就是分别为不同的屏幕分辨率定义布局,即创建多个静态布局,每个静态布局对应一个屏幕分辨率范围。

      1.布局特点

      屏幕分辨率变化时,页面里面元素的位置会变化而大小不会变化。

      三、流式布局

      页面元素的宽度按照屏幕分辨率进行适配调整,但整体布局不变(栅格布局)。

      1.布局特点

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

      四、响应式布局

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

      1. 布局特点

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

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

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

      ③.固定定位:position: fixed;

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

      五、弹性布局(rem/em布局)

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

      1.优点

      2.属性设置

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

      如下图所示

      1、常见布局

      • 单列布局 代码如下

      效果如下

      • 双列布局

      代码如下

      效果如下

      • 三列布局 代码如下

      效果如下

      • 混合布局(综合布局)

      代码如下

      效果如下

你可能感兴趣的:(前端布局)