[TOC]
css 继承(inherited)
一般和文本，字体相关的都可以继承 继承 为计算值而不是设置值 例子：em
强制继承
某些属性不具备继承性 可以在子元素中设置 inherit 来强制继承父元素的属性
css 层叠性
对于一个元素来说, 相同一个属性我们可以通过不同的选择器给它进行多次设置; 那么属性会被一层层覆盖上去; 但是最终只有一个会生效;
选择器优先级
- !imporent 权值 10000
- 内联样式 权值 01000
- id 选择器 权值 00100
- 类选择器、属性选择器、伪类 权值 00010
- 元素选择器、伪元素 权值 00001
- 通配符选择器 权值 00000
html 元素的类型
- 块级元素
独占父元素的一行 div p h1-h6
- 行内元素
多个行内级元素可以在父元素的同一行中显示 span a img i strong
display 修改元素特性
- block 让元素显示为块级元素
- inline：让元素显示为行内级元素
- inline-block：让元素同时具备行内级、块级元素的特征
- none 隐藏元素
display 值的特性
- block 元素
- 独占父元素的一行
- 可以随意设置宽高
- 高度默认由内容决定
- inline-block 元素
- 跟其他行内级元素在同一行显示
- 可以随意设置宽高
- 对外来说，它是一个行内级元素
- 对内来说，它是一个块级元素
- inline:
- 跟其他行内级元素在同一行显示;
- 不可以随意设置宽高;
- 宽高都由内容决定;
可替换元素
- iframe
- video
- embed
- img
编写 html 元素的注意事项
- 块级元素、inline-block 元素
- 一般情况下，可以包含其他任何元素（比如块级元素、行内级元素、inline-block 元素）
- 特殊情况，p 元素不能包含其他块级元素
- 行内级元素（比如 a、span、strong 等）
- 一般情况下，只能包含行内级元素
元素隐藏方法
-
方法一: display 设置为 none
元素不显示出来, 并且也不占据位置, 不占据任何空间(和不存在一样); 点击事件无效
-
方法二: visibility 设置为 hidden
设置为 hidden, 虽然元素不可见, 但是会占据元素应该占据的空间; 默认为 visible, 元素是可见的; 点击事件无效
-
方法三: rgba 设置颜色, 将 a 的值设置为 0
rgba 的 a 设置的是 alpha 值, 可以设置透明度, 不影响子元素 点击事件可以生效
-
方法四: opacity 设置透明度, 设置为 0
设置整个元素的透明度, 会影响所有的子元素; 点击事件可以生效
overflow
overflow 用于控制内容溢出时的行为
- visible：溢出的内容照样可见
- hidden：溢出的内容直接裁剪
- scroll：溢出的内容被裁剪，但可以通过滚动机制查看 会一直显示滚动条区域，滚动条区域占用的空间属于 width、height
- auto：自动根据内容是否溢出来决定是否提供滚动机制
