乐趣区

关于前端:前端面试资料整理css篇

jiezi

选择器

分类
简略选择器：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;

左固定，右适应

待补充

退出移动版