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

551 阅读8分钟
本文参照 大神文章 ,也是自己复习准备面试的小笔记总结吧
文章主要内容:
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就是页面伤的一个隔离的独立容器,容器内的子元素和外部的元素不会不想影响
  • 应用:
  1. 阻止margin重叠:给其中一个盒子添加父元素,并且触发BFC
  2. 清除内部浮动(将浮动元素外边包裹一个BFC,使其对外部元素不造成影响)
  3. 解决浮动导致的高度坍塌问题(BFC的高度包含浮动元素的高度)
  4. 阻止被浮动元素覆盖(形成BFC, 与浮动元素的BFC互不影响)

层叠上下文

  • 触发层级的条件:
  1. position
  2. css3的属性:flex、transform、opacity、filter、will-change、-webkit-overflow-scrolling
  3. 根层级上下文(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>
层级优先级如下图展示:
注: 子元素层级再高也超不过父元素的限制。

居中布局

  • 水平居中
  1. text-align:center
  2. margin: 0 auto;
  3. flex+ justify-content: center
  4. absolute + transform
  • 垂直居中
  1. line-height: height
  2. flex + align-item: center
  3. absolute + transform
  4. display:table
  • 水平垂直居中
  1. absolute + transform
  2. 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布局的原理

概念:
  1. em:相对于父元素的单位
  2. rem:css的一个相对单位,是相对于html根元素的大小的单位,实质上是等比缩放。
  3. vw,vh: 屏幕宽度/ 100, 屏幕高度/100
原理:
  1. 一般都是基于宽度的,将屏幕宽度平分成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);
一些基本概念
  1. 物理像素:又称设备像素,他是显示器中的最微小的物理部件。
  2. 设备独立像素:密度无关像素,计算机坐标系统中的一个点,这个点代表一个可以由程序员适用的虚拟像素。
  3. 设备像素比(dpr)= 物理像素 / 设备独立像素
window.devicePixelRatio
4. meta标签:主要讲的是viewport的meta标签,主要告诉浏览器如何规范的渲染页面,在移动端页面下,meta标签设置如下:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

如何实现多端适配?

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