CSS基础知识总结一

CSS盒子模型

css盒子模型分为标准盒子模型、IE盒子模型

标准盒子模型: content + padding + border + margin

IE盒子模型：content(包含了内容、padding、border) + margin

如何转换：

转换为标准盒子模型：box-sizing：content-box;

转换为IE合作模型：box-sizing: border-box;

默认就是标准盒子模型。

line-height与height

line-height是每一行文字的高，如果文字换行，整个盒子的高度会增大。(line-height＊行数)

height就是盒子的高度，为固定值。

CSS选择器以及优先级

内敛样式 1000

id选择器 100

类选择器、伪类选择器、属性选择器 10

标签选择器、元素选择器 1

注意事项：!important声明的优先级最高

如果优先级相同，后出现的生效

继承得到的优先级最低

样式表来源不同时，优先级顺序为：内敛样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式

CSS可继承与不可继承的属性

可继承： 一般和font字体、文本相关的属性可以继承。以及visibility、cursor可以继承，其他的一般不可继承

display的常见属性值及其作用

none: 元素不显示、不占位置，并且会在文档流中删除

block: 转换为块级元素，独占一行，可以设置宽高

inline-block：转换为行内块元素，不独占一行，可以设置宽高

inline: 转换为行内元素，不独占一行，设置宽高无效

inherit： 从父元素继承display的属性值

flex: 弹性盒子

隐藏元素的方法

display: none 渲染树不会渲染该对象、元素不在页面中占位置、不会响应绑定的监听事件

visibility:hidden 元素在页面中仍然占位置、但不会响应绑定的监听事件

opacity: 0 占位置、能响应绑定的监听事件

transform: scale(0, 0) 占位置、不会响应绑定的监听事件

z-index 设置负值

position: absolute 移除可视区域

link和@import的区别

link比@import先出现的，所以link的兼容性好于@import。

加载顺序有区别。先加载link（载入页面时就会加载）、@import会在页面完全载入之后才会加载

（link加载早于@import）