css visibility-display-overflow-background-opacity

悠悠 2022-06-02 08:26 148阅读 0赞

> 浏览器默认样式 < 外观文件样式 < 元素嵌入样式 < 行内嵌入样式

CSS学习方向：  
1. 如何选择元素(element,tag)? => 学习构建选择器(selector)  
2. 学习各种属性及其作用 => 学习各种样式属性信息  
3. 学习如何进行属性搭配，达到美观效果。 => 常见效果学习，色彩理论, 如何参考他人效果

*  visibility: iniherit ; collapse ; hidden; visible  
    根据字面意思：可见性。用来显示和隐藏元素。但是在空间仍然保留。
 *  display：none  
    元素不可见，空间不保留
 *  overflow：如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。  
    属性值：iniherit ; hidden（被隐藏） ； scroll（显示滚动条） ; auto（显示滚动条） ; visible(溢出来)

--------------------

*  span  
    *span的显示方式是inline方法，宽高是系统自动计算的，我们无法设置，设置了也没用*

--------------------

*  border：是有这三部分构成  
    border-width, border-color, border-style
 *  background-size: cover（覆盖整个div）; contain（最小的覆盖div） ； 100px 100px ； 50%；
 *  background-clip：背景填充区域设置使用  
    border-box；padding-box；content-box；

--------------------

*  *背景图片的优先级高于背景颜色*

--------------------

### \- background背景相关属性 ###

--------------------

*  background-color
 *  background-repeat
 *  background-position
 *  background-size
 *  background-origin:背景初始位置从哪里开始
 *  background-clip：背景覆盖在哪个box范围内
 *  background-attachment：背景是否是固定的 scroll fixed ，iniherit
 *  background-image
 *  iniherit

--------------------

*  opacity：0.0~1.0 透明度
 *  Z-index ：  
    z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。  
    *仅能在定位元素上奏效（例如 position:absolute;*
 *  anchor：锚的使用
 *  list-style-type:none 这个说明是无序列表前面的点点去掉

--------------------