css布局

[问答题]

css布局

拯救世界的光太郎

构建和渲染渲染树是异步的，谁先构建好就先显示谁，我们只需要将center部分往前放置即可让中间部分优先显示，圣杯布局和双飞翼的中间部分优先显示就是用的这个思想

圣杯布局主要问题体现在：

当center部分小于left时，或者是手动调节页面的宽度，在达到某个临界值之后，接着缩小，就会发现圣杯的结构彻底混乱了，center自己单独占了一行，两侧不再是left和right，而是空白，left跑到了center的下一行的最左边，并且自己单独占了一行，right跑到了left的下一行

优点：结构比较简单，没有多余的dom层

双飞翼布局的问题：

由于对center部分添加了一个中间父元素，多了一个dom结构层，就会增加渲染树的生成计算量

优点：通用型比较强

绝对定位的缺点：

当给left和right一个高于center的高度时，会发现center下面变成了一块凹陷，并不能带动中间整个结构变高

优点：结构简单，还不需要清理浮动

编辑于 2021-10-19 19:16:20 回复(0)

LUNU

table布局

flex布局

float布局

响应式布局@media

多栏布局 column-width column-count

grid布局

column-width

发表于 2020-10-09 13:37:19 回复(0)

提交观点

问题信息

上传者：小小

难度：

2条回答 112收藏 644浏览

扫一扫，把题目装进口袋