CSS三大特性

CSS三大特性

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

居中相关

• 元素自身居中:
  • 块级元素: 通过外边距 margin:0 auto;
  • 行内或行内块元素: 在上级元素中添加text-align:center;
• 元素内容居中: 只能通过text-align:center;

定位

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

静态定位

• position:static;

• 默认的定位方式,又称为文档流定位

• 特点: 块级元素从上往下一次排列, 行内元素从左向右依次排列,通过外边距控制元素的位置.

• 默认情况下无法实现元素层叠效果

相对定位

• position:relative;
• 特点: 元素不脱离文档流(不管元素显示到什么位置,仍然占着原来的位置,后面的元素不会顶上来),元素通过left/right/top/bottom样式 相对于初始位置做偏移.
• 应用场景: 当元素需要层叠显示时, 静态定位是无法实现的, 通过相对于定位可以实现层叠, 当需要对某一个元素的显示位置进行微调时使用.

绝对定位

• position:absolute;
• 特点: 元素脱离文档流(不占原来的位置, 后面的元素会顶上来), 通过left/right/top/bottom相对于窗口(默认)或某一个上级元素做偏移.
• 应用场景: 当需要层叠显示,并且需要让元素相对于某个上级元素做位置偏移时使用

绝对定位练习提示:
div 宽300   背景颜色 黑色透明度0.3 内边距10
文本框: 去掉边框 border:0;   内边距上下10左右20
图片使用绝对定位,以div做参照物
p 字体大小12 红色

固定定位

• position:fixed;

• 特点: 元素脱离文档流, 通过left/right/top/bottom相对于窗口做位置偏移.

• 应用场景: 当需要将元素固定在窗口的某个位置时使用

浮动定位

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