标签：order lex contain ima wrap 注意 一个 最小 bar
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，应对整个屏幕大小设置。
标签：order lex contain ima wrap 注意 一个 最小 bar
原文地址：https://www.cnblogs.com/5201314m/p/12191333.html
