CSS知識碎片

1、常用display

        :none           /*不顯示，不佔位*/
	:inline 	/*行內*/
	:block		/*塊*/
	:flex		/*彈性*/
	:flow		/*流式佈局*/
	:grid		/*網格佈局*/

2、position:

:static   //無定位
        3種最常用的定位
:relative //相對定位，相對同級元素位置的定位調整
:fixed //固定定位，相對窗口的定位調整
:absolute //絕對定位，相對父級position的定位調整

        position屬性

        top/bottom/left/right

3、float

    漂浮，最初用來實現文字環繞圖片

    如

    .box {
      float: left;
      width: 200px;
      height: 100px;
      margin: 1em;
    }

    漂浮在左上角
    使用clear:left 消除環繞，將下一個元素置於float元素之後
    當圖片比文字元素高時，圖片會溢出到容器外面，此時使用
    overflow:auto

    使文字元素和圖片等高。

4、@media

響應式設計
讓網頁根據不同的瀏覽器和設備呈現不同的顯示效果。

@media screen and (min-width:600px) {}
@media screen and (max-width:599px) {}

5、flex

    flex 彈性盒，很強大的佈局方式

    注意，設爲 Flex 佈局以後，子元素的float、clear和vertical-align屬性將失效。

.container {
  display: -webkit-flex;
  display: flex;
}

/*空間足夠的時候，寬度是200px，如果空間不足，變窄直到最窄100px。*/
.initial {
  -webkit-flex: initial;
          flex: initial;
  width: 200px;
  min-width: 100px;
}
/*無論窗口如何變化，寬度一直是200px。*/
.none {
  -webkit-flex: none;
          flex: none;
  width: 200px;
}
/*佔滿剩餘寬度的1/3。*/
.flex1 {
  -webkit-flex: 1;
          flex: 1;
}
/*佔滿剩餘寬度的2/3。*/
.flex2 {
  -webkit-flex: 2;
          flex: 2;
}

    使用 Flexbox 的居中佈局(垂直居中)

.vertical-container {
  height: 300px;
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}

6、ccs選擇器

    id選擇器(#)、類選擇器(.)、標籤選擇器(body/div/h)、通配符(*)、子選擇器(ul>li)、相鄰選擇器(h1+p)、後代選擇器(li a)、僞類選擇器(:hover,:focus)、屬性選擇器(a[rel="external"])。

7、css屬性繼承

       可繼承：text-*/font-*/line-*/display/color/

        不可繼承：border/padding/margin/width/height

8、居中

    div: 

margin:0 auto

    浮動元素的上下左右居中：

  width: 100px;
  height:100px;
  float:left;
  position:absolute;
  left: 50%;
  top:50%;
  margin:-100px 0 0 -100px;

    flexbox垂直/左右居中:上文flex佈局

9、box-sizing屬性

        css的盒子模型。

        context-box：標準盒子模型，寬度=內容寬度(content)+border+padding+margin，設置width/height指的是content部分的寬高，默認使用此模型。

        border-box：IE傳統盒子模型，寬度=內容寬度(content+border+padding)+margin，設置width/height指的是content+border+padding寬高。此盒子模型使用更直觀。

10、display:table、display:table-cell 一起使用實現垂直居中

11、text-overflow 失效

.text-overflow-template{
    display: block;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}

失效時，需要設置父級節點寬度。

沒有display:block和overflow:hidden不會隱藏多餘內容，沒有white-space:nowrap會自動折行。