css使用备忘录1

float/absolute/fixed定位会强制设置成block

例如：

div {
    float: left;
    display: block;
    width: 100px;
    height: 30px;
}

第二行的display: block其实是没用的，因为如果设置浮动了，目标元素就会具有块级盒模型的特性，即使设置display: table-cell或者inline也不管用。如果设置为display: flex，那么float将会被忽略。

同样地，absolute定位和fixed定位也有同样的效果，会把行内元素变成块级的。
因此，在这种情况下，如果你设置display:inline-*的时候，将会做如下的转换inline或inline-block将转换成block，inline-flex转换成flex，inlone-grid转换成grid，inline-table转换成table

不要使用transform: translate (-50%, -50%)居中

一个element水平垂直居中，其中的一种解决方案是结合使用position: absolute和使用transform属性。但是，这个技术在基于Chromium的浏览器中引起了模糊的文本问题。

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

分享一个技巧，可以将代码减少为两个属性。
我们可以使用margin:auto在flex容器内自动放置，浏览器将元素居中。 只有两个属性，仅此而已。

.parent {
  display: flex;
}

.child {
  margin: auto;
}

css属性width默认值width: auto与width: 100%区别

width: auto
父元素的content = 子元素（content + padding + border + margin )

width: 100%
强制将子元素的content区域 撑满 父元素的content区域
子元素有margin、border、padding时，不改变子元素content区域的width，而是溢出父盒子，保持原有值
父元素的content = 子元素的content

不用在块级元素上设置 width: 100%
width的默认值是父元素的100%,一般情况下不用设置就可以满足需求。height的默认值是里面内容的高度,用css中用代码表示就是height:auto;这句话的意思就是内容高度决定盒子的高度。一般写代码的时候也不需要给元素设置高度,如果设置了高度而且设置的高度不够的时候，就会出现元素重叠的情况。