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会自动折行。

12、object-fit自适应容器宽高

img图片自适应为正方形：

.img{
  width: 200px;
  height: 200px;
  object-fit:cover;
}

object-fit其它值：

　　object-fit: fill; 
　　object-fit: contain; 
　　object-fit: cover; 
　　object-fit: none; 
　　object-fit: scale-down; 

object-position：设定在容器中的位置