H5--第六课

Posted 卡尔也好玩

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了H5--第六课相关的知识,希望对你有一定的参考价值。

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

以上是关于H5--第六课的主要内容,如果未能解决你的问题,请参考以下文章

微搭低代码零基础入门课(第六课)

Django 第六课 模板继承

第六课——UIDynamicAnimator

Golang✔️走进 Go 语言✔️ 第六课 循环语句

Golang✔️走进 Go 语言✔️ 第六课 循环语句

Python 基础 2022 最新第六课 Numpy