css继承|权重

一、继承（inherited）

1、css属性继承

CSS的某些属性具有继承性(Inherited): 继承优先级很低
- 如果一个属性具备继承性, 那么在该元素上设置后, 它的后代元素都可以继承这个属性;
- 当然, 如果后代元素自己有设置该属性, 那么优先使用后代元素自己的属性(不管继承过来的属性权重多高);
如何知道一个属性是否具有继承性呢?
- 常见的font-size/font-family/font-weight/line-height/color/text-align都具有继承性;
- 这些不用刻意去记, 用的多自然就记住了;
- 另外要多学会查阅文档, 文档中每个属性都有标明其继承性的
- mdn文档
注意：继承过来的是计算值, 而不是设置值

父级设置了：font-size: 2em;

子级继承的是2em计算之后的值，否则就是2em的2em

2、常见继承的属性（了解）

常见继承属性	—
color	list-style
cursor	text-align
font-famity	text-indent
font-size	text-transform
font-style	visibility
font-variant	white-space
font-weight	word-break
font	work-spacing
letter-spacing	word-wrap
line-height	opacity

3、强制继承

  <style>
    .container{
      border: 1px solid red;
      width: 200px;
      height: 200px;
    }
    .box{
        /*强制继承父级的border的样式*/
      border: inherit;
      width: 100px;
      height: 100px;
    }
  </style>
<body>
  <div class="container">
    <div class="box">
    </div>
  </div>

</body>

二、css属性的层叠

1、css的翻译是层叠样式标，什么是层叠

对于一个元素来说, 相同一个属性我们可以通过不同的选择器给它进行多次设置;
那么属性会被一层层覆盖上去;
但是最终只有一个会生效;

2、css的层叠之后显示的优先级

判断一: 选择器的权重, 权重大的生效, 根据权重可以判断出优先级;
判断二: 先后顺序, 权重相同时, 后面设置的生效;

3、选择器的权重

!important: 10000
内联样式表：1000
id选择器：100
类选择器，属性选择器，伪类：10
标签元素选择器，伪元素：1
通配选择器：0

选择器	权重
h1	1
h1+ p[href*=“en”]> .inline-warning	22
h1+p::frist-letter	3
#idenfier	100
内联样式	1000

三、Html元素的类型

1、元素类型-块级元素和行内元素的区别

块级元素：div，p，h1,
- 独占父元素的一行
- 高度默认是内容的高度
- 可以设置宽高 height(默认值)：auto
行内块级元素(没有这个说法): 行内块级元素可以和行内元素在同一行内显示也可以随意设置宽高
行内替换元素：行内替换元素：input，img

特殊的行内元素可以设置宽高，m，p
行内元素: span, img ,a
- 多个行内级元素可以在父元素的同一行中显示
- 设置宽高无效
- 宽高都由内容决定
- 设置padding / border 会被撑起来但是
  1. 行内元素 + border：上下不占据空间，但是下边框会有颜色，一般不会这样设置, 左右的话会有效果，但是会有
  2. 行内元素加 padding：上下不占据空间, 左右的话会有效果
- 行内元素上下外margin无效，设置左右边距有效
**行内元素设置margin：**行内元素设置两边 margin的时候 不会破坏文档流布局，当margin和内容在同一行，margin 过大，会导致文本被挤到下一行, 也就是相当于在文档流里设置了和其他行内元素的间距

2、CSS属性 - display（展示类型）

block：让元素显示为块级元素
inline：让元素显示为行内级元素
inline-block：让元素同时具备行内级、块级元素的特征
none：隐藏元素

还有其他的属性值：flex 还没讲到

3、编写HTML规则注意事项

行内元素只能包含行内元素
p，h1元素不要包含其他块级元素，不然不符合html规则，会出现元素结构错误

4、元素的隐藏方式（4种）

方法一: display设置为none
- 元素不显示出来, 并且也不占据位置, 不占据任何空间(和不存在一样
方法二: visibility设置为hidden
- 设置为hidden, 虽然元素不可见, 但是会占据元素应该占据的空间;
- 默认为visible, 元素是可见的;
方法三: rgba设置颜色, 将a的值设置为0
- rgba的a设置的是alpha值, 可以设置透明度, 不影响子元素
- 背景色默认是transparent就是rgb(0,0,0,0)
方法四: opacity设置透明度, 设置为0
- 设置整个元素的透明度, 会影响所有的子元素;

5、CSS属性 - overflow

overflow作用：overflow用于控制内容溢出时的行为,当margin出现上下传递得时候会设置overflow：auto会触发bfc出现阻断可以防止margin传递
visible：溢出的内容照样可见
hidden：溢出的内容直接裁剪
scroll：溢出的内容被裁剪，但可以通过滚动机制查看
- 会一直显示滚动条区域，滚动条区域占用的空间属于width、height
auto：自动根据内容是否溢出来决定是否提供滚动机制

6、CSS样式不生效技巧（4种）

为何有时候编写的CSS属性不好使，有可能是因为

没选中问题：选择器没选中对应的元素
优先级问题
覆盖问题：被同类型的CSS属性覆盖，比如font覆盖font-size
CSS属性的使用形式不对
- 元素不支持此CSS属性，比如span默认是不支持width和height的
- 浏览器不支持此CSS属性，比如旧版本的浏览器不支持一些css module3的某些属性
建议
- 充分利用浏览器的开发者工具进行调试（增加、修改样式）、查错

总结：就是权重、覆盖、浏览器不支持某些属性/元素不支持某些属性、选择器写错

4、边框-（border）

4.1、边框相对于content/padding/margin来说特殊一些:

边框具备宽度width;
边框具备样式style;
边框具备颜色color
最小设置1px 有些浏览器不支持小数

4.2、边框css属性

颜色的默认值：black
边框宽度 border-top-width、border-right-width、border-bottom-width、border-left-width border-width是上面4个属性的简写属性
边框颜色 border-top-color、border-right-color、border-bottom-color、border-left-color border-color是上面4个属性的简写属性
边框样式 border-top-style、border-right-style、border-bottom-style、border-left-style border-style是上面4个属性的简写属性
简写属性都是上、右、下、左

4.3、boder 同时设置的方式

border-top border-right border-bottom border-left border：solid 1px red统一设置4个方向的边框

属性值没有先后顺序

4.4、边框样式设置值

groove：凹槽, 沟槽, 边框看上去好象是雕刻在画布之内 ridge：山脊, 和grove相反，边框看上去好象是从画布中凸出来

常用·
- solid：实线
- dashed：虚线
- dotted：点线
- double：双实线

5、圆角-boder-radius

将这四个属性 border-top-left-radius、border-top-right-radius、border-bottom-right-radius，和 border-bottom- left-radius 简写为一个属性。

border-raduis
数值: 通常用来设置小的圆角, 比如6px;
四个角都会设置值
百分比: 通常用来设置一定的弧度或者圆形;
百分比会根据4个边不同的长度来设置对应的圆角，长方形的话长边的话百分比弧度会小一点
◼ 如果一个元素是正方形, 设置border-radius大于或等于50%时，就会变成一个圆.