web前端CSS3学习笔记2017.7.1

十二 多列---ie10
-webkit-/-moz-
属性：
column-count:3;规定元素应该被分割的列数
column-gap:50px/5%;设置列之间的间隙
column-rule: color style width;设置列之间的宽度、样式和颜色规则
column-span:1/all;规定元素横跨的列数，一般我们都写在标题标签上面
十三 用户界面
网页布局中有两种处理方式：渐进增强、优雅降级

属性：
box-sizing，允许以确切的方式定义适应某个区域的具体内容，写在子元素上面
content-box,父容器的宽度和高度受子容器的content/border/margin/padding值的影响
border-box,父容器的宽度和高度受子容器的content/margin值的影响,不受border/padding值的影响，同时向内收敛

十四 多媒体查询---ie9
针对不同的媒体类型可以定制不同的样式规则。
响应式布局：设计一套方案，即可以适用于移动端也可以适用于pc端

语法：
@media not/only 媒体类型 and (表达式){

css代码
}

媒体类型：
all 用于所有多媒体类型设备
print 用于打印机
screen 用于电脑屏幕，平板，智能手机等
speech 用于屏幕阅读器
not:用来排除掉某些特定设备的
only:用来指定某种特别的媒体类型
表达式：
max-width/min-width/max-height/min-height...

************************************************************
字体单位
px:相对长度单位。像素px是相对于显示器屏幕分辨率而言的
em:相对长度单位。相对当前对象内文本的字体尺寸。
如果当前文本的字体尺寸没有被人设置，则相对于浏览器的默认字体大小尺寸
任意浏览器的默认字体大小都是16px.谷歌浏览器的最小支持的字体大小为12px

如果没有设置浏览器的默认字体大小，那么
1em=16px;
10px=0.625em

body{
font-size:62.5%;
}
1em=10px

rem:相对于根元素（即html元素）font-size计算值的倍数----ie9

html{
font-size:62.5%;
}
1rem=10px;

************************************************************
ViewPort
我们的界面在移动端设备上是，我们的用户往往会对界面的内容进行缩放等操作，这时候我们往往需要使用ViewPort以此来限制我们的用户的某些操作
<meta name="viewport" content=""/>
width="device-width";宽度等于当前设备的宽度
initial-scale:1.0;初始的缩放比例
minimum-scale:1.0;允许用户缩放的最小比例
maximum-scale:1.0;允许用户缩放的最大比例
user-scalable:是否允许用户可以手动缩放用户界面（默认为no）
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
设置屏幕宽度为设备宽度，禁止用户手动缩放

移动端的布局建议：使用的字体单位rem padding margin