CSS几种常见的页面布局方式介绍

墨蓝 2023-10-07 16:52 47阅读 0赞

**问题：CSS几种常见的页面布局方式介绍？**

**CSS常见的有以下7种，必须要掌握的是前3种:**  
flex弹性盒子（弹性布局）；  
rem布局（一般都是flex+rem使用的比较多）；  
响应式布局（响应式布局的原理，和适配方案必修掌握）；  
固定布局 / 流式布局（百分比布局）/ 浮动布局 / 定位布局；

**Flexbox布局**  
flex布局又称弹性盒子，简单代码量少，可以不用左右浮动了  
Flexbox布局在定义伸缩项目大小时伸缩容器会预留一些可用空间，让你可以调节伸缩项目的相对大小和位置。例如，你可以确保伸缩容器中的多余空间平均分配多个伸缩项目，当然，如果你的伸缩容器没有足够大的空间放置伸缩项目时，浏览器会根据一定的比例减少伸缩项目的大小，使其不溢出伸缩容器。综合而言，Flexbox布局功能主要具有以下几点：  
第一，屏幕和浏览器窗口大小发生改变也可以灵活调整布局；  
第二，可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间），从而调整伸缩项目的大小；  
第三，可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间；  
第四，可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；  
第五，可以控制元素在页面上的布局方向；  
第六，可以按照不同于文档对象模型（DOM）所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。

**rem布局**  
rem根据页面宽度和的页面的根元素来控制大小，移动端常用方式之一  
响应式布局，一套代码适应pc和移动端，设置好几个尺寸分别的样式，根据页面的宽度来改变样式  
流式布局也叫百分比布局。把元素的宽,高,margin,padding不再用固定数值,改用百分比,这样元素的高,margin,padding 会根据页面的尺寸随时调整，已达到适应当前页面的目的  
百分比是基于元素父级的大小计算得来的；  
元素的水平或者竖直间距都是相对于父级的宽度计算的.(margin&padding)  
边框不能用百分比设置  
浮动布局关键词，float，可以设置left或者right，他使元素脱离文档流进而达到布局的目的，也是目前一个比较主流的布局方式，但是使用浮动的结束以后，别忘记清除浮动

**定位布局**  
定位布局也是目前比较常用的一种布局方式，关键词： position: fixed;固定布局，将元素固定在一个位置，不随页面移动而移动，position: relative;相对定位，相对于元素自身定位，不脱离文档流，相当于定义一个参照物，一般和绝对定位结合使用，position: absolute;绝对定位，脱离文档流，一般和相对定位结合使用，如果不定义相对定义，将会相对于整个浏览器定位，所以定位布局，一般情况下都是相对定位和绝对定位结合着来，相当定位相当于划定一个势力范围，制定一个封闭的容器块，然后绝对定位就行对于相对定位来定位，从而达到有效的布局。

**（3） 问题扩展**

结合布局方式，那么常见的就是css布局方式，对于css样式一般需要涉及到的就是实现以下三种布局：  
实现div的水平居中和垂直居中  
多元素水平居中  
实现栅格化布局

**（4）结合项目中使用**

1）rem布局先设置根元素（font-size: 100px）方便计算，然后比如div需要100px宽度就是1rem 以此类推  
2）流式布局以百分比为主要形式，让屏幕自适应，这种布局方式定义灵活，能够根据屏幕的情况变化，但是这种方式设计的效果不太容易控制，一般移动端结合rem用的比较多，pc端用的不是非常多

[**黑马程序员Web前端HTML5+CSS3+移动Web前端全套，零基础自学前端必备教程**][Web_HTML5_CSS3_Web]

[Web_HTML5_CSS3_Web]: https://www.bilibili.com/video/BV1cf4y1j7hL