页面布局的一些总结

小小程序员洋

已于 2023-02-08 09:51:25 修改

阅读量413

点赞数

文章标签： css css3 html

于 2020-05-31 20:43:03 首次发布

本文链接：https://blog.csdn.net/qq_40257538/article/details/106460401

版权

简单的举例

三个div 左右固定宽度中间宽度自适应假设高度已知说出尽可能多的方法

说的越多在一定程度上说明你对css掌握的越好

布局的五个方法

所有的div min-height:100px

1 float 布局

左 float:left 右 float:right 中不做任何处理（float 浮动脱离文档流 div 是块元素有高度的话宽度自动填满（宽度有最大值的情况下））

而左右有浮动元素（遮挡物所以中间元素的内容从中间的开始部分显示 float的一些特性）

2 绝对定位

左 position:absolute

右 position :absolute

中 position:absolute

left:300px;

right:300px

这两个一定要写否则脱离文档流 div没有最大宽度限制是不是自动填充满的

3 flex布局

这个很简单

父级 display:flex

左300 右 300 中间flex:1 即可这样这个元素会自动填充满剩余的空间

4 table 布局

父级要先使用table布局子元素改为单元格即可

     .a {
        width: 100%;
        display: table;
      }
      .a > div {
        height: 200px;
        display: table-cell;
        box-shadow: 1px 1px #ccc;
      }
      .b,.c {
        width: 300px;
      }

5 网格grid布局

一样的父级设置为网格布局然后设置行高列的宽度

  .a {
        width: 100%;
        display: grid;
        grid-template-rows: 100px;
        grid-template-columns: 300px auto 300px;
      }
      .a>div{
        box-shadow:1px 1px aqua ;
      }

总结优缺点

float 和position 布局都会脱离文档流类似于都需要解决清除浮动的影响

优点是float 的兼容性非常好基本是支持所有的浏览器

flex 和table布局不会有这样的问题但是flex布局不支持ie8以下的版本

同时 table的优点也是缺点就是单元格的高度会保持一致

所有如果高度不确定的时候两侧高度会随中间高度变化的布局（不做其他改变的话是flex布局和table布局）

盒子模型分为标准模型和IE模型

IE模型其实就是box-sizing：border-box 默认是标准模型

涉及到盒子就经常有BFC的问题

BFC

块级格式化上下文用来解决边距重叠的问题比如布局中左元素float 右元素与左元素有重叠且高于左元素

比如兄弟元素一个上一个下边距（则只会有一个最大的值作为编剧）

BFC的原理或者说规则

1 BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。所以可以解决上下边距重叠的问题给一个元素加一个父级设计为BFC即可（就不会和外面的margin有冲突了）

2 BFC的区域不会与float box重叠。解决上面说的布局即使左边元素是浮动也不会重叠

3计算BFC的高度时，浮动元素也参与计算。常用的场景自动撑开父级高度而子元素是浮动的

4在同一个BFC 内还是会有重叠问题的

同时也学到了一个新的布局方式两个元素并列可以一个浮动一个正常即可且自动填充满整行了

触发bfc

float不为none
position不为relative和static（position的值为absolute或者fixed）
overflow为auto、scroll和hidden（overflow的值不为visible）
display的值为inline-block、inline-flex、flex、flow-root、table-caption、table-cell。