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|%;

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

before,after中的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;

display, opacity, visibility

display:none--隐藏之后不占位置，不会被子元素继承，父元素都不存在了，子元素也不会显示出

visibility:hidden--隐藏后占据位置，会被子元素继承，通过设置子元素visibility:visible来显示子元素

opacity:0--隐藏后占据位置，会被子元素继承，但是不能设置子元素opacity:0来重新显示

flex

使用flex布局遇到一个问题：当flex子元素里的子元素的宽度过大，超出flex父元素时，设置flex:1并不能限制flex子元素的尺寸 不太知道底层原理，经过试验发现，若父级不设置宽度，那宽度就由子元素撑出，会超出父级

解决方案： 第一种: 父级设置min-width：0；
第二种: 父级设置overflow: hidde/auto;

其他

Scale：即使缩放后还是会占用原来的大小
position absolute：设置border sizing之后，包括padding，但不包括border
em：若自身没有设置字体大小，依据父元素，若设置则计算为font-size*em
padding百分比：按照父元素的宽度计算
table：设置height相当于min-height，会被内容撑开

盒模型

标准 w3c 盒子模型的范围包括 margin、border、padding、content，并且 content部分不包含其他部分

延伸：box-sizing

• content-box：默认值，总宽度 = margin + border + padding + width
• border-box：盒子宽度包含 padding 和 border，总宽度 = margin + width
• inherit：从父元素继承 box-sizing 属性

BFC

块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

IE下为 Layout，可通过 zoom:1 触发

触发条件:

• 根元素
• position: absolute/fixed
• display: inline-block / table
• float 元素
• ovevflow !== visible

规则:

• 属于同一个 BFC 的两个相邻 Box 垂直排列
• 属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
• BFC 中子元素的 margin box 的左边， 与包含块 (BFC) border box的左边相接触 (子元素 absolute 除外)
• BFC 的区域不会与 float 的元素区域重叠
• 计算 BFC 的高度时，浮动子元素也参与计算
• 文字层不会被浮动层覆盖，环绕于周围

应用:

• 阻止margin重叠
• 可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个div都位于同一个 BFC 区域之中)
• 自适应两栏布局
• 可以阻止元素被浮动元素覆盖

水平居中方案

方案一：text-align + inline-block

<div id="parent1">
	<div class="child">水平居中</div>
</div>

#parent1{
	text-align: center;
	background:#ddd;
	margin-bottom:20px;
}
#parent1 .child{
	display: inline-block;
	background:#666;
	color:#fff;
}

方案二：margin：0 auto

<div id="parent2">
	<div class="child">水平居中</div>
</div>

#parent2{
	text-align: center;
	background:#ddd;
	margin-bottom:20px;
}
#parent2 .child{
	display: table;
	margin: 0 auto;
	background:#666;
	color:#fff;
}

#方案三：absolute+transform)

---

<div id="parent3">
	<div class="child">水平居中</div>
</div>

#parent3{
	position: relative;
	background:#ddd;
	margin-bottom:20px;
}
#parent3 .child{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	background:#666;
	color:#fff;
}

#方案四：justify-content

---

<div id="parent4">
	<div class="child">水平居中</div>
</div>

#parent4{
	display: flex;
	justify-content: center;
	background:#ddd;
	margin-bottom:20px;
}
#parent4 .child{
	margin:0 auto;
	background:#666;
	color:#fff;
}

垂直居中方案

方案一： 利用 line-height 实现垂直居中

• 这种方法适用于单行文本垂直居中,如果文本内容太长，出现了换行，换行后的内容会溢出

<div id="example1">
    单行文字垂直居中
</div>

#example1 {
    height: 100px;
    line-height: 100px;
    background: #161616;
    color: #fff;
    width: 200px;
}

#方案二 利用 display: table 实现垂直居中

---

<div id="example2">
    <div class="inner">块区域垂直居中</div>
</div>

#example2 {
    height: 100px;
    background: #161616;
    color: #fff;
    width: 400px;
    overflow: hidden;
    display: table;
			margin-bottom:20px;
}
#example2 .inner{
    display: table-cell;
    vertical-align: middle;
    height: 50px;
    background:#999;
}

#方案三 margin 填充 这种方法需要知道内外容器的大小

---

<div id="example3">
    <div class="inner">块区域垂直居中</div>
</div>

#example3 {
    height: 100px;
    background: #161616;
    color: #fff;
    width: 400px;
    overflow: hidden;
			margin-bottom:20px;
}
#example3 .inner{
    margin-left: auto;
    margin-right: auto;
    margin-top: calc((100px - 50px)/2);
    height: 50px;
    background:#999;
}

#方案四：经典 absolute 布局上下文垂直居中

---

<div id="example4">
    <div class="inner">块区域垂直居中</div>
</div>

#example4 {
    width: 400px;
    height: 100px;
    background: #161616;
    color: #fff;
    position: relative;
		margin-bottom:20px;
}
#example4 .inner{
    height: 50px;
    width: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -25px;
    margin-left: -100px;
    background:#999;
}

#方案五：absolute+transform

---

<div id="example5">
    <div class="inner">块区域垂直居中</div>
</div>

#example5 {
    width: 400px;
    height: 100px;
    background: #161616;
    color: #fff;
    position: relative;
	margin-bottom:20px;
}
#example5 .inner{
    position: absolute;
    left: 50%;
    top: 50%;
    background: #999;
    transform: translateX(-50%) translateY(-50%);
}

#方案六 利用margin：auto 居中

---

<div id="expample6">
    <div class="inner">Content here</div>
</div>

#expample6 {
    width: 400px;
    height: 100px;
    background: #eee;
    position: relative;
		margin-bottom:20px;
}

#expample6 .inner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 50px;
    width: 70%;
    background: #aaa;
    color:#222;
}

#方案七 利用 Flex布局 居中

---

<div id="expample7">
    <div class="inner">Content here</div>
</div>

#expample7 {
    width: 400px;
    height: 100px;
    background: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
}

#expample7 .inner {
    height: 50px;
    width: 70%;
    background: #aaa;
    color:#222;
}