css 易忘知识点学习总结

331 阅读6分钟

全局属性值 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 盒子模型的范围包括 marginborderpaddingcontent,并且 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;
}