CSS笔记2

100 阅读1分钟
        /* li:first-child {
            color:red
        } 
        li:last-child {
            color: aqua;
            background-color: yellow;
        }
        li:nth-child(3) {
            background-color: #abcdef;
        } */

        /* li:nth-child(even) */
        li:nth-child(2n) {
            background-color: violet;
        }

        /* li:nth-child(odd) */
        li:nth-child(2n-1) {
            background-color: yellow;
        }

        /* 从第三个开始,,包含第三个 */
        li:nth-of-type(n+3) {
            color: #ccc;
        }
        /* 前三个,包含第三个 */
        li:nth-of-type(-n+3) {
            color: tomato;
        }

        /* 背景平铺
        repeat  水平和垂直方向都平铺
        repeat-x  水平方向都平铺
        repeat-y 垂直方向都平铺
        no-repeat  水平和垂直方向都不平铺
        */
        background-repeat: no-repeat;

        /* 背景位置
        方位名词:最多表示9个位置  水平方向 left center right  垂直方向 top center bottom
        数字+px  : 0 0 左上角  x y
        注意:方位名词可以和坐标轴混用,第一个表示水平  第二个表示垂直
        */
        background-position: 10px center;
      }
        /* 复合写法
        background:color image repeat position
         */

        /* background: red url(./img/logo.png) no-repeat left center; */
        background: yellow url(./img/logo.png) no-repeat;
        background-position: left center;
        分开写的需要写在下面,不然会被覆盖不显示
块级元素:

-   独占一行(一行只能显示一个)
-   宽度默认是父元素的宽度,高度默认由内容撑开
-   可以设置宽高
- h1~h6,ul,li ,p,ol,dl ,dt,dd ,header,nav,main,footer
行内元素:

-   一行可以显示多个
-   宽度和高度默认由内容撑开
-   不可以设置宽高
- span,b,u,i,em,strong


行内块元素

-   一行可以显示多个
-   可以设置宽高
- input textarea,select,buttonimg