美文网首页
css使用技巧

css使用技巧

作者: 郑馋师 | 来源:发表于2019-08-29 19:10 被阅读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就是滚动条了

    相关文章

      网友评论

          本文标题:css使用技巧

          本文链接:https://www.haomeiwen.com/subject/tmdwectx.html