CSS三大特性, 定位方式

CSS三大特性

1. 继承性:元素可以继承上级元素文本和字体相关的样式,部分标签自带效果不受继承影响,比如:超链接的字体颜色
2. 层叠性: 多个样式可以作用在同一个元素之上层叠显示, 多个选择器可能选择到同一个元素,如果作用的样式不同则全部生效,如果作用的样式相同 则由优先级决定.
3. 优先级: 指选择器的优先级, 作用范围越小优先级越高,继承属于间接选中元素所以优先级最低 !important>id>class>标签名>继承

定位方式

• 相对定位
• 绝对定位
• 静态定位
• 固定定位
• 浮动定位

静态定位(文档流定位)

• 默认的定位方式
• 格式: position:static
• 特点: 元素以左上为基准, 块级元素从上往下依次排列,行内元素从左向右依次排列, 默认情况下无法实现元素层叠效果

相对定位

• 格式: position:relative;
• 特点: 元素不脱离文档流(不管元素显示到什么位置,都占着原来的位置) ,通过left/right/top/bottom 相对于元素初始位置做偏移
• 应用场景: 当需要对页面中某一个元素位置进行微调时使用

绝对定位

• 格式:position:absolute;
• 特点: 元素脱离文档流(不占原来的位置), 通过left/right/top/bottom 相对于窗口(默认)或某一个上级元素做位置偏移(如果相对于某个上级元素做偏移需要将上级元素设置为相对定位)
• 应用场景: 当需要往网页面中添加一个元素并且需要实现层叠效果,这个元素又不能影响其它元素的位置的时候

固定定位

• 格式: position:fixed;
• 特点: 元素脱离文档流,通过left/right/top/bottom相对于窗口做位置偏移
• 应用场景: 当需要将某个元素固定在窗口的某个位置时使用.

浮动定位

• 格式: float:left/right
• 特点: 元素脱离文档流, 从当前行向左或向右浮动, 当撞到上级元素的边缘或其它浮动元素时停止.
• 应用场景: 当需要将纵向排列的元素改成横向排列时使用浮动定位
• 一行装不下时会自动换行, 换行时有可能被卡主
• 当元素的所有子元素全部浮动时,自动识别的高度为0, 后面的元素会顶上来导致显示异常, 给元素添加overflow:hidden 解决此问题

溢出设置overflow

• visible 显示(默认值)
• hidden 隐藏
• scroll 滚动显示

行内元素垂直对齐方式vertical-align

• baseline 基线对齐(默认)

• top 上对齐

• middle中间对齐

• bottom下对齐

显示层级

• 当多个元素出现层叠显示的时候, 可以通过z-index控制元素的显示层级, 值越大显示越靠前