CSS布局系列一：标准、浮动、定位

最新推荐文章于 2023-01-26 18:59:33 发布

betty_grant

最新推荐文章于 2023-01-26 18:59:33 发布

阅读量894

点赞数

分类专栏： CSS 文章标签： css html

本文链接：https://blog.csdn.net/baidu_38798835/article/details/121846756

版权

4 篇文章 1 订阅

订阅专栏

标准

display

block：表示元素占据全部可用宽度的元素，并且在其前后都会换行，常见标签有div、h、p
inline：表示元素在一行中水平布置，可以使用水平内边距、边框和外边距。但是，垂直内边距、边框和外边距不影响行内框的高度。行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。
inline-block：介于block和inline之间，在inline的基础上可以设置垂直内边距、边框和外边距。

设置浮动

float

注意事项

设置浮动和高度后，元素会在包含块中生成脱离标准文档的浮动流。

不要轻易用float，除了图文混排或者右浮动等情况。

清除浮动

clear

主要使用both进行浮动清除

.clearFix::after,
.clearFix::before {
    content:’’;
    line-height:0; //IE 
    display:block;
    clear:both;
}

Position

static：默认值。
relative：元素偏移原位置一定的距离。元素仍保持其定位前的形状，它原本所占的空间仍保留。相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
absolute：元素从原文档流完全删除，相对于其包含块（最近已定位的元素）定位。元素原先在正常文档流中所占的空间会关闭，元素定位后生成一个块级框。
fixed：元素框从原文档流完全删除，并相对视窗中定位。
sticky：粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

特定阈值属性

z-index属性

关注