css使用技巧

2019-08-29  本文已影响0人  郑馋师

定位技巧

  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;
  1. 某些浏览器无top/left位置会有bug,所以一般都写上。
  2. 善用left和transform可以直接居中。


    直接居中了
.child{
    display: flex;
  border: 1px  black solid;
  height: 100px;
  width:100px;
   left:50%;
  position: relative;
  transform:translateX(-50%)}
  1. white-space
    代表了文字内容换行与否。
  2. calc
    可以让%与px混用。eg:
    buttom:calc(100%+20px)
  3. 虽然body如果用border看不会铺满整个屏幕,但是background改变背景色还是会整个网页而非border内变色。
  4. 记住滚动条是17px,如果做布局的时候发现有地方差17px就是滚动条了
上一篇下一篇

猜你喜欢

热点阅读