响应式布局 ：网页兼容多个终端，用户体验
Media Query 媒体查询：响应布局的一种方式
全程百分比布局
语法：@meidia mediatype and|not|only (media feature){
CSS-Code;
@media 定义媒体查询
mediatype ：all所有设备；print打印机；screen电脑屏幕，平板电脑，智能手机
speech 屏幕阅读器等发声设备
<link rel="stylesheet" href="media.css">
media feacure: max:小于或等于；min:大于或等于
css文件下定义：媒体查询文件
多列布局：multi-column 多种 ；列
属性：column-count:3 分几列
column-gap:50px 列间距
column-rule:宽度 样式 颜色 列分割线的样式
宽度：thin 细 medium 中等 thick 粗
样式：hidden 隐藏； dotted 点状； dashed 虚线； solid 实现； double 双线
column-span:all 指定元素要垮多少列
Box-sizing 任意指定 盒模型 标准盒模型：W3C 怪异盒模型：IE
content-box标准
border-box怪异
绘制特殊图形
三角：宽高为0，border属性
其他隐藏：transparent
梯形:
宽100px border属性
三边隐藏：transparent
椭圆：
border-radius:100%