程序从入门到入土（Day4）

ul li:nth-child(n){
}
/* 选择第n个li,若n不为li则无效 */

ul li:nth-of-type(n){
}
/* 先对ul内的li排序，后查找对于顺序 */

ul li:nth-child(2n+1){
}
/* 对奇数位的li改变,不为li不改变,非li占用位数行 */
---------------------------------
---------------------------------
div{
            font-size: (n)px;
            /* 字体大小 */
            font-family: "（n）";
            /* 字体名称 */
            font-style: (n);
            /* 默认为normal */
            font-weight: (n);
            /* 400为正常 */

            /* 
            font: 粗度 倾斜状态 大小 名称（font:400 italic 150px "微软雅黑"） 
            */
        }
---------------------------------
---------------------------------
text-indent: 2em;
        /* 当前字体的2分（常都用2em） */
        font-size: 19px;
        /* 字体大小 */
        line-height: 40px;
        /* 为行高（即文字的上部到底部的一段距离，非文字间的间隔高度） */

---------------------------------
---------------------------------
text-align: center;
        /* 文本行间的对齐方式（right,center.....) */
        line-height: 200px;
        /* 让单行！！文本居中 */
        /* word-spacing: 12px; 
        改变英文单词的间隔 */
        margin: 0 auto;
        /* 标签水平居中 */

---------------------------------
---------------------------------
text-decoration: 
        underline;
        /* 增加下划线 */

---------------------------------
---------------------------------
 text-decoration:  
        none;
        /* none,去除链接的默认样式 */
        color: black;       
---------------------------------
---------------------------------
            color: #1453;
            color: p;
            color: rgb
            都可改变颜色
---------------------------------
---------------------------------
direction: rtl;
---------------------------------
---------------------------------
list-style-type: none;
            /* 设置列表样式 ,用于改变列表前缀变现形式*/
---------------------------------
---------------------------------
 background-repeat: no-repeat;
            background-position: left top;
            background-size: contain;
            /* auto自适应，cover强行覆盖，contain去除多余部分*/
            background-attachment: fixed;
            /* 将图片固定于视窗 */
---------------------------------
---------------------------------
 <!-- 将独占一行的标签成为：块级元素（默认！情况下独占一行） 
         可以设置宽、高、行高、内外边距-->
    <a href="">awa hyjtjhtr rtdawd </a>
    <span>awd awd </span>
    <!-- 与其他元素处于同一行：内联元素
         不能设置宽高、内外边距不能设置 -->
         <img src="" alt="">
    <!-- 内联块级元素：有上者优点，不独占也可设 -->
---------------------------------
---------------------------------
    border-width: 2px;
            /* 边框大小 */
            border-style: solid;
            /* 边框款式 */
            border-color: black;
            /* 边框颜色 */
            border: 2px solid red;
            border-radius: 20px;
            /* 改变转角弧度，px、%都可 */
            border-top-right-radius: 40%;
            /* 自定义选择改变角 */
---------------------------------
---------------------------------
 table{
            border-collapse: collapse;
        }
        /* 解决边框重合导致内侧变粗黑 */
---------------------------------
---------------------------------
textarea{
            width:300px;
            height: 50px;
            resize: none;
            vertical-align: top;
        }
/* 无法拖动改变输入框大小 */
---------------------------------
---------------------------------
 cursor: cell;
            /* 改变鼠标点击后的样式 */
---------------------------------
---------------------------------
 position: relative;
            /* 做相对定位 */
 position: absolute;
            /* 对父项做绝对定位 */
            /* 不加则子项相对于浏览器 */
            left: 0px;
            top: 150px;
            /* top为距离top多少像素 */
---------------------------------
---------------------------------
 z-index: 1;
            /* 改变优先级 */
---------------------------------
---------------------------------
 /* opacity: 1;
            0隐藏，1显示 */
            /* display: block */