css布局
css定位：
谈到布局，首先要谈到css定位，定位是定义某个元素相对于父元素或者其他元素的位置。
首先，要说明一下position属性。它有六个属性值：static、relative、absolute、fixed、sticky和inherit：
- static(默认)：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分；行内元素则会创建一个或多个行框，置于其父元素中。
- relative：元素框相对于之前正常文档流中的位置发生偏移，并且原先的位置仍然被占据。发生偏移的时候，可能会覆盖其他元素。
- absolute：元素框不再占有文档流位置，并且相对于包含块进行偏移(所谓的包含块就是最近一级外层元素position不为static的元素，它的便宜是相对于父元素的偏移)
- fixed：元素框不再占有文档流位置，并且相对于视窗进行定位
- sticky：(css3新属性)粘性定位。其实，它就相当于relative和fixed混合。最初会被当作是relative，相对于原来的位置进行偏移；一旦超过一定阈值之后，会被当成fixed定位，相对于视口进行定位。
CSS尺寸定位：
百分比：相对于父元素大小。
px：像素大小。
rem：HTML的font-size的大小。
em：相对于父元素的font-size，相对比值。
CSS盒子模型：
每个元素，都会形成矩形块，包含：margin(外边距)+border(边框)+padding(内边距)+content(内容)，如图所示：
模型分类：
标准模型：width长度=content长度
borde-box模型：width长度=border+padding+content总和（设置box-sizing属性为border-box）
元素高度：
div高度：
决定：div内部文档流元素的高度之和决定
文档流：文档流元素的流动方向
内联元素：流动方向从左往右 遇到阻碍换行
块级元素：流动方向从上往下
横向排布：父元素clearfix 自身元素float：right/left(dispaly:inline-block(极容易出现bug）
span高度：
决定：文字大小决定（文字上部到下部距离）--不可定量
内部分离：word-break属性
脱离文档流：
方法：
父元素class属性-clearfix 子元素float：right/left
position:fixed;(相对视窗定位）
position:absolute;
布局：
table布局：最初布局形式
左右布局：
实现方式：
方法一：父元素class属性clearfix 子元素float：left
方法二：一栏定宽、一栏自适应 float+margin
<body>
<div class="left">左</div>
<div class="right">右</div>
</bod.left{ width: 300px; height: 600px;
background: red;
float: left;
display: table;
text-align: center;
line-height: 600px;
color: #fff;
}
.right{
margin-left: 3200px;
height: 600px;
background: green;
text-align: center;
line-height: 600px;
}
三栏布局：
方法1：创立父元素，使用display:flex(css3属性 弹性布局）中间width设置为100%
<div class="wrapper">
<div class="left">左栏</div>
<div class="middle">中间</div>
<div class="right">右栏</div>
</div>.wrapper{
display: flex;
}
.left{
width: 200px;
height: 300px;
background: green;
}
.middle{
width: 100%;
background: red;
marign: 0 20px;
}
.right{
width: 200px;
height: 3000px;
background: yellow;
}方法2：左右两栏使用position的absolute定位，中间使用margin定位。
方法3：左右两栏使用float属性，中间使用margin属性撑开。
缺点：HTML结构不正确。
css居中：
水平居中：
方法1：父元素text-align:center。自身元素display:inline-block
方法2：父元素position:relative。自身元素position:absolute;left:50%;
垂直居中：
方法1：父元素display:flex;align-item:center;
方法2：父元素position:relative;子元素position:absolute;top:50%;transform:translateY(-50%);
伪类：css元素伪属性，便于同类元素分类操作。用":"
伪元素：css元素伪元素，便于不增加HTML结构的操作，尤其适用于不规则图形构造。用"::"
