目录
1，浮动布局2，弹性布局3，CSS 2D 转换4，CSS 3D 转换5，css动画6，长度单位7，元素，文本阴影8，表单元素9，响应式布局1，浮动布局
float，设置元素使用浮动布局，浮动有左浮动和右浮动。元素在使用浮动后，会脱离原有的文档流，在浮动文档流中，块元素是横向排列。
注意：在最后一个浮动元素结束的地方必须清除浮动。\color{#FF3030}{在最后一个浮动元素结束的地方必须清除浮动。}在最后一个浮动元素结束的地方必须清除浮动。方法：
1，在最后一个浮动元素后面添加一个空元素，并设置style属性
<div style='clear: both'></div>
2，浮动的元素，都会有一个共同的父元素，可以为这个父元素添加一个后缀（:after）伪元素 ，在后缀中清除浮动。
.clear-fix:after{content: "";display: block;clear: both;}
3，使用CSS的overflow属性
//给父元素设置了overflow样式，不管是overflow:hidden或overflow:auto都可以清除浮动只要它的值不为visible就可以了.
2，弹性布局
开启弹性布局。
div{display:flex;}
设置主轴的对其方式
flex-direction: row;row默认的：主轴为水平方向，起点在左端 row-reverse：主轴为水平方向，起点在右端。column：主轴为垂直方向，起点在上沿。column-reverse：主轴为垂直方向，起点在下沿
设置项目(子元素)在容器(父元素)中主轴方向的占比。
flex-basis: 15%;值是百分比
更改项目在容器中的排列顺序，数字越大越靠后。
order: 3;值默认是0
项目在主轴的对齐方式(项目的排列方向)
justify-content:space-around;flex-start（默认值）：左对齐。flex-end：右对齐。center： 居中space-between：两端对齐，项目之间的间隔都相等。space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
项目在交叉轴的对齐方式
flex-start：交叉轴的起点对齐。flex-end：交叉轴的终点对齐。 center：交叉轴的中点对齐。baseline: 项目的第一行文字的基线对齐。 stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
当容器变大的时候，项目也会随之变大。默认值是0不参与分配。
flex-grow: 1;
当空间不够的情况压缩每个项目的比例
flex-shrink: 2;
Flew-wrap：折行属性，规定项目如何换行。默认是不换。
flex-wrap: wrap;
flex总结
flex-direction:属性决定主轴的方向flex-wrap：换行的方式flex-flow:上述两种的简写justify-content:项目在主轴上的对齐方式align-items：交叉轴的对齐方式align-content:属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
行内垂直居中
vertical-align: middle;
3，CSS 2D 转换
CSS 转换（transform属性）允许您移动、旋转、缩放和倾斜元素。
/*transform：变形样式:translate：移动rotate：旋转scale：缩放deg°*/transform: rotate(30deg);
设置变形的原点，默认是中心点50%，50%。
transform-origin: 100% 100%;
平移变形：两个参数分别代表横向偏移量和纵向偏移量
transform: translate(50px,30px);
缩放变形:两个参数分别代表横向缩放比和纵向缩放比
transform: scale(0.5,3.5);
4，CSS 3D 转换
transform属性，也可以使用以下3D 转换方法：
rotateX()rotateY()rotateZ()
perspective属性定义了3d元素距离视图的间距，单位是像素。
perspective: 1000px;
5，css动画
Css过渡动画：transition;Css关键帧动画：animation:ani1 3s linear infinite;6，长度单位
px：像素，1px相当于屏幕上1个最小的显示单元。em：当前元素的父元素的字体大小。rem：根元素的字体大小。1vw：浏览器窗口宽度的1%。1vh：浏览器窗口高度的1%。7，元素，文本阴影
box-shadow：设置元素阴影，五个参数：横向偏移量，
纵向偏移量，
模糊程度，
阴影大小，
阴影颜色。
box-shadow: 10px 10px 20px 0px grey;
text-shadow：设置文本阴影，四个参数：
横向偏移量，
纵向偏移量，
模糊程度，
阴影大小，
text-shadow: 2px 2px 5px black;
8，表单元素
input：输入框，行内块元素。placeholder：提示内容。
<input type="text" placeholder="请输入账号">
button：按钮，行内块元素。
<button>按钮</button>
lable标签：用于关联一个其他的表单元素，for属性需要写关联元素的id，点击lable相当于点击了关联的元素。
<label for="psw">密码:</label>
radio:单选框，处在同一组的单选框只能选一个值。
<input type="radio" name="city"><label for="">上海</label><input type="radio" name="city"><label for="">深圳</label><input type="radio" name="city"><label for="">北京</label><input type="radio" name="city">
chechbox：复选框，可以多选。
<label for="">白菜</label><input type="checkbox"><label for="">苹果</label><input type="checkbox"><label for="">西瓜</label><input type="checkbox">
select：下拉列表，行内块。
option：下拉列表项。
<select id="nvyou"><!-- option 下拉列表项 --><option>小明</option><option>小红</option><option>小刚</option></select>
9，响应式布局
定义：页面本身能够根据浏览器窗口的宽度进行不同的布局。
viewport：视口设置。
@media：媒体查询，设置一些样式在某些条件下生效。媒体查询是响应式布局的基础。
@font-face，引入一个外部的字体文件，其中至少需要写src和font-family，src表示引入的文件的路径，font-family为这个字体定义一个名字。
@font-face{src: url(cjs.ttf);font-family: srpz;}
