margin和padding

Posted 2021-03-16 5201314m

margin指外边距，padding指内边距，通常我们指的宽度width包含内容、内边距、border、外边距。

实现代码：

1.html:

<el-container class="contaniner_content">
  <el-header>
    <topBarLeft></topBarLeft>
    <topBarRight></topBarRight>
  </el-header>
  <el-container class="contaniner_inside">
    <el-main class="mainStyle">
      <keep-alive include="log">
        <router-view id="main-content-value" class="page-component-wrap animated fadeIn"></router-view>
      </keep-alive>
    </el-main>
  </el-container>
</el-container>

2.css:

.contaniner_content{
  height: 100%;
  min-width: 1300px;  //整个屏幕最小1300px
  .contaniner_inside{
    padding: 20px 120px;
    .mainStyle{
      display: flex;
      justify-content: center;
      // margin: 20px 120px;
      padding: 0;
      width: 100%;
    }
  }
}　　

 

注意：

1.主要使用的vue脚手架搭建的项目，在.mainStyle的div里面会获取到对应的子组件，在其中一个子组件中设置width为100%，

在.mainStyle中也设置了width为100%，尽量不要再设置padding和margin了，因为这样会计算到它的宽度中，这样内容占的比就不能再是百分比了，要设置最好在它的父元素或者子元素中设置，

不然会引发一些问题，比如，页面不能自适应，浏览器有兼容问题。

2.要设置min-width，应对整个屏幕大小设置。