CSS----调试常见小知识

flex布局：https://www.runoob.com/bootstrap4/bootstrap4-flex.html

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

 

1.超出div的内容隐藏

overflow:hidden

2.只读

readonly

3.图片设置缩放

只要设置宽度或这长度即可

3.给图片剧中

            <el-col :span="4" style="height: 100px;display: flex;justify-content: center;align-items: center;">  //div需要设置宽度
                <img style="height: 50px;border-radius: 50px;margin: 0 auto" src="@/assets/touxiang.jpg" alt="">
            </el-col>

4.设置边框

border:5px solid red;

5.左边自适应,右边固定

<div id="wrap">
  <div id="content" style="height:340px;">自适应区，在前面</div>
  <div id="sidebar" style="height:240px;">固定宽度区</div>
</div>

<style>
#wrap {
    *zoom: 1; position: relative;
  }
  #sidebar {
    width: 300px; position: absolute; right: 0; top: 0;
  }
  #content {
    margin-right: 310px;
  }
</style>

　　

 

合理利用fix和margin-bottom

1、设置pagination在底部

position: fixed;bottom: 0;

2、此时table标签，就需要距离底部一定的距离，否则会被pagination遮挡

margin-bottom: 35px

 

让div在页面最中间

    <div style="height: 100px">
        <!--   absolute不受父级控制   transform让div中心在页面中心 -->
        <div style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);  ">大学生毕业管理系统</div>
    </div>