CSS布局知识汇总

最新推荐文章于 2024-08-09 16:30:00 发布

Cindy_Huang

最新推荐文章于 2024-08-09 16:30:00 发布

阅读量505

点赞数 1

分类专栏： HTML+CSS

本文链接：https://blog.csdn.net/Cindy_Huang/article/details/81476466

版权

本文详细总结了CSS布局技术，包括正常文档流、浮动、清除浮动、块级格式化上下文（BFC）、定位（相对定位、绝对定位、固定定位、sticky定位）、弹性布局（Flex布局）和网格布局。深入讲解了各种布局的特点和应用场景，是前端开发者巩固布局知识的重要参考资料。

摘要由CSDN通过智能技术生成

CSS布局知识汇总：

CSS布局是前端开发的基础，以下是对布局知识的系统学习和汇总。

1. 正常文档流（Normal Flow）

在正常的文档流中，写作模式是水平方向，正常流会垂直地一个接一个排列页面的块级元素；若写作模式是垂直方向，正常流会将块级元素水平排列。

1. 正常文档流的用处

在定义的CSS加载失败，或者是浏览器不支持新特性，在正常文档流的支撑下，页面会保持可阅读的状态下。

1. 脱离正常文档流

脱离正常文档流，不按照正常文档流的结构显示。

2. 浮动

脱离文档流的例子，为元素设置float属性，值有left、right,默认值为none。

当设置了某个元素浮动，文字会环绕浮动元素。如果要设置浮动元素与环绕文字之间的距离，需要设置浮动元素的margin属性值。

body{

padding: 20px;

font: 1em Helvetica Neue,Helvetica,Arial,sans-serif;

}

margin:0 0 1em 0;

}

.p1{

background-color: red

}

.container{

width:500px;

border: 5px solid rgb(111,41,97);

border-radius: .5em;

padding: 10px;

}

.item{

width: 100px;

height: 100px;

float:left;

margin: 20px 20px 20px 20px;

background-color: blue

}

</style>

</head>

<body>

<p class="p1">Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut jícama green bean celtuce. </p>

<p>Grape silver beet collard greens avocado quandong fennel gumbo black-eyed pea watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach.</p>

</div>

</body>

2.清除浮动

对元素使用了浮动，接下来的元素会环绕它，直到元素开始应用正常文档流。避免这种情况，则需要清除浮动，添加clear属性即可。