tscn1的博客

目录css属性属性的计算过程两个特殊的css属性 css属性 首先css的属性值，是从0到1的过程，浏览器会等一个标签的css属性值全部确认后，才能渲染出来。 属性的计算过程 属性的计算过程有4步。 确定声明值。参考样式表中（作者样式表和浏览器默认的样式表）没有冲突的声明，作为css的属性值。 层叠冲突。对样式表中有冲突的声明使用层叠规则，确定css属性值 层叠规则：1.重要性。2.特殊性。3.源次序 使用继承。对仍然没有值的属性，若可以继承，则继承父元素的属性值 使用默认值。对仍然没有值的属性，使

目录层叠浏览器处理规则1.比较重要性2.比较特殊性3.比较代码次序应用爱恨法则 层叠 声明冲突：同一个样式，多次作用到同一个元素 层叠：解决声明冲突的过程，是浏览器自动处理的 浏览器处理规则 有3个规则，若一个规则无法判定结果，那就继续看下一个规则。 1.比较重要性 重要性从高到低： 开发者样式表中!important样式 不建议使用，覆盖样式不方便 开发者样式表普通样式 浏览器默认样式表 2.比较特殊性 看选择器，总体规则：选择器选中的范围越窄，越特殊 具体规则：通过选择器，计算出一个4位数（x

flex弹性盒子触发弹性盒子写在父级上面的属性flex-directionflex-wrapflex-flowjustify-contentalign-itemsjustify-content和align-items的垂直水平居中align-contentflex子级上的属性orderalign-selfflex-growflex-basisflex-shrinkflex-basis和widthflex-shrink和flex-basis中间固定两边自适应利用flex流式布局圣杯布局 触发弹性盒子 只需要设

目录flex应用单行居中可动态增加的导航栏三栏布局，中间固定，两边自适应流式布局圣杯布局 flex应用 单行居中 <div class="wrapper"> <div class="content"></div> </div> ---------------------------------- *{ margin: 0; padding: 0; } .wrapper{ resize: both; overflow

text-shadow 基本使用 text-shadow:x y 阴影模糊大小 颜色; <div>TEXT SHADOW</div> -------------------------- *{ margin: 0; padding: 0; } div{ position: absolute; width: 700px; heigth: 100px; left: calc(50% - 350px); top: calc(50% - 50px); font-size: