响应式,多列布局

响应式布局 :网页兼容多个终端,用户体验
     Media Query 媒体查询:响应布局的一种方式
   全程百分比布局
语法:@meidia mediatype and|not|only (media feature){
          CSS-Code;
     @media 定义媒体查询
     mediatype :all所有设备;print打印机;screen电脑屏幕,平板电脑,智能手机
                 speech 屏幕阅读器等发声设备
     
     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%

转载于:https://www.cnblogs.com/develop-/p/6972994.html

你可能感兴趣的:(响应式,多列布局)