网络日志

前端面试资料整理【css篇】

选择器

分类简单选择器: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;

左固定,右适应

待补充