怪异盒模型:盒子的总宽度和高度是包含内边距padding和边框border宽度在内的,盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;
多列布局:不管想让一段文本呈多少列显示,你需要的只是两个属性:column-count
和 column-width
。
06-css3-盒模型(下),过渡和动画的监听事件
resize: 配合overflow:auto一起使用,允许盒子调整大小
none 不允许调整大小
both 水平垂直都可以缩放
horizontal 只有水平方向可以缩放
vertical 只有垂直方向可以缩放
box-reflect:a b c; 倒影
a 倒影方位:above 上、below 下、left 左、right 右
b 倒影与对象的间隔 像素/百分比
c 遮罩层:
none 无遮罩层
url 图片地址
线性渐变/径向渐变
box-sizing:盒模型形式
content-box 标准和模型(宽度=设定宽+padding+border+内容)
border-box 怪异盒模型(设定总宽不变,内容看情况缩减)
columns:a b; 多列排布(火狐要加兼容前缀)
a 每列宽度 分解属性 column-width
b 列数 可缺省 分解属性 column-count
column-gap:间隙的大小,初始值和font-size一样大
column-rule:列与列之间的边框,值类似于border
column-span:设置给某个子元素,是否跨列 none(默认)/all
/*只兼容谷歌*/
-webkit-column-break-before:所有元素之前是否另起一列 auto不规定/always总是/avoid避免
-webkit-column-break-after:所有元素之后是否另起一列 auto不规定/always总是/avoid避免
关于禁止选中
user-select:none; 火狐加兼容:-moz-user-select:none; IE加兼容:-ms-user-select:none;
IE9及之前onselectstart='return false';
伪元素 ::selection 可以修改选中内容的样式
过渡/动画相关的监听事件
transitionend / 过渡结束时触发
animationstart / 动画开始时触发
animationiteration / 动画重复执行时触发
animationend / 动画结束时触发