前端基础- CSS样式-网页布局


前言

本文重点对网页布局部分的内容进行总结


网页布局

由盒子模型可知,大部分的html标签是一个盒子,通过CSS浮动、定位可以让每个盒子排列成为网页。
一个完整的网页,是由标准流、浮动、定位一起完成布局,每个都有专门的用途。

1.标准流

可以让盒子上下排列或者左右排列,垂直的块级盒子显示使用标准流布局。
使用场景:从上到下排列由多个块级盒子。

2. 浮动

可以使多个块级元素一行显示或者左右对齐盒子,多个块级盒子水平显示使用浮动布局。
使用场景:一行内显示排列多个盒子。
学习内容: 浮动特性、如何清除浮动

3. 定位

定位最大的特点是具有层叠的概念,可以让多个盒子前后叠压显示。如果元素自由在某个盒子内移动就可以使用定位布局。
使用场景:在盒子上方重叠显示其他子盒子,或者元素在浏览器内位置随鼠标滚动始终保持不变。
学习内容:四种定位模式、定位叠放顺序

猜你喜欢

转载自blog.csdn.net/hjw15910531612/article/details/125848286