共计 1842 个字符,预计需要花费 5 分钟才能阅读完成。
选择器
分类
简略选择器:id 选择器、类选择器、标签选择器、
组合选择器:后辈选择器(空格)、子选择器(>)、兄弟选择器(+)、通用选择器(~)
伪类(:hover)
伪元素(::before, ::firt-child,::not())
属性选择器
ps. 兄弟选择器(+)与通用选择器(~):“+”指“本人”相邻兄弟,“~”会利用所有兄弟
优先级
!important 最高
内联 1000 分
id 选择器 100 分
类选择器、属性选择器、伪类 10 分
标签选择器、组合选择器、伪元素 1 分
优先级依照累加计算,数值越高优先级越高。
<!-- 优先级 -->
<style>
p {color: red;}
.p {color: grey;}
div > p {color: green;}
</style>
<div>
<p class="p">1111</p>
</div>
<p class="p">222</p>
<!-- 兄弟选择器与通用选择器 -->
<style>
div~p {color: red;}
div+p {color: green;}
</style>
<body>
<div>111</div>
<p>1</p>
<p>2</p>
<p>3</p>
</body>
IFC/BFC
IFC
英文全程 inline formating context,行内格局上下文。
特点:
- 自左向右排列
- 由行高
line-height
决定高度,即通过 inline-level box 计算,然而具备多个 inline-level box 的 IFC,排版通过 vertical-align 决定。 - 当长度过大时,会主动换行,一行是一个 inline-level box(即行级盒模型)。
ps. 换行的相干设置
表明如何断句:word-break: break-all 间接换行 | break-word 依据单词,遇到空格换行 | keep-all 不换行 | normal 浏览器默认行为
表明是否断句:word-wrap: break-word | normal
表明空格断句:white-space: normal 浏览器默认行为 | pre-wrap 同 html 编辑换行雷同 | nowrap 不换行 | pre-line 剔除空格,保留换行 | pre 同<pre>
BFC
英文 block formating context,块级格局上下文。
特点:
- 一个 BFC 占一行,垂直方向排列,造成的是 block-level box(即块级盒模型)
- BFC 外部隔离
- 处在同一个 BFC 下,相互影响,产生 margin 重叠
- 触发 BFC 的形式有:浮动、设置 overflow、设置 margin、相对定位、固定定位、display: flex
盒模型
规范模式:设置了 <!DOCTYPE >
,标识 html
版本
怪异模式:未设置 <!DOCTYPE >
盒模型:content、padding、border、margin 的构造
盒模型计算形式能够通过 css3 中 box-sizing: border-box | content-box; 设置计算形式,其中 content-box,是计算 content 来示意长宽,border-box 是将 content + padding + border,一起计算至长宽中,相似于 IE6 的怪异模式。
其余
margin 双边距
次要体现在两个方面:
- 父与子边距重叠,即子无奈与父元素拉开边距
- 兄弟边距重叠
父与子革除边距重叠:
- 父容器减少非 overflow: visible;,例如 overflow: scroll | hidden;
- 父容器减少 padding 或 border
- 父容器浮动
- 父容器设置 position: absolute;
- 父容器设置 display: flex
兄弟革除边距重叠:
- 设置浮动
- 父设置 display: flex
原理是,通过申明成 BFC 依照 BFC 规定布局。
margin 塌陷
父元素应用了浮动导致。
z-index
border/bacground < z-index<0 < block-level < float < inline-level < z-index:0 < z-index>0
flex
应用 flex 能做那些布局?(待补充)
@media
待补充
transform
有那些性能?(待补充)
常见的布局
垂直居中,程度居中
html
<div class="father">
<div class="child"></div>
</div>
css
// 相对定位
.father {
width: 500px;
height: 500px;
}
.child {
width: 50px;
height: 50px;
}
// 相对定位
// flex
// transform:
// margin: 0 auto;
左固定,右适应
待补充