美文网首页
前端网站5种布局

前端网站5种布局

作者: 刘哈哈icey | 来源:发表于2019-01-14 14:14 被阅读0次

    前端基本布局分大致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的破坏性主要是指它会使父容器的高度塌陷,也就是父元素在高度计算的时候会忽略浮动的元素)。
    优点:兼容性好,比较简单

    参考:

    1. 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/
    2. 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
    兼容性:

    image.png

    注意,设为 Flex 布局以后,子元素的floatclearvertical-align属性将失效。

    image.png

    (五)grid布局

    https://www.css88.com/archives/8510

    https://segmentfault.com/a/1190000012889793#articleHeader1

    CSS Grid 布局是 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,意味着它可以同时处理列和行。

    兼容性:


    image.png

    相关文章

      网友评论

          本文标题:前端网站5种布局

          本文链接:https://www.haomeiwen.com/subject/htgddqtx.html