标签:die 应用 条件 func 重叠 hidden 代码 property 水平
宽度设置:不设置宽度或设置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时的两个相邻box的margin会发生重叠,按最大值显示)
BFC触发条件:根元素html本身,float属性不为none时,position为absolute或fixed,overflow:hidden。
BFC应用:1 - 解决高度塌陷 --- 添加overflow:hidden触发BFC
2 - 解决两个相邻盒子的margin重叠 --- 给其中一个元素添加父元素,让她们不属于同一个BFC
3 - BFC区域不会与浮动的盒子重叠(例:自适应两栏布局,双飞燕布局)
<style>
text-shadow:属性值1(水平方向位置),属性值2(垂直方向位置),属性值3(阴影大小),属性值4(阴影颜色)
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,匀加速,匀减速)
标签:die 应用 条件 func 重叠 hidden 代码 property 水平
原文地址:https://www.cnblogs.com/hyt970328/p/12342896.html