css 中级教程

1、display 属性规定是否/如何显示元素。
    每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline
    属性值：block块/显示  inline行  none隐藏
    块级元素：
    
    块级元素总是从新行开始，并占据可用的全部宽度（尽可能向左和向右伸展）
        <div>
        <h1> - <h6>
        <p>
        <li>
        <form>
        <header>
        <footer>
        <section>
    
    行内元素：
    
    内联元素不从新行开始，仅占用所需的宽度。
        <span>
        <a>
        <img>

    隐藏元素：
    display：none（不显示元素，且不会占用空间）
    visibility:hidden(不显示元素，会占用空间)
    
2、position属性：
        fixed 固定定位  意味着即使滚动页面
        static 静态（默认）
        absolute 绝对定位 对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed
        relative 相对定位-->相对于元素正常位置定位
        sticky黏性定位

    z-index重叠元素：指定元素的堆栈顺序（哪个元素应放置在其他元素的前面或后面）
    
3、css Overflow溢出
    属性：
        visible - 默认。溢出没有被剪裁。内容在元素框外渲染
        hidden - 溢出被剪裁，其余内容将不可见
        scroll - 溢出被剪裁，同时添加滚动条以查看其余内容
        auto - 与 scroll 类似，但仅在必要时添加滚动条

4、css布局--浮动和布局
    float：浮动（left、right，inherit）
    clear 属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧
        none - 允许两侧都有浮动元素。默认值
        left - 左侧不允许浮动元素
        right- 右侧不允许浮动元素
        both - 左侧或右侧均不允许浮动元素
        inherit - 元素继承其父级的 clear 值
        
    在清除浮动时，应该对清除与浮动进行匹配：如果某个元素浮动到左侧，则应清除左侧。
    您的浮动元素会继续浮动，但是被清除的元素将显示在其下方
    如果一个元素比包含它的元素大，又有浮动时，使用overflow来解决,自动添加移动栏
```
.clearfix {
  overflow: auto;
}
```
推荐使用
```
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

```
    清除浮动的六种方式：????
        
        
    清除默认img浮动
```        img
          {
          float:left;
          clear:both;
          }
```        

    选择器    描述
    [attribute]    用于选取带有指定属性的元素。
    [attribute=value]    用于选取带有指定属性和值的元素。
    [attribute~=value]    用于选取属性值中包含指定词汇的元素。
    [attribute|=value]    用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
    [attribute^=value]    匹配属性值以指定值开头的每个元素。
    [attribute$=value]    匹配属性值以指定值结尾的每个元素。
    [attribute*=value]    匹配属性值中包含指定值的每个元素。

5、inline、block和inline-block之间的区别：
    inline：在一行显示，且不能改变其大小
    block：单独的一行显示，大小可以改变
    inline-block：在一行显示，但是可以改变大小

6、常见垂直居中对齐
    元素水平方向居中：margin:auto；
    居中对齐文本：text-algin：center
    居中对齐图像：设置左右两边为auto，并且设置display为block
    左右对齐：使用position 或者使用float
    水平垂直对齐：
            padding text-algin：center 可以实现文本垂直居中对齐
            或使用line-height：父级高度
            使用position：relative 和transform：translate(-50%,-50%)
            使用flexbox弹性盒子：justify-content：center 和 align-items：center
```
display:flex
justify-content:center
```
            
7、css 组合器
|选择器                |示例    |示例描述                                    |
|element element    |div p    |选择 <div> 元素内的所有 <p> 元素。            |
|element>element    |div > p|选择其父元素是 <div> 元素的所有 <p> 元素。    |
|element+element    |div + p|选择所有紧随 <div> 元素之后的 <p> 元素。    |
|element1~element2    |p ~ ul    |选择前面有 <p> 元素的每个 <ul> 元素。        |

8、css 伪类
    伪类用于定义元素的特殊状态
p:first-child:匹配第一个p标签   p li:first-child:匹配p标签下的第一个li

|:active    |a:active        |选择活动的链接,点击前|
|:visited    |a:visited        |点击后|
|:link    |a:link        |未点击|
|:checked    |input:checked    |选择每个被选中的 <input> 元素。|
|:disabled    |input:disabled    |选择每个被禁用的 <input> 元素。|
|:empty    |p:empty        |选择没有子元素的每个 <p> 元素。|
|:enabled    |input:enabled    |选择每个已启用的 <input> 元素。|
|:first-child    |p:first-child    |选择作为其父的首个子元素的每个 <p> 元素。|
|:first-of-type    |p:first-of-type|选择作为其父的首个 <p> 元素的每个 <p> 元素。|
|:focus    |input:focus    |选择获得焦点的 <input> 元素。|
|:hover    |a:hover        |选择鼠标悬停其上的链接。|
|:in-range        |input:in-ran    |

所有 CSS 伪元素
选择器    例子    例子描述
::after    p::after    在每个 <p> 元素之后插入内容。
::before    p::before    在每个 <p> 元素之前插入内容。
::first-letter    p::first-letter    选择每个 <p> 元素的首字母。
::first-line    p::first-line    选择每个 <p> 元素的首行。
::selection    p::selection    选择用户选择的元素部分。

9、opcity透明度
    0-1：值越低越透明
    使用opcity时其子元素也同样继承了透明度，可能影响文本阅读
    可以选择使用rgba(red,green,blue,alpha)
    
10、导航栏
    把a标签设置dispaly为block，可实现单机区域内实现链接,默认情况下block会占用一整行空间，所以给定宽度