• 当前位置
  • 首页
  • IT技术
  • 文章正文

网页制作_左边固定宽右边自适应的6种方法_CSS_CSS教程

  • 作者:自动秒收录
  • IT技术
  • 发布时间:2022-05-11 20:48:55
  • 热度:

这是一道面试题,你有多少种办法呢?

这里我们假设左边名为 left,宽度为 200 px,右边名为 right。即默认

?

我的理解分四大类

  • grid 布局

  • 绝对定位

  • 左元素 absolute 右元素 margin-left

  • float 浮动

  • 左元素左浮动,右元素右浮动

  • flex 布局

    需要一个父元素做 flex 布局,且需要给它一个高度(撑开容器)

    ?

    grid 布局

    高级的布局方式,子元素不需要设置宽度,单单设置父元素属性即可。

    ?

    双子元素 absolute

    需要给子元素设置宽高,不然撑不起来。右元素设置left: 200px

    ?

    左元素 absolute 右元素 margin-left

    ?

    无父元素 左元素左浮动,右元素不动

    前两种都需要有个父元素,但浮动不需要

    左边浮动,下一个元素独占位置,并排一行

    同样,需要设置高度,子元素才能撑开

    ?

    无父元素 左边左浮动,右边有浮动

    浮动不需要父元素,浮动就区别于正常文档流

    我的理解是正常文档流是二维层面,而浮动相当于成了三维,区别于 Z 轴

    右边元素有浮动不够,还需要设置宽度

    ?

    只要是 float 实现此功能的,都不需要父元素,以及自身都需要设置高度

    总结

    简单来说,实现布局最好的方式是 flex,简单兼容现代浏览器和机型。当然,我是因为还没有学 grid(但 grid 要记得参数比较多)。绝对定位和浮动各有优缺点

    float 区别于其他三种,不需要父元素做容器

    grid 区别于其他三种,不需要设置子元素(左元素的)宽

    绝对定位区别于其他三种,它的方法不仅要父元素有高,其子元素也要有高

    flex 最简单

    到此这篇关于左边固定宽右边自适应的6种方法的文章就介绍到这了,更多相关左边固定宽右边自适应内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!

    原文链接:https://segmentfault.com/a/1190000041678710

    标签: 右边自适应左边固定宽

    上一篇:手机评测荣耀70参数配置详情及优缺点介绍手...
    下一篇:硬件教程打印机及其它外设打印机无法打印的...


    发布评论