前端学习:css的继承和权重特性和display元素和4种隐藏属性和overflow属性

css的继承

css的代码截图

 

 

 

css的继承性效果图

 

 

 

 

 

css的继承性分析

如果一个 属性具备继承性 , 那么 在该元素上设置后 , 它的 后代元素都可以继承这个属性

当然 , 如果 后代元素自己有设置该属性 , 那么 优先使用后代元素自己的属性 不管继承过来的属性权重多高

那么怎么知道一个属性有没有继承性呢

1.常见的 font size/font family/font weight/line height/color/text align 都具有继承性

2.另外要多学会查阅mdn文档 , 文档中每个属性都有标明其继承性的

css的拥有继承性的元素

 

 

 

 

css的特性--层叠性

css的层叠性--代码截图

 

 

 

 

 

 

css的层叠性--效果图

 

 

 

 

 

 

css的层叠性--效果分析

CSS 的翻译是层叠样式表 , 什么是 层叠 呢
　　对于一个元素来说 , 相同一个属性 我们可以 通过不同的选择器给它进行多次设置

　　那么属性会 被一层层覆盖上去

　　但是最终 只有一个会生效

那么多个样式属性覆盖上去 , 哪一个会生效呢

　　判断一 : 选择器的权重 , 权重大的生效 , 根据权重可以判断出优先级

　　判断二 : 先后顺序 , 权重相同时 , 后面设置的生效
那么如何知道元素的权重呢

 

 

display属性

CSS 中有个 display 属性，能修改元素的显示类型，有 4 个常用值

　　block ：让元素显示为块级元素

　　inline ：让元素显示为行内级元素

　　inline block ：让元素同时具备行内级、块级元素的特征（也就是和别的元素在一行，也可以有宽度和高度）

　　none ：隐藏元素

block 元素
　　独占父元素的一行
　　可以随意设置宽高
　　高度默认由内容决定

inline block

　　元素跟其他行内级元素在同一行显示

　　可以随意设置宽高

inline:

　　跟其他行内级元素在同一行显示
　　不可以随意设置宽高
　　宽高都由内容决定

 

 

 

4种隐藏属性

方法一 : display 设置为 none
　　元素不显示出来 , 并且也不占据位置 , 不占据任何空间 和不存在一样，也就是在界面里不会占有任务位置--None
方法二 : visibility 设置为 hidden
　　设置为 hidden, 虽然元素不可见 , 但是 会占据元素应该占据的空间（也就是会在界面里占有隐藏前的位置，只是给隐藏了。）
　　默认为 visible, 元素是可见的
方法三 : rgba 设置颜色 , 将 a 的值设置为 0
　　rgba 的 a 设置的是 alpha 值 , 可以设置透明度 , 不影响子元素（rgba对应可以设置（255，255，255，0.5）最后一个a可以设置为0-1之间的任何小数，0代表隐藏，1代表展示，0.几就对应半透明之间的状态，并且rgba只会改变设置rgba这个元素的透明度。这个元素如果有子元素则正常展示）
方法四 : opacity 设置透明度 , 设置为 0
　　设置整个元素的透明度 , 会影响所有的子元素

overflow属性

overflow 用于控制内容溢出时的行为
　　visible ：溢出的内容照样可见（举例假如div元素设置宽度和高度过小，而里面的文字又过多，---文字正常展示）
　　hidden ：溢出的内容直接裁剪（举例假如div元素设置宽度和高度过小，而里面的文字又过多，---溢出文字裁剪保留div大小）
　　scroll ：溢出的内容被裁剪，但可以通过滚动机制查看　　　　
　　　　　　会一直显示滚动条区域，滚动条区域占用的空间属于 width 、 height（不论文字内容多少，滚动条一直存在）
　　auto ：自动根据内容是否溢出来决定是否提供滚动机制（文字没有溢出，滚动条则不展示，文字溢出，滚动条展示）