CSS布局技巧
1. position
为了制作更多复杂的布局，我们需要讨论下position属性。它有一大堆的值，名字还都特抽象，别提有多难记了。让我们先一个个的过一遍。
- static
- relative
- fixed
- absolute
1.1 static
static是默认值。任意position: static;的元素不会被特殊的定位。一个static元素表示它不会被“positioned”，一个position属性被设置为其他值的元素表示它会被“positioned”。
1.2 relative
在一个相对定位（position属性的值为relative）的元素上设置top、right、bottom和left属性会使其偏离其正常位置。其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。下面是演示代码：
<style>
.relative1 {
position: relative;
background-color: rgb(255, 152, 152);
}
.relative2 {
position: relative;
top: -20px;
left: 20px;
background-color: rgb(137, 255, 178);
width: 500px;
}
</style>
<body>
<div class="relative1">1</div>
<div class="relative2">2</div>
《/body>
1.3 fixed
position属性的值为fixed为固定定位，该元素会相对于视窗来定位，即使页面滚动，它还是会停留在相同的位置。和relative一样，top、right、bottom和left属性都可用。一个固定定位元素不会保留它原本在页面应有的空隙，即之后添加的元素会占用他之前的位置。下面为演示代码：
<style>
.fixed {
position: fixed;
margin-left: 200px;
width: 200px;
background-color: rgb(95, 187, 227);
}
.back{
margin: 0 auto;
width: 100%;
height: 2000px;
background-color: rgb(186, 255, 101);
}
</style>
<body>
<div class="fixed">测试</div>
<div class="back">我是背景</div>
</body>
1.4 absolute
position属性的值为fixed为绝对定位，absolute是最棘手的position值。 absolute与fixed的表现类似，但是它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。记住一个“positioned”元素是指 position 值不是static的元素。
<style>
.relative {
position: relative;
width: 600px;
height: 400px;
background-color: rgb(253, 116, 116);
}
.absolute {
position: absolute;
top: 120px;
right: 0;
width: 300px;
height: 200px;
background-color: rgb(116, 255, 148);
}
</style>
<body>
<div class="relative">
这个元素是相对定位的。如果它是 position: static; ，那么它的绝对定位子元素会跳过它直接相对于body元素定位。
<div class="absolute">
这个元素是绝对定位的。它相对于它的父元素定位。
</div>
</div>
</body>
2. float
浮动的属性：该性质会使元素向左或向右移动，其周围的元素也会重新排列。
2.1 clear
float属性被用于控制浮动。即元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用clear属性，clear属性指定元素两侧不能出现浮动元素。
来看一下下面的例子：
首先这个是正常的浮动：
<style>
.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
background-color: rgb(143, 255, 112);
}
section{
background-color: rgb(255, 134, 134);
width: 200px;
}
</style>
<body>
<div class="box">a盒子</div>
<section>b盒子</section>
</body>
接下来使用clear属性，来指定该元素附近不能出现浮动元素
<style>
.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
background-color: rgb(143, 255, 112);
}
.after-box {
clear: left;
}
section{
background-color: rgb(255, 134, 134);
width: 200px;
}
</style>
<body>
<div class="box">a盒子</div>
<section class="after-box">b盒子</section>
</body>
2.2 清除浮动
为什么要清除浮动？
清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题
清除浮动的方法（最常用的4种）
一、 额外标签法： 给谁清除浮动，就在其后额外添加一个空白标签 。
优点： 通俗易懂，书写方便。
缺点： 添加许多无意义的标签，结构化比较差。 （不推荐使用）
<style>
.clear{
clear:both;
}
</style>
<body>
<div class="fahter">
<div class="big">big</div>
<div class="small">small</div>
<div class="clear">额外标签法</div>
</div>
</body>
给元素small清除浮动（在small后添加一个空白标签clear(类名可以随意），设置clear:both;即可）。
二、 父级添加overflow方法： 可以通过触发BFC的方式，实现清楚浮动效果。
优点： 简单、代码少、浏览器支持好
缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。不能和position配合使用，因为超出的尺寸的会被隐藏。
.fahter{
width: 400px;
border: 1px solid black;
overflow: hidden;
}
注意： 是给父元素加（不是所有的浮动都需要清除，谁影响布局，才清除谁。猹影响布局，就清除猹。）
三、使用after伪元素清除浮动： :after方式为空元素的升级版，好处是不用单独加标签了。
优点： 符合闭合浮动思想，结构语义化正确，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
.clearfix:after{
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
<body>
<div class="father clearfix">
<div class="big">big</div>
<div class="small">small</div>
</div>
<div class="footer"></div>
</body>
四、使用before和after双伪元素清除浮动：（较常用推荐）
<style>
.clearfix:after,.clearfix:before{
content: "";
display: block;
clear: both;
}
.big ,.small{
width: 200px;
height: 200px;
float: left;
}
.big{
background-color: red;
}
.small{
background-color: blue;
}
</style>
<div class="father clearfix">
<div class="big">big</div>
<div class="small">small</div>
</div>
<div class="footer"></div>
</div>
除了这四种还有一种更为简单的方式，给父元素定义好height高度，就解决了父级元素无法获取到高度的问题。
3. 弹性盒子
它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。与以前布局方式（如 table 布局和浮动元素内嵌块元素）相比，Flexbox 是一个更强大的方式，主要表现在：
1、在不同方向排列元素 2、重新排列元素的显示顺序 3、更改元素的对齐方式 4、动态地将元素装入容器
常见的Flex布局案例
1.水平居中
在父元素添加display:flex;和justify-content:center;
<style>
.parent{
display:flex;
justify-content:center;
}
</style>
<body>
<div class="parent">
<div class="child">child</div>
</div>
</body>
2.垂直居中
在父元素添加display:flex;和align-items:center;设置父元素高度。
<style>
.parent{
font-size：48px；
display:flex;
align-items:center;
height:300px;
}
</style>
<body>
<div class="parent">
<div class="child">child</div>
</div>
</body>
3.等分布局
在父元素添加display:flex;和justify-content:space-between;
<style>
.parent{
display:flex;
justify-content:space-between;
}
</style>
<body>
<div class="parent">
<div class="child">child1</div>
<div class="child">child2</div>
<div class="child">child3</div>
<div class="child">child4</div>
</div>
</body>
4.换行布局
在父元素添加display:flex;和flex-wrap:wrap;设置子元素宽度
<style>
.parent{
display:flex;
flex-wrap:wrap;
}
.child{
width:200px;
}
</style>
<body>
<div class="parent">
<div class="child">child1</div>
<div class="child">child2</div>
<div class="child">child3</div>
<div class="child">child4</div>
</div>
</body>
5.悬挂式布局
给child2增加flex:1; 左侧的元素不需要设置
<style>
.parent{
display:flex;
align-items:flex-start;
}
.child1{
height:40px;
margin-right:20px;
background-color:rgb(111,156,238);
padding:10px;
}
.child2{
flex:1;
}
</style>
<body>
<div class="parent">
<div class="child1">头像</div>
<div class="child2">Flex布局是CSS3新加入的一种布局方式，可以轻松实现各种页面布局效果。与传统的布局方式相比，Flex布局具有更好的响应式设计和更简单的语法。它适用于各种设备大小和屏幕方向，并提供了更灵活的布局选择，使得设计人员可以更好地控制页面的外观和功能。</div>
</div>
</body>
6.响应式布局
在父元素添加display:flex;和设置不同的flex-basis和flex-grow属性
<style>
.parent{
display:flex;
}
.child1{
flex-basis:50%;
flex-grow:1;
}
.child2{
flex-basis:30%;
flex-grow:1;
}
.child3{
flex-basis:20%;
flex-grow:1;
}
</style>
<body>
<div class="parent">
<div class="child1">child1</div>
<div class="child2">child2</div>
<div class="child3">child3</div>
</div>
</body>
