CSS知识点整理
# CSS 样式权重
引入样式优先级
内联样式 > 内部样式表 > 外部样式表
选择器权重
!important > id > class | 属性 > 标签 > *
选择器 | 权重 |
---|---|
* | 0 |
标签、伪元素 | 1 |
class、属性、伪类 | 10 |
id | 100 |
内联样式 | 1000 |
!important | 正无穷 |
# CSS 书写顺序
- 显示属性:display,positon,float,clear
- 自身属性:width,height,margin,padding,border,background
- 文本属性:color,font,text-align,vertical-align,whitespace
- 其他
# link和@import的区别
- @import是css提供的语法规则,只可以引入样式表,link是html标签,除了css文件,还可以引入其他文件
- 加载顺序不同,link引入的文件会被同时加载,而@import引入的文件会在页面加载完毕后再进行加载
- 兼容性问题,@import是css2.1的语法,故只可在 IE5+ 才能识别;link 标签作为 HTML 元素,不存在兼容性问题。
- DOM可控性的区别,可以通过JS操作DOM插入link标签来改变样式,由于dom是基于文档的,没法使用@import的方式插入样式
# 字体
浏览器在设置字体大小的时候,设置的是字符的高度,字符的宽度则是根据字体的设计比例自动进行缩放,以保持整个字形的整体设计不变
简写
font-style font-weight font-size line-height font-family
font: italic bold 12px/20px "微软雅黑"
1em = 10px
浏览器默认字体大小为 16px,设置根节点字体大小为 62.5%,即 1em = 10px,可以使用这个基数来方便的设置大小。
html {
font-size: 62.5%; /* 16px * 62.5% = 10px */
}
p {
font-size: 1.6em; /* 1em = 10px; 1.6em = 16px */
}
# 常见场景
# 文本截断和显示省略号
单行文本截断和显示省略号
div {
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}
多行文本截断
{
...
width: ...;
height: ...;
overflow-y: hidden;
}
# 文本垂直居中
- 单行文本:行高等于容器高度
- 由于table单元格默认垂直居中,据此实现容器内多行文本垂直居中
div {
display: table;
width: 100px;
height: 100px;
font-size: 12px;
border: 1px solid #000;
}
span {
display: table-cell;
vertical-align: middle;
}
<div>
<span>这是一段文字</span>
</div>
# 布局
# 绝对定位中的两栏设计
- 左/右侧绝对定位
- 内容区域margin-left/right:左/右侧宽度;
# BFC
内容节选于 左鹏飞:BFC原理剖析
Block Fomatting Context = block-level box + Formatting Context
# Box
box 即盒子模型。
# Block-Level Box
即块级元素,display 属性为 block, list-item, table 的元素,会生成 block-level box,并且参与 block fomatting context。
# Inline-Level Box
即行内元素,display 属性为 inline, inline-block, inline-table 的元素,会生成 inline-level box,并且参与 inline formatting context。
# Formatting context
Formatting context是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系、相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context(简称IFC)。
CSS2.1 中只有BFC和IFC, CSS3中还增加了G(grid)FC和F(flex)FC。
# BFC 的生成
BFC是一块渲染区域,那这块渲染区域到底在哪,它又是有多大,这些由生成BFC的元素决定,CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC。
- 根元素
- float的值不为none
- overflow的值不为visible
- display的值为inline-block、table-cell、table-caption
- position的值为absolute或fixed
display:table也认为可以生成BFC,其实这里的主要原因在于Table会默认生成一个匿名的table-cell,正是这个匿名的table-cell生成了BFC
# BFC的约束规则
- 内部的Box会在垂直方向上一个接一个的放置
- 垂直方向上的距离由margin决定。(完整的说法是:属于同一个BFC的两个相邻Box的margin会发生重叠(塌陷),与方向无关。)
- 每个元素的左外边距与包含块的左边界相接触(从左向右),即使浮动元素也是如此。(这说明BFC中子元素不会超出他的包含块,而position为absolute的元素可以超出他的包含块边界)
- BFC的区域不会与float的元素区域重叠
- 计算BFC的高度时,浮动子元素也参与计算
- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面元素,反之亦然
一个通俗的说法是,BFC就好比是孙悟空给唐僧画的一个庇护圈