前端基本布局分大致5种,table布局,float 布局,absolute布局,flexbox布局,grid布局。
假设高度已知,写出三栏布局,其中左右宽度各为300px,中间自适应。
(一)table 布局
在实际的项目开发过程中,不建议用table进行布局
缺点:
1. table 比其他html标签占更多的字节。造成下载时间延迟,占用服务器更多的流量资源(代码冗余)
2.table 会阻挡浏览其渲染引擎的渲染顺序,会延迟页面的生成速度,让用户等待时间更久。
3.灵活性差,一旦设计确定,后期很难通过CSS让它展现新的面貌。
4.不利于搜索引擎抓取信息,直接影响到网站的排名
优点:
1.兼容性好.
2.容易上手
(二)float 布局
float 属性定义元素在哪个方向浮动。
初始应用:让匿名inline boxes性质的文字环绕图片显示
现在应用:任何元素都可浮动。如一个元素设置为浮动元素,浮动元素无论最初什么都会变成一个行级块级元素,拥有display:inline-block属性。
float:left 。沿着父容器顶部向左推入容器,如果卡住推不动了,判断当前位置能否全部显示该子容器,如果能则完成,如果不能继续找空档往里推。
缺点:脱离文档流,需要清楚浮动,**高度塌陷(float的破坏性主要是指它会使父容器的高度塌陷,也就是父元素在高度计算的时候会忽略浮动的元素)。
优点:兼容性好,比较简单
参考:
- https://www.zhangxinxu.com/wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E3%80%81%E8%AF%A6%E8%A7%A3%E5%8F%8A%E6%8B%93%E5%B1%95%E4%BA%8C/
- http://baijiahao.baidu.com/s?id=1582971549718428747&wfr=spider&for=pc
(三)absolute布局
relative属性:脱离文档流,但保留占位符,其偏移位置是相对于本身在正常文档流中时的位置
脱离文档流是说设置了relative属性之后,元素不在z-index:0;的正常文档流中,其z-index的值>0,但保留占位符,就是在正常文档流中位置保留着,后继元素不能占位,然后相对于本身正常位置进行偏移。
absolute:完全脱离文档流,不保留占位符,其元素定位是相对于其父级及以上,一直追溯至设置了position:relative或absolute或fixed属性的外层元素(包含块),如果其外层元素均未设置position属性,则定位是相对于HTML文档进行的绝对定位,并不是相对于body的定位。
缺点:脱离文档流,会导致后续元素全部脱离文档流,可用行差。
(四)flex布局
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
兼容性:
注意,设为 Flex 布局以后,子元素的float
、clear
和vertical-align
属性将失效。
(五)grid布局
https://www.css88.com/archives/8510
https://segmentfault.com/a/1190000012889793#articleHeader1
CSS Grid 布局是 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,意味着它可以同时处理列和行。
兼容性:
image.png
网友评论