css使用技巧

定位技巧

1. 善用100%，在最右边可以用left:100%实现他在最右边。
   看到这个child出去了在最右边

*{
  padding: 0;
  margin:0;
  box-sizing:border-box ;
}
.parent{
  display: flex;
  border: 1px  blue solid;
  height: 100px;
  width:300px;
}
.child{
    display: flex;
  border: 1px  black solid;
  height: 100px;
  width:100px;
   left:100%;
  position: relative;

2. 某些浏览器无top/left位置会有bug，所以一般都写上。

3. 善用left和transform可以直接居中。

   
   
   直接居中了

.child{
    display: flex;
  border: 1px  black solid;
  height: 100px;
  width:100px;
   left:50%;
  position: relative;
  transform:translateX(-50%)}

4. white-space
   代表了文字内容换行与否。
5. calc
   可以让%与px混用。eg：
   buttom：calc（100%+20px）
6. 虽然body如果用border看不会铺满整个屏幕，但是background改变背景色还是会整个网页而非border内变色。
7. 记住滚动条是17px，如果做布局的时候发现有地方差17px就是滚动条了