CSS 基础知识

选择器及其优先级

选择器	格式	权重
id 选择器	#id	100
类选择器	.classname	10
属性选择器	a[ref="xx"]	10
伪类选择器	li:last-child	10
标签选择器	div	1
伪元素选择器	li:after	1
相邻兄弟选择器	h1+p	0
子选择器	ul>li	0
后代选择器	li a	0
通配符	*	0

其他规则：

1. !important 优先级最高
2. 相同优先级，后面覆盖前面
3. 继承得到的样式优先级最低
4. 内联样式 > 内部样式 > 外部样式 > 浏览器自定义样式 > 浏览器默认样式

继承性

字体：

• font-family
• font-weight
• font-size
• font-style

文本：

• text-align
• text-indent
• text-transform
• line-height
• word-spacing
• letter-spacing
• color

可见性：

• visibility

列表布局：

• list-style

光标属性：

• cursor

隐藏元素的方法

• display: none 不占据位置，不响应事件，会造成重排
• visibility: hidden 占据位置，不响应事件， 会造成重绘
• opacity: 0
• position: absolute
• z-index: -x
• clip/clip-path 占据位置，不响应事件
• transform: scale(0, 0) 占据位置，不响应事件

盒模型

margin -> border -> padding -> content

标准盒模型

box-sizing: content-box;

只有 content 算在 height、width 以内

IE 盒模型

box-sizing: border-box;

border、padding、content 都算在 height、width 以内

处理文本溢出

/*单行文本溢出*/
* {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*多行文本溢出*/
* {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

两栏布局的实现

左侧浮动

.outer {
    height: 100px;
}

.left {
    float: left;
    width: 200px;
    background: tomato;
}

.right {
    margin-left: 200px;
    width: auto;
    background: gold;
}

清除浮动

.left {
    width: 100px;
    height: 200px;
    float: left;
    background: red;
}

.right {
    height: 300px;
    background: blue;
    /*触发 BFC*/
    overflow: hidden;
}

flex 布局

.outer {
    display: flex;
    height: 100px;
}

.left {
    width: 200px;
    background: tomato;
}

.right {
    flex: 1;
    background: gold;
}

绝对与相对定位

.outer {
    position: relative;
    height: 100px;
}

.left {
    position: absolute;
    width: 200px;
    height: 100px;
    background: tomato;
}

.right {
    margin-left: 200px;
    background: gold;
}

三栏布局的实现

绝对与相对定位

.outer {
    position: relative;
    height: 100px;
}

.left {
    position: absolute;
    width: 100px;
    height: 100px;
    background: tomato;
}

.center {
    margin-left: 100px;
    margin-right: 200px;
    height: 100px;
    background: lightblue;
}

.right {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 100px;
    background: gold;
}

浮动

.outer {
    height: 100px;
}

.left {
    float: left;
    width: 100px;
    height: 100px;
    background: tomato;
}

.center {
    height: 100px;
    margin-left: 100px;
    margin-right: 200px;
    background: lightgreen;
}

.right {
    float: right;
    width: 200px;
    height: 100px;
    background: gold;
}

flex 布局

.outer {
    display: flex;
    height: 100px;
}

.left {
    width: 100px;
    background: tomato;
}

.right {
    width: 100px;
    background: gold;
}

.center {
    flex: 1;
    background: lightgreen;
}

圣杯布局

双飞翼布局