响应式，多列布局

响应式布局 ：网页兼容多个终端，用户体验

     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%