前端面试准备--基础篇之CSS

时间 2019-11-07

标签前端面试准备基础 css 栏目快乐工作繁體版

原文原文链接

本文参照大神文章，也是本身复习准备面试的小笔记总结吧

文章主要内容：

1.盒模型
2.BFC
3.层叠上下文
4.居中布局
5.选择器优先级
6.清除浮动的方法
7.link和@import的区别
8.css预处理器
9.css动画
10.rem布局的原理
11.如何实现多端适配？
复制代码

盒模型

盒模型分类：

理论上分为四个盒子，content box、padding box、border box、margin box，可是实际上padding-box 只有 Firefox 曾经支持过，如今也不支持了，margin box更惨从未支持过

计算方式：

content box：盒模型的宽高 = content的宽高
border box：盒模型的宽高 = content的宽高 + padding + border复制代码

css切换方式：

能够经过box-sizing 设置，content-box为标准模型、border-box为IE模型

经过js获取盒模型对应的宽高

1. dom.style.width/height --- 对应 content box
只能获取dom元素内联样式设置的宽高，经过外联css文件或者style标签中的样式这只的，都没法获取
2. dom.currwntStyle.width/height
页面渲染完成后的结果，无论哪一种方式都能获取，仅IE支持
3. window.getComputedStyle(dom).width/height
原理同2，兼容性更好些
4. dom.getBoundingClientRect().width/height
根据元素在视窗中的绝对位置来获取宽高
5. dom.offsetWidth/offsetHeight --- 对应border box
   dom.clientWidth/clientHeight --- 对应padding box
   dom.scrollWidth/scrollHeight --- 对应padding box, 可是包含溢出的尺寸复制代码

BFC

什么是BFC?

BFC即Block Formatting Context，”块级格式化上下文“即块盒所使用的渲染模型。

其实根据盒子的不一样类型，分为Block Formatting Context（BFC）和 Inline Formatting Context(IFC)

这里讲清三个盒子的概念：

我看的时候也有点颠三观，以前一直觉得BFC的B就是块级元素的意思，可是发现和触发条件相冲突，才发现这里的B是块盒子

块级盒（block-level boxes）: 由块级元素构成的盒子，每一个块级元素至少会生成一个盒子，称为主要块级盒。好比li这样的元素，还会生成额外的盒子来防止项目符号。描述父元素和兄弟元素的关系。块容器盒（block containing boxes）: 指只包含其余块级盒的盒子，或生成行内格式化上下文的盒子，由今生成的盒子只包含行内盒。描述元素和后代元素的关系。块盒（block boxes）: 既是块级盒，又是块容器盒的盒子

什么是Formatting Context？

它是页面的一个独立的渲染区域，有一套渲染规则，决定子元素是如何定位的，以及和其余元素的关系。

BFC触发条件：

1. 根元素
2. float 不为none的元素
3. position: absolute/fixed 
4. display: inline-block/table/table-cell/table-caption/flex/inline-flex
5. 块级元素且overflow !== visible复制代码

BFC特性：

1. 属于同一个BFC的两个相邻的盒子垂直排列
2. 同一个BFC的两个相邻的盒子的margin发生重叠
3. BFC中的子元素的margin box的左边，与包含块的border box 的左边相接触(子元素 absolute 除外)
4. BFC元素不会和float元素重叠
5. BFC的高度包含float子元素的高度
6. 文字层不会被浮动层覆盖，环绕于周围
7. BFC就是页面伤的一个隔离的独立容器，容器内的子元素和外部的元素不会不想影响复制代码

应用：

阻止margin重叠：给其中一个盒子添加父元素，而且触发BFC
清除内部浮动（将浮动元素外边包裹一个BFC,使其对外部元素不形成影响）
解决浮动致使的高度坍塌问题（BFC的高度包含浮动元素的高度）
阻止被浮动元素覆盖（造成BFC, 与浮动元素的BFC互不影响）

层叠上下文

触发层级的条件：

position
css3的属性：flex、transform、opacity、filter、will-change、-webkit-overflow-scrolling
根层级上下文（html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>stack</title>
</head>
<body>
    <div class="background">background</div>
    <div class="z-index-minus">z-index-minus</div>
    <div class="block">block</div>
    <div class="float">float</div>
    <div class="inline">inline</div>
    <div class="z-index-0">z-index-0</div>
    <div class="z-index-puls">z-index-puls</div>
</body>
<style>
div {
    position: absolute;
    width: 1000px;
    height: 100px;
}
.background {
    background: red;
}
.z-index-minus {
    width: 900px;
    background: green;
    z-index: -100;
}
.block {
    width: 800px;
    background: gold;
    display: block;
}
.float {
    width: 700px;
    background: grey;
    float: left;
}
.inline {
    width: 600px;
    display: inline;
    background: rebeccapurple;
}
.z-index-0 {
    width: 500px;
    z-index: 0;
    background: teal;
}
.z-index-puls {
    width: 400px;
    z-index: 100;
    background: orange;
}
</style>
</html>复制代码

层级优先级以下图展现：

注：子元素层级再高也超不过父元素的限制。

居中布局

水平居中

text-align:center
margin: 0 auto;
flex+ justify-content: center
absolute + transform

垂直居中

line-height: height
flex + align-item: center
absolute + transform
display:table

水平垂直居中

absolute + transform
flex + justify-content + align-item

选择器优先级

!important > 行内样式 > #id > .class > tag > * > 继承 > 默认

清除浮动的方法

在浮动元素末尾添加:after伪类标签设置clear:both
父级元素构造BFC

link 和 @import 的区别

link 不只能引入外部的css，还能够定义RSS(做用：展现选定数据)和定义Rel( 规定当前文档与被连接文档/资源之间的关系)等做用；@import 只能用于加载css
都用于引入css的时候，页面加载顺序也不同：link，只要解析到link,页面会同步加载css，而@import 须要等页面加载完才会加载
link 能够经过js 动态添加，可是@import不行

css预处理器（sass/less/stylus/postcss）

这些都是类css语言，经过webpack编译能够转成浏览器可读的css，而且赋予css更强大的功能。

经常使用的功能：

文件分割：将大文件切割成小文件，方便维护
选择器嵌套：更容易看清层级关系
变量：更容易使视觉风格统一，便于总体风格的替换
循环语句：sass举例

@for $i from 1 to 10 {
 .border-#{$i} {
　　border: #{$i}px solid blue;
　}
}

复制代码

条件语句：sass举例

@if lightness($color) > 30% {
　background-color: #000;
} @else {
　background-color: #fff;
}复制代码

自动前缀: webpack编译经过postcss插件实现自动加前缀
mixin复用：简单举例Less中的使用方法，详细讲解能够参考文章

1. 简单的mixin
.a,#b{
  color: rebeccapurple;
}
.mixin-class{
  .a();
}
.mixin-id{
  #b();
}
2. 带参数的mixin
.border-radius(@radius) { // 设置默认值： .border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}
#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);
}

复制代码

css动画

transition -- 过渡动画

transition: property duration timing-function delay;复制代码

animation -- 能够定义每一帧的动画

animation: keyframe-name duration timing-function delay iteration-count direction;复制代码

transform -- 静态的

translate、scale、rotate、skew、opacity等属性函数复制代码

rem布局的原理

概念：

em：相对于父元素的单位
rem：css的一个相对单位，是相对于html根元素的大小的单位，实质上是等比缩放。
vw,vh: 屏幕宽度/ 100，屏幕高度/100

原理：

通常都是基于宽度的，将屏幕宽度平分红100份，转换成百分比布局。可是谷歌浏览器支持最小字体是12px，因此能够将屏幕分红10份来计算。

将html元素的字体大小 = 屏幕宽度 / 100

document.documentElement.style.fontSize = document.documentElement.clientWidth / 100 + 'px'; 复制代码

2. 根据设计图的尺寸编辑预处理function

$ue-width: 640; /* ue图的宽度 */

@function px2rem($px) {
  @return #{$px/$ue-width*100}rem;
}

p {
  width: px2rem(100);
}复制代码

rem是万能的吗？ rem是一种弹性盒布局，和响应式布局不一样。

rem不适用字体的大小；因为设置了根元素的字体大小，会影响全部没有设置字体大小的元素，因此能够在body上修正，经过媒体查询设置字体大小。

字体大小能够根据媒体查询和em来实现：

@media screen and (min-width: 320px) {
    body {font-size: 16px}
}
@media screen and (min-width: 481px) and (max-width:640px) {
    body {font-size: 18px}
}
@media screen and (min-width: 641px) {
    body {font-size: 20px}
}
 
div {font-size: 1.2em}复制代码

若是须要区分不一样dpr下的效果，能够用css作适配：

.selector {
    width: 2rem;
    border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
    font-size: 14px;
}
[data-dpr="2"] .selector {
    font-size: 28px;
}
[data-dpr="3"] .selector {
    font-size: 42px;
}复制代码

须要js先给html设置data-dpr属性，上边的css选择器才能使用

document.documentElement.setAttribute('data-dpr', window.devicePixelRatio);复制代码

一些基本概念

物理像素：又称设备像素，他是显示器中的最微小的物理部件。
设备独立像素：密度无关像素，计算机坐标系统中的一个点，这个点表明一个能够由程序员适用的虚拟像素。
设备像素比（dpr）= 物理像素 / 设备独立像素

window.devicePixelRatio复制代码

4. meta标签：主要讲的是viewport的meta标签，主要告诉浏览器如何规范的渲染页面，在移动端页面下，meta标签设置以下：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">复制代码

如何实现多端适配？

在布局方面采用flex布局和rem布局相结合+rem原理，不适用于字体大小