欢迎来到嘟嘟工作室!

联系热线:157-9333-9974联系热线:157-9333-9974
  1. 网站首页 > 新闻动态 > 建站资讯

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

日期:2022-06-02 15:25:31 编辑:嘟嘟网络用户提供 点击数:

网页设计最重要的布局,你真的理解么(图1)

主要内容

网页设计最重要的布局,你真的理解么(图2)

01流式布局

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

网页设计最重要的布局,你真的理解么(图3)

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

02浮动布局

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

浮动原理

网页设计最重要的布局,你真的理解么(图4)

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

网页设计最重要的布局,你真的理解么(图5)

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

网页设计最重要的布局,你真的理解么(图6)

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

网页设计最重要的布局,你真的理解么(图7)

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

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

网页设计最重要的布局,你真的理解么(图8)

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

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

清除浮动方式四:overflow:hidden

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

03定位布局

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

网页设计最重要的布局,你真的理解么(图9)

相对定位:

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

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

网页设计最重要的布局,你真的理解么(图10)

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

绝对定位

绝对定位特征:绝对定位脱标,不会占用位置。

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

网页设计最重要的布局,你真的理解么(图11)

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

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

网页设计最重要的布局,你真的理解么(图12)

04弹性布局

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

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

什么是弹性布局

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

网页设计最重要的布局,你真的理解么(图13)

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

网页设计最重要的布局,你真的理解么(图14)

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

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

网页设计最重要的布局,你真的理解么(图15)

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

网页设计最重要的布局,你真的理解么(图16)

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

网页设计最重要的布局,你真的理解么(图17)

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

举报/反馈
点击领取支付宝红包,支付宝口令自动复制
"真想不到会有人会打赏,言语也许对你并不重要,但我还是谢谢你。"
给萌小嘟打赏
网页设计最重要的布局,你真的理解么
扫码支持 扫码支持 扫码支持
扫码打赏,你说多少就多少
2
5
10
20
50
自定义
支付宝
微信
QQ钱包

打开支付宝扫一扫,即可进行扫码打赏哦

打开微信扫一扫,即可进行扫码打赏哦

打开QQ钱包扫一扫,即可进行扫码打赏哦

感兴趣吗?

欢迎联系我们,我们愿意为您解答任何有关网站疑难问题!

您身边的【网站建设专家】

搜索千万次不如咨询1次

主营项目:网站建设,手机网站,响应式网站,SEO优化,小程序开发,阿里装修运营等

立即咨询 157-9333-9974