css 学习总结

CSS全局属性值inherit，initial，unset，revert比较

inherit是继承的意思。

initial初始值，css初始值。

unset表示不固定值，如果该属性是默认继承属性，该值等同于 inherit，如果该属性是非继承属性，该值等同于 initial。

revert关键字可以让当前元素的样式还原成浏览器内置的样式，注意，是还原到浏览器内置的默认样式，而不是CSS属性原本的初始值。

// 例如希望一个按钮完全使用浏览器默认的UI，则可以这么设置：
button {
    all: revert;
}
复制代码

图片自适应

display: block;
height: atuo;
max-width: 100%;
复制代码

BEM( 降低CSS选择器权重，提高整个CSS编码的效率和体验)

命名约定的模式如下：

.block {} 代表了更高级别的抽象或组件
.block__element{} 代表.block的后代
.block--modifier {} 代表.block的不同状态或不同版本
复制代码

OOCSS(通过创建可复用的CSS模块以提高性能)

面向对象的CSS有两个原则：

• 独立的结构和样式，通过对基础对象扩展类名，从而达到基础对象的可重用性
• 独立的容器和内容，好处是，内容插入到任何容器中都可以

margin

margin重叠:
-水平边距永远不会重合
-垂直边距可能在特定的框之间重合
margin百分比：按照父元素的宽度计算
复制代码

pointer-events

对于浏览器来说，只有auto和none两个值可用

auto ——效果和没有定义pointer-events属性相同，鼠标不会穿透当前层。
none ——元素永远不会成为鼠标事件的target（目标）。
       当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素
复制代码

border-radius

border-radius: length|% length|% length|% length|% / 1-4 length|%;
复制代码

“/” 前的四个数值表示圆角的水平半径，后面四个值表示圆角的垂直半径

content

content: "普通字符串";
content: attr(父元素的html属性名称);
content: url(图片、音频、视频等资源的url);
/* 使用unicode字符集，采用4位16进制编码，但不同的浏览器显示存在差异，而且移动端识别度更差*/
content: "\21e0";
/* content的多个值可以任意组合，各部分通过空格分隔 */
content: "'" attr(title) "'";
/* 自增计数器，用于插入数字/字母/罗马数字编号 */
content: counter(<identifier>, <list-style-type>);
/* 以父附属元素的qutoes值作为content的值*/
content: open-quote | close-quote | no-open-quote | no-close-quote;
复制代码

其他

Scale：即使缩放后还是会占用原来的大小
position absolute：设置border sizing之后，包括padding，但不包括border
em：若自身没有设置字体大小，依据父元素，若设置则计算为font-size*em
padding百分比：按照父元素的宽度计算
复制代码