2020.02.17--02.21日H5学习分享
Posted hyt970328
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了2020.02.17--02.21日H5学习分享相关的知识，希望对你有一定的参考价值。
PC端宽高自适应：
宽度设置：不设置宽度或设置width：100%；（显示状态：块状元素跟随父元素宽度变化）
高度设置：1 - 不设置高度或设置height：auto；（显示状态：高度被内容撑开。弊端：内容较少时网页高度偏小）
2 - 设置最小高度：min-height：；（显示状态：当内容超出最小高度时，容器被内容撑开，否则容器保持最小高度）
注：低版本浏览器（例：IE6浏览器不支持min-height，且会把height解析成最小高度）
解决办法：用过滤器下划线 _ 属性：属性值；（只有IE6认识此过滤器）
min-height：300px；
_height:300px;
解决高度塌陷：
（子元素浮动，父元素没有添加高度，父元素会出现高度塌陷）
1 - 给父元素添加overflow：hidden；（溢出隐藏，触发了BFC，弊端：会隐藏掉定位在当前元素以外的内容）
2 - 在浮动元素下添加空元素，并添加css样式clear：both；（清除浮动，弊端：空元素会造成代码冗余）
3 - 给塌陷的元素添加伪对象选择器 （万能清除法）：:after{ content: "."; /*在元素后添加内容 . */
BFC及BFC触发条件
BFC：块级格式化上下文（独立渲染区），只有块级元素参与。（同属于一个BFC时的两个相邻box的margin会发生重叠，按最大值显示）
BFC触发条件：根元素html本身，float属性不为none时，position为absolute或fixed，overflow：hidden。
BFC应用：1 - 解决高度塌陷 --- 添加overflow：hidden触发BFC
2 - 解决两个相邻盒子的margin重叠 --- 给其中一个元素添加父元素，让她们不属于同一个BFC
3 - BFC区域不会与浮动的盒子重叠（例：自适应两栏布局，双飞燕布局）
<style>
CSS3属性
一 文本阴影：
text-shadow：属性值1（水平方向位置），属性值2（垂直方向位置），属性值3（阴影大小），属性值4（阴影颜色）
二 CSS3渐变
1- 线性渐变：background：linear-gradient（direction，color-stop1，color-stop2...）
direction：方向位置，默认为to bottom，即从上至下
a：单一方向渐变：to left 到左侧（to right，to top，to bottom）
b：对角渐变：to left top 到左上角
c：角度渐变：30 deg （30度角）
2- 径向渐变（必须加浏览器前缀）：background：radial-gradient（center，shape，size，star-color...last-color）
center参数:渐变点位置（left bottom 左下角，也可添加像素）
大小：farthest-side 最远边
farthest-corner 最远角
closest-corner 最近角
closest-side 最近边
3- 重复性线性渐变：repeating-linear-gradient
4- 重复性径向渐变：repeating-radial-gradient
注：浏览器前缀：-webkit- 谷歌前缀 ，-moz-火狐前缀 ，-ms-IE前缀 , -o-欧鹏前缀
过渡属性：必须通过鼠标划过触发
1- transition-property：属性值1 参与过渡的属性值
2- transition-duration：属性值2 过渡的持续时间
3- transition-delay：属性值3 延迟过渡时间
4- transition-timing-function： 属性值4 动画类型
简写：transition：属性值1（需要参与过渡的属性 all 能支持的都会过渡变换），属性值2（过渡的时间，s秒，ms毫秒） ，
属性值3（延迟的时间，s秒，ms毫秒），属性值4（动画类型：匀速linear，匀加速，匀减速）
以上是关于2020.02.17--02.21日H5学习分享的主要内容，如果未能解决你的问题，请参考以下文章