总结布局方法（position、transform、float、grid、flex）

最新推荐文章于 2023-06-30 18:20:54 发布

willwe

最新推荐文章于 2023-06-30 18:20:54 发布

阅读量452

点赞数

文章标签： html5 javascript css css3

本文链接：https://blog.csdn.net/willwe/article/details/118691876

版权

总结布局方法（position、transform、float、grid、flex）

Position 布局有以下几个属性值:realtive、absolute、fixed、static。
static：无特殊定位，对象遵循正常文档流，默认取该值。top，right，bottom，left等属性不会被应用。
relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
absolute：对象脱离正常文档流，某元素将定位在框架或浏览器窗口本身或其包含块的左上角的绝对位置，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以浏览器窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。
Transform ：https://www.w3cplus.com/content/css3-transform
使用transform进行偏移旋转等配合其它布局
Float ：脱离文档流但是不脱离文本流
对兄弟元素的影响
.上面贴非float元素（一般float元素上面贴的都是非float元素）
.旁边贴float元素（靠左，或者靠右的时候贴float元素）
.不影响其它块级元素位置
.影响其它块级元素内部文本（三四两点就是特性一说的脱离文档流，不脱离文本流）

对父级元素的影响
.从布局上“消失”（相当于从父级的空间里面消失了，消失了意味着父级不会再管他的宽高）
.高度塌陷（因为在父级的空间里消失了，所以父级的高度有可能会塌陷，防止父级的高度塌陷的办法就是设置父级属性：overflow）
高度塌陷问题
.

clearfix::before,
  .clearfix::after {
    content: "";
    display: table;
    clear: both;
  }

关注