震惊！！！一眼就能看懂的CSS页面布局方式！！！！

代码复制都可以直接使用！有帮助记得点赞互粉加收藏！

1.理解盒子模型
border-sizing(怪异盒子)：内容宽高+margin外边距左右
content-box(标准盒子)：内容宽高+margin外边距左右+padding内边距左右+border边框
一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。会发现margin、border、padding是CSS属性，
因此可以通过这三个属性来控制盒子的这三个部分。而content则是HTML元素的内容
box-shadow: 10px 10px 5px #888888;
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。请参阅 CSS 颜色值。
inset 可选。将外部阴影 (outset) 改为内部阴影。
在这里插入图片描述

理解并会使用flex, float等常见布局思路 
(1)普通布局(头部、内容、底部)
<div class="container">
    <header></header>
    <div class="content"></div>
    <footer></footer>
</div> 

(2)两栏布局，通过float左边固定大小，右边自适应
<div class="container1">
    <div class="nav"></div>
    <div class="content"></div>
</div>
<!-- css实现方法2：通过display:inline-block实现
.container1 {
    /* width:80%;和margin 是为了方便我截图*/
    width: 80%;
    margin: 50px auto;
    border:2px solid red;
    box-sizing: border-box;
    font-size: 0;
}
container1 .nav {
    display: inline-block;
    width: 200px;
    background: #faa;
    height: 200px;
}
container1 .content {
    width: calc(100% - 200px);
    display: inline-block;
    height: 200px;
    background-color: #aaf;
} -->
<!-- css实现方法3：通过flex实现，左侧固定大小，右侧设置flex:1实现自适应
.container1 {
    width: 80%;
    margin: 50px auto;
    border:2px solid red;
    box-sizing: border-box;
    display: flex;
}
.container1 .nav {
    width: 200px;
    background: #faa;
    height: 200px;
}
.container1 .content {
    flex: 1;
    height: 200px;
    background-color: #aaf;
} -->
<!-- flex: 1等同于flex-grow: 1; -->

(3)三栏布局：通过flex布局
<div class="container2">
    <div class="left"></div>
    <div class="right"></div>
    <div class="content"></div>
</div>
<!-- css布局方法2：通过float浮动，左右大小固定，中间自适应
.container2 {
    width: 100%;
    margin-bottom: 30px;
    border:2px solid red;
    box-sizing: border-box;
}
.container2 .left {
    width: 100px;
    height: 200px;
    background: #faa;
    float: left;
}
.container2 .right {
    width: 300px;
    height: 200px;
    background: #afa;
    float: right;
}
.container2 .content {
    height: 200px;
    background-color: #aaf;
    margin:0 200px;
} -->

(4)圣杯布局
<div class="container3">
    <div class="middle"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

(5)双飞翼布局
<div class="container4">
    <div class="middle"></div>
</div>
<div class="left4"></div>
<div class="right4"></div>


CSS样式
.container {
    width: 80%;
    margin: 30px auto;
    border:2px solid red;
    box-sizing: border-box;
}
.container header {
    width: 100%;
    height: 30px;
    background: #faa;
}
.container .content {
    width: 100%;
    height: 100px;
    background: #aaf;
}
.container footer {
    height: 50px;
    background: #afa;
}

.container1 {
    width: 80%;
    margin: 30px auto;
    border: 2px solid #aaa;
    box-sizing: border-box;
    /* 采用bfc清除浮动 */
    overflow: hidden;
    height: 200px;
}
.container1>.nav {
    float: left;
    width: 200px;
    background: #faa;
    height: 200px;
}
.container1>.content {
    margin-left: 200px;
    background: #aaf;
    height: 200px;
}

.container2 {
    width: 80%;
    margin: 30px auto;
    border: 2px solid red;
    box-sizing: border-box;
    height: 200px;
    display: flex;
    justify-content: space-between;
}
.container2>.left {
    flex: 1;
    background-color: #FFAAAA;
}
.container2>.right {
    flex: 3;
    background-color: #AAAAFF;
}
.container2>.content {
    flex: 2;
    background-color: #AAFFAA;
}

.container3 {
    position: relative;;
    height: 200px;
    background: #ddd;
    padding: 0 300px 0;
    margin: 30px auto;
}
.container3 .middle{
    float: left;
    width: 100%;
    height: 200px;
    background-color: #AAFFAA;
}
.container3 .left{
    float: left;
    position: relative;
    height: 200px;
    width: 300px;
    margin-left: -100%;
    left: -300px;
    background-color: #FFAAAA;
}
.container3 .right {
    float: left;
    position: relative;
    width: 300px;
    height: 200px;
    margin-left: -300px;
    left: 300px;
    background-color: #AAAAFF;
}

.container4{
    float: left;
    width: 100%;
    height: 200px;
    background: #ddd;
}
.container4 .middle{
    height: 200px;
    margin: 0 300px;
    background-color: #AAFFAA;
}
.left4{
    float: left;
    position: relative;
    width: 300px;
    height: 200px;
    margin-left: -100%;
    background-color: #FFAAAA;
}
.right4{
    float: left;
    position: relative;
    width: 300px;
    height: 200px;
    margin-left: -300px;
    background-color: #AAAAFF;
}

3.使用scss等样式预处理语言
scss概念:sass是成熟，稳定，强大的CSS预处理器，而SCSS是Sass3版本当中引入的新语法特性，完全兼容CSS3的同时继承Sass强大的动态功能
scss特性:CSS书写代码规模较大的Web应用时，容易造成选择器、层叠的复杂的过高，因此推荐通过SASS预处理器进行CSS的开发，
SASS提供的变量，嵌套，混合，继承等特性，让CSS的书写更加有趣与程式化
(1)scss的安装
插件：npm install node-sass --save-dev
npm install sass-loader --save-dev
npm install style-loader --save-dev
在webpack.base.conf.js中加上
{test:/.scss$/, loaders:[‘style’,‘css’,‘sass’]}

(2)创建公共scss,写一些需要全局设置的基本样式，例如清除浮动
(3)安装sass-resources-loader来全局引入
npm i sass-resources-loader --save-dev插件是我们想要全局引用scss所要安装的
修改build中的utils.js，我们将scss:generateLoaders('scss')改为scss:generateLoaders('sass').concat({loader: 'sass-resources-loader',
    options: {
        //你自己的scss全局文件的路径
    resources: path.resolve(__dirname, '../src/common/style/index.scss')
    })
(4)直接的引入，在main.js中直接引入scss,然后再需要的组件中需要引入时再使用
操作网址：https://blog.csdn.net/haochangdi123/article/details/80798813 -->

4.css样式污染解决方案
20.更改element ui 的三种方式
(1)给组件加上id或者class，然后添加一个style，不要加scoped（vue可以有多个style），在组件里直接修改
(2)外部引入css文件，默认样式会被覆盖
(3)利用深度::v-deep深度修改组建的样式，可以直接写在到scoped作用域的style里面。
例子:::v-deep .video-play { width:100px} -->