26-CSS定位
定位+特性
定位方式
文档流定位(静态定位)
默认的定位方式,显示的元素从上到下,从左向右排列,通过外边距控制位置
格式: position:static
相对定位
元素不脱离文档流,通过top/left/right/bottom控制元素位置的偏移,偏移值相对于元素的初始位置
应用场景:当元素需要从当前位置做位置偏移时,仍然占着原来的位置
绝对定位
元素脱离文档流,通过top/left/right/bottom控制元素位置的偏移,偏移值相对于窗口或做了相对定位的祖先元素
应用场景:当元素需要做位置偏移,不需要保留原来位置时使用绝对定位
固定定位
脱离文档流,通过top/left/right/bottom控制元素位置的偏移,偏移值相对于窗口。
应用场景,当某个元素需要固定在窗口的某个位置的时候使用固定定位
浮动定位
- 脱离文档流,元素从当前所在行向左或向右浮动,当撞到上级元素边缘或同级其它浮动元素时停止
- 如果一行显示不下,会自动折行,如果折行时上面的一行有凸出的部分有可能会被卡住
- 如果元素的所有子元素全部浮动,则自动识别的高度为0,通过给元素添加overflow:hidden;
- 如果元素浮动则会脱离文档流后面的元素会顶上来,可以通过给后面元素添加clear属性让后面的元素左右两侧不允许有浮动,这样后面的元素就不会再顶上来。
- 应用场景:当纵向排列的元素需要改成横向时 使用浮动定位
行内元素垂直对齐方式
/* vertical垂直 对齐方式 默认基线对齐baseline
top上对齐 bottom下对齐 middle中间对齐 */
/* vertical-align: middle; */
/* 如果有需求对页面中的某一个元素做位置偏移
需立即想到相对定位 */
/* position: relative;
top: 10px; */
CSS的三大特性
继承性
子元素可以继承祖先元素中的部分属性,只能继承color/font-开头/text-开头/line-开头的属性 ,某些特定元素自带显示效果不受继承影响 比如:超链接a,h1-h6字体大小不受继承影响
层叠性
通过不同的选择器可以选择到同一个元素,如果作用的属性不同则全部生效,如果设置的是相同的样式则根据优先级决定
优先级
作用范围越小优先级越高,直接选中优先级高于间接选中(继承)
id>class>标签名>继承