网页设计最重要的布局，你真的理解么

主要内容

01流式布局

流式布局其实是个概念，浏览器解析代码的时候一般都是从自上而下，网页中的块级元素和行内元素，根据解析的顺序依次在网页上进行排布，所以这个流式布局知道什么是行内元素和块级元素就可以，下图是两种元素的特点和显示在网页中的具体状态

并且标准文档流的特征: 有空白折叠现象，也就是说代码中多个空格，在显示网页中的只有一个空格，当块级元素高低不齐的时候，都是底边对齐显示

02浮动布局

浮动就是脱离标准文档流的限制，浮动的元素可以并排在一行，可以设置宽度和高度

浮动原理

例如，这个标签是行内元素，在不加float这个属性的时候，设置宽度和高度是无效的，但是一旦添加float:left|right的时候，无需display:block转换为块级元素，就可以设置宽度和高度

与浮动相对的就是清除浮动，为什么清除浮动呢，原因有以下几种:

清除浮动方式一: 主动给父盒子添加高度

可以理解为当父级被设置高度的时候，子元素的浮动影响被圈起来，不会影响别的元素

清除浮动方式二:父级设置clear:both|left|right;

clear属性有三个参数，清除左浮动或者右浮动，再或者左右浮动都清除

清除浮动方式三营销型网站建设#https://www.dudukj.cn/pinpai/:隔墙法

通过增加一个div，并且给这个div添加clear:both属性；并且能够给这个div添加高度，去隔开上下两个模块,这种方法就是上述两个的拓展方式，不再细说

清除浮动方式四:overflow:hidden

如果给一个盒子加overflow:hidden属性，那么这个盒子就有了高度，就可以管住子元素浮动带来的影响，上述我们还说添加浮动就不用设置display:block，其实本质添加浮动就是转化为了块级元素，这种方法其实就是间接的给父级增加高度

03定位布局

定位有相对定位和绝对定位以及固定定位，每个定位都有其特点并且之间相互关联

相对定位:

相对定位特征：相对定位不脱标，并且依旧占有原来位置，即使根据相对定位属性不在原来位置也依旧占有原来的位置

相对定位用途: 一般不会做页面大布局，只是微调，可以做绝对定位的参考

使用relative做定位的默认为浏览器窗口作参考

绝对定位

绝对定位特征：绝对定位脱标，不会占用位置。

绝对定位用途：根据绝对定位的特征，可以做范围较大的微调以及压盖效果，绝对定位参考上一级带有position属性的元素进行定位，如果上一级不存在position定位属性，则参考浏览器窗口

固定定位营销型网站建设#https://www.dudukj.cn/pinpai/

固定定位特征：固定定位脱标，不会占用位置。参考点是浏览器窗口，定位不会随滚动条而滚动

其实网页是3维的，只有当元素定位的时候，才能使用z-index这个属性，数值越大越在上面，但是当数值相等或者说没有设置时，比较对应的父级元素的大小

04弹性布局

弹性布局的内容其实是非常多的，本篇文章字符有限，所以就略微的讲解，我会在新的一篇详细的讲解。

网页布局是CSS的重点部分，而flex布局也就是弹性布局是重中之重，上述的三种方式布局是传统布局，但是对于一些特殊布局就非常不方便，对于布局的精度也是不够精准。

什么是弹性布局

弹性布局就是为盒模型提供最大的灵活的布局，什么元素都可以，比如行内元素或块级元素，任何元素都可以，使用的前提就是有父子级的关系的盒模型

上述说过使用的条件，必须是父子级的关系才可以使用，所以在使用之前在父级中先添加上面的代码，下面是布局的原理图

在父级分为主轴和交叉轴，就是x轴和y轴；每个轴又分为开始和结束位置，父级里面的子元素叫做单项，单项又占有一定的主轴和交叉轴的空间，理解上面的原理图，弹性布局就可以开始了

我们根据一个布局的案例进行说明:

上面的图片中有13个单项，并且高度为100的正方形，在父级中使用display:flex设置弹性布局，设置flex-wrap:wrap的时候父级一行的空间不能容纳子元素的个数时候，剩下的子元素将强制换行。营销型网站建设#https://www.dudukj.cn/pinpai/

其中Justify-content:是水平布局设置，align-items是垂直方向子元素的布局设置，当我们打开浏览器的开发者设置的时候，点击对应的代码就会有示意图其对应的布局，显得通俗易懂

以上就是我总结的全部网页的布局的基本方式，其实Bootstrap是专门对于响应式布局的一个js模块，但是不依靠模块只有这四种布局方式，所以基本方式理解在以后学习bootstrap等js拓展模块就显得格外简单，如果你喜欢本篇文章记得关注我，防止看不到下期精彩的内容，有什么问题可以关注我的同名公众号进行留言，或者在评论区留言。