H5--第六课

Posted 2020-08-25 卡尔也好玩

怪异盒模型：盒子的总宽度和高度是包含内边距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 / 动画结束时触发