10分钟了解页面布局
2024-12-09 11:13:16

太久没看过了,这里回顾一下页面的基础还原方法,有点累。

正文

盒子模型这种传统的东西就不提了,这里直接提几种布局模式。

block,inline与inline-block

  • 行内标签
1
2
3
4
5
1,行内标签无法设置宽高

2,行内标签不会独占一行,会连续占满一行,直到换行

3,行内元素不能包含块级元素,只能容纳文本或者其他行内元素
  • 块状元素
1
2
3
4
5
6
7
1,块状标签可以设置宽高度

2,块元素独占一行

3,块属性标签的宽度假如不做设置,会直接默认为父元素宽度的100%

4,块级元素可以包含行内元素和块级元素,还可以容纳内联元素和其他元素
  • 行内块元素
1
1,结合的行内和块级的优点:能够设置宽高,并且在一行内独立显示

float

1
2
1. 如果父元素不设置高度,会引起父元素塌陷 
2. 元素浮动,引起同行兄弟元素占位,导致页面错乱

常用的元素塌陷处理方式

  1. 直接给父元素设置高度
  2. 使用clear:both清空浮动(如果不清楚这个属性是干什么的,可以去W3C官网看看,很容易理解的)
  3. 给父元素加overflow:hidden
  4. 给父元素添加浮动,父子元素一起浮动,就没问题了;

position

默认定位(static),不会让div或者其他元素脱离文档流,而是遵循排版的原则,从上到下,块级元素换行,行内元素不换行等等通用原则。所以,如果不用定位属性,那么这个position就不用设置。

相对定位(relative),相对于元素原本的位置进行位移,原本的位置不为空,仍然已经位移的该元素继续占用

绝对定位(absolute),相对于元素的父元素最左上角进行坐标定位,会脱离文档流,产生类似浮动的效果

固定定位(fixed),相对于当前窗口最左上角进行坐标定位

粘性定位(sticky), 基于用户的滚动位置来定位,在 position:relativeposition:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 **position:fixed;**,它会固定在目标位置,常常用来做页面的顶部标签。

这里要注意以下两点:

  1. 定位是相对于父元素进行定位的,如果父元素没有设置定位属性,则相对于BODY标签进行定位。
  2. 如果父元素没有设置定位的话,那么,绝对定位是相对于body标签进行定位的。
  3. 如果父元素设置了相对定位,绝对定位,固定定位,任意一种,那么,绝对定位相对于父元素左上角进行定位。

flex

移动端常用的解决方式,懒得写。

参考:一文吃透 CSS Flex 布局 - 掘金 (juejin.cn)

grid

参考:最强大的 CSS 布局 —— Grid 布局 - 掘金 (juejin.cn)

结语

说实话,不是很想写这篇,但是我自己回忆这些内容的时候,发现太过熟悉以至于卡壳了。

不得已,写了这篇内容回忆一下以前熟的发昏的内容。

参考链接

切图仔基础篇————块级元素与行级元素

切图仔基础篇————如何熟练的使用定位

切图仔基础篇————浮动问题浅析

菜鸟驿站,css定位