前端主要布局方式

布局

一、布局是什么：

• 布局是前端开发人员的核心基础技能。
• 布局是对页面模块和内容进行科学合理的组织和呈现。
• 布局的好坏直接影响着后续的所有工作进展的顺利与否与效率的高低。

二、布局的作用：

• 布局可以使页面美观、漂亮，使用户赏心悦目。
• 可以提高开发和维护的效率。

静态布局

     静态布局就是传统的网站形式，网页上的所有元素的尺寸一律使用px作为单位。当在屏幕宽高有调整时，出现横向和竖向的滚动条来查阅被遮掩部分。

一、优点

编写简单，没有兼容性问题。

二、缺点

不能根据用户的屏幕尺寸做出不同的表现。

自适应布局

     创建多个静态布局分别为不同的屏幕分辨率定义布局，每个静态布局对应一个屏幕分辨率范围。
     使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。
     屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。

一、优点

可以在不同尺寸和介质的设备切换不同的样式。

二、缺点

在同一个设备下还是静态布局，不能根据屏幕尺寸做出相应的表现。

流式布局

     流式布局页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。代表作栅栏系统（网格系统）。
     使用%百分比定义宽度，高度大都是用px来固定，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。

一、优点

可以应对不同尺寸的屏幕，是移动端开发最常用的布局方式。

二、缺点

如果屏幕尺度跨度太大，那么在过小或过大的屏幕上不能正常显示或显示不协调。

弹性布局

     包裹文字的各元素的尺寸采用em/rem做单位，而页面的主要划分区域的尺寸仍使用百分数或px做单位（同 [ 流式布局 ] 或 [ 静态/固定布局 ] )。
     使用 em 或 rem 单位进行相对布局，相对%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示。

一、优点

理想状态是所有屏幕的高宽比和最初的设计高宽比一样，或者相差不多，完美适应。

二、缺点

这种只是宽度自适应，高度不是自适应，不能满足对高度，或元素间距有要求的设计。

响应式布局

     每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。
通常使用 @media 媒体查询和网格系统配合进行布局。

一、优点

在网页地址不变的情况下满足用户在不同设备上浏览访问的需求，同时方便网站内容的管理与更新、针对搜索引擎友好等特点。

二、缺点

设计难、实现难、成本大。

布局的应用

1. 如果只做pc端，那么静态布局（定宽度）是最好的选择；
2. 如果做移动端，且设计对高度和元素间距要求不高，那么弹性布局（rem+js）是最好的选择，一份css+一份js调节font-size搞定。
3. 如果pc，移动要兼容，而且要求很高那么响应式布局还是最好的选择，前提是设计根据不同的高宽做不同的设计，响应式根据媒体查询做不同的布局。

常见布局问题

1. ! important>内联样式>id选择器>类选择器、属性选择器、伪类选择器>元素选择器、伪对象>通配符选择器>继承的属性>浏览器默认样式。
2. margin(外边距) - 清除边框外的区域，外边距是透明的。
3. border(边框) - 围绕在内边距和内容外的边框。
4. padding(内边距) - 清除内容周围的区域，内边距是透明的。
5. content(内容) - 盒子的内容，显示文本和图像。

display:none与visibility:hidden的区别

1. display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素。
2. visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素。
3. 使用visibility:hidden比display:none性能上要好。
4. display:none切换显示时页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流）。而visibility切换是否显示时则不会引起回流。

高度坍塌

       在文档流中，一个块级元素如果没有设置height，其height是由子元素撑开的。也就是子元素多高，父元素就多高。
       但是为子元素设置浮动后，子元素会完全脱离文档流，此时会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。
       由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱，也就是所谓的高度塌陷。
解决方案
1.给父级div定义高度
2.使用空元素，如

(.clear{clear:both})
3.父级div定义 display:table
4.父元素设置 overflow：hidden、auto；