标签分类/标签嵌套规范/透明度/手势/最小宽高/CSS默认样式

一. 标签的分类

按类型分：
    1. block (块) :
        div ul ol li dl dd dt p h1 h2 ..h6 ...
        特点：
            1. 块是上下排列的 ，块是独占一行的。(霸道的小总裁)
            2. 块，支持CSS中的所有样式。
            3. 当块不写宽度的时候，默认的宽度是父容器的宽。
            4. 块永远都是一个矩形区域。

    2. inline（内联）：
        span a strong em img ...
        特点：
            1. 内联是左右排列的，内联必须在一起（粘人的小公举）
            2. 内联，有些样式是不支持的 width height margin(一部分) padding(一部分)
            3. 内联元素的宽度就是由内容决定的。
            4. 不一定总是矩形区域。（了解）
            5. 两个内联元素之间会有一个空隙（折行带来的空隙）
                一般情况下，要不要解决这个空隙问题。一般情况下是不需要的，因为一般我们都是用块来做布局的，用内联元素来做文本修饰的。
                 解决：1. 让内联元素写到一行上。
                       2. 给父容器设置font-size:0;再给当前元素设置正常的文字大小。

    3. inline-block （内联的块）:
        input select ... 


按显示:

    替换元素 : 浏览器根据元素的标签和属性，来决定元素的具体显示内容。
        img input ...
    非替换元素 : 将内容直接告诉浏览器，将其显示出来。
        <div>aaaaa</div>

    注：图片<img>是一个内联元素，但是支持宽高（因为他还是一个替换元素）
   

display : 查看每一个标签的类型的（显示框类型）

    block
    inline
    inline-block
    none : 不显示标签(不占位)，类似于 border-right:none  text-decoration:none

    display:none跟visibility: hidden;的区别：后者是占位的。

二. 标签嵌套规范

可以通过右键，对选中代码进行格式化。

**标签本身就是很多嵌套规范：**
    table tr (td、th)
    ul li
    dl dt dd

**块标签可以嵌套内联标签:**
    <div>     √
        <span></span>
    </div>

**块标签不一定能嵌套块标签:**
    <div>   √
        <div></div>
    </div>
    特殊：
    <p>     ×
        <div></div>
    </p>

**内联标签不能嵌套块标签:**
    <span>   ×
        <div></div>
    </span>
    特殊：
    <a href="">   √
        <div></div>
    </a>

**不能自己嵌套自己的操作：**
    <a href="">   ×
        <a href=""></a>
    </a>
    <h2>       ×
        <h2></h2>
    </h2>

三. 透明度

opacity : 0 ~ 1 , 跟display:none也是有区别的。所有属性的透明度都跟着变

rgb() , rgba()  a的取值也是0 ~ 1。只有设置的颜色的透明度变

四. 手势

cursor : default pointer

总结手型：https://www.w3school.com.cn/cssref/pr_class_cursor.asp

自定义鼠标样式：要求图片是有格式的 .cur .ico

五. 最大最小宽高

height:100px;  == 100
min-height:100px;  >= 100
max-height:100px;  <= 100

对100%单位做一个扩展学习：
    %   父容器500px  子容器 50% ->  250px
        父容器600px  子容器 50% ->  300px
    注：百分百换算永远都是跟父容器对应的。

六. CSS默认样式

有默认样式的：
    body : margin 8px
    p : 上下margin 1em;-> 16px;
    h1 h2 h3 : font-size不一样，有上下margin
    ul : 默认的小点（disc） 左padding  上下margin
    a : color: -webkit-link; cursor: pointer; text-decoration: underline;

无默认样式的：
    div span ....

在开发一个网页之前：
    1. 先写结构HTML
    2. 去掉标签的默认样式
    3. 在PS工具中进行CSS的测量

去掉默认样式：css reset方案
    body,p,h1,h2,h3,ul{ margin:0; padding:0;}
    *{ margin:0; padding:0;}

    ul,ol{ list-style:none}

    a{ text-decoration:none;}

    img{ display:block;}  |  img{ vertical-align:bottom;}

vertical-align 属性 可以对 inline进行一个对齐方式的改变
    默认：基线 baseline bottom middle top

常见的CSS reset：https://blog.csdn.net/brain_bo/article/details/815604444

chrome插件：FeHelper ，以及如何去安装。