10分钟了解页面布局
2024-12-09 11:13:16
太久没看过了,这里回顾一下页面的基础还原方法,有点累。
正文
盒子模型这种传统的东西就不提了,这里直接提几种布局模式。
block,inline与inline-block
- 行内标签
1 | 1,行内标签无法设置宽高 |
- 块状元素
1 | 1,块状标签可以设置宽高度 |
- 行内块元素
1 | 1,结合的行内和块级的优点:能够设置宽高,并且在一行内独立显示 |
float
1 | 1. 如果父元素不设置高度,会引起父元素塌陷 |
常用的元素塌陷处理方式
- 直接给父元素设置高度
- 使用clear:both清空浮动(如果不清楚这个属性是干什么的,可以去W3C官网看看,很容易理解的)
- 给父元素加overflow:hidden
- 给父元素添加浮动,父子元素一起浮动,就没问题了;
position
默认定位(static),不会让div或者其他元素脱离文档流,而是遵循排版的原则,从上到下,块级元素换行,行内元素不换行等等通用原则。所以,如果不用定位属性,那么这个position就不用设置。
相对定位(relative),相对于元素原本的位置进行位移,原本的位置不为空,仍然已经位移的该元素继续占用
绝对定位(absolute),相对于元素的父元素最左上角进行坐标定位,会脱离文档流,产生类似浮动的效果
固定定位(fixed),相对于当前窗口最左上角进行坐标定位
粘性定位(sticky), 基于用户的滚动位置来定位,在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 **position:fixed;**,它会固定在目标位置,常常用来做页面的顶部标签。
这里要注意以下两点:
- 定位是相对于父元素进行定位的,如果父元素没有设置定位属性,则相对于BODY标签进行定位。
- 如果父元素没有设置定位的话,那么,绝对定位是相对于body标签进行定位的。
- 如果父元素设置了相对定位,绝对定位,固定定位,任意一种,那么,绝对定位相对于父元素左上角进行定位。
flex
移动端常用的解决方式,懒得写。
参考:一文吃透 CSS Flex 布局 - 掘金 (juejin.cn)
grid
参考:最强大的 CSS 布局 —— Grid 布局 - 掘金 (juejin.cn)
结语
说实话,不是很想写这篇,但是我自己回忆这些内容的时候,发现太过熟悉以至于卡壳了。
不得已,写了这篇内容回忆一下以前熟的发昏的内容。