W3C标准:
结构:HTML描述页面的结构
表现:CSS控制页面中元素的样式
行为:JavaScript相应用户操作
相关笔记:
HTML基础
CSS基本语法
CSS基础-layout
CSS基础-float
定位
定位是一种更加高级的布局手段,通过定位可以将元素摆放到页面的任意位置
- position属性 设置定位
可选值:
static 默认值,元素是静止的没有开启定位
relative 开启元素的相对定位
absolute 开启元素的绝对定位
fixed 开启元素的固定定位
sticky 开启元素的粘滞定位
相对定位
- 元素的position属性值设置为relative
- 相对定位的特点:
1、元素开启相对定位以后,如果不设置偏移量,元素不会发生任何变化
2、参照元素在文档流中的位置进行定位的(left:0;top:0看原点位置)
3、会提升元素的层级
4、不会使元素脱离文档流
5、不会改变元素的性质,块还是块,行内还是行内
偏移量:
-
当元素开启了定位以后,可以通过偏移量来设置元素的位置(注意:一定要开启后才能设置)
- top 定位元素和定位位置上边的距离
- bottom 定位元素和定位位置下边的距离
- left 定位元素和定位位置左侧的距离
- right 定位元素和定位位置右侧的距离 -
定位元素垂直方向的位置由top和bottom两个属性来控制(通常情况下只使用其中一个)
- top值越大,定位元素越向下移动
- bottom值越大,定位元素越向上移动 -
定位元素水平方向的位置由left和right两个属性来控制(通常情况下只使用其中一个)
- left值越大,定位元素越向右移动
- right值越大,定位元素越向左移动
绝对定位
- 元素的position属性值设置为absolute
- 绝对定位的特点:
1、如果不设置偏移量,元素位置不会发生变化
2、元素从文档流中脱离
3、会改变元素的性质,行内变成块,块的宽高被内容撑开
4、会使元素提升一个层级
5、相对于其包含块进行定位的
包含块(containing block)
-
正常情况下,包含块就是离当前元素最近的祖先块元素
-
绝对定位的包含块:
离他最近的开启了定位的祖先元素,如果所有的祖先元素都没有开启定位,则根元素就是它的包含块。 -
初始包含块:根元素 html
固定定位
- 元素的position属性设置为fixed
- 固定定位也是一种绝对定位,所以固定定位的大部分特点都和绝对定位一样,唯一不同的是固定定位永远参照浏览器的视口进行定位,固定定位的元素不会随网页的滚动条滚动。
粘滞定位
- 元素的position属性设置为sticky
- 粘滞定位和相对定位的特点基本一致,不同的是粘滞定位可以在元素到达某个位置时将其固定。
绝对定位元素的布局
水平布局:
left + margin-left + border-left + padding-left + width + padding-right+ border-right + margin-right + right = 包含块的内容区的宽度
- 开启了绝对定位后:水平方向的布局等式需要添加left和right两个值,此时规则和之前一样只是多添加了两个值。
当发生过度约束时:
- 如果9个值中没有auto,则自动调整right值以使等式满足
- 如果有auto,则自动调整auto的值以使等式满足
可设置auto的值:margin width left right
因为left和right的值默认是auto,所以如果不知道left和right,则等式不满足时,会自动调整这个值
垂直布局:
top + margin-top + border-top + padding-top + height + padding-bottom + border-bottom = 包含块的高度
元素的层级
开启了定位元素,可以通过z-index属性来指定元素的层级。
z-index需要一个整数作为参数,值越大元素的层级越高,元素的层级越高越优先显示。
如果元素的层级一样,则优先显示靠下的元素。
祖先元素的层级再高,也不会盖住后代元素。
学习视频、笔记参考:https://www.bilibili.com/video/BV1XJ411X7Ud