全局属性值 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;
}