深入前端面试题-Css

小白踩坑
192 阅读13分钟
1 CSS盒子模型

(1) 盒子模型

一个盒子由四个部分组成：content(width+height)、padding、border、margin

在CSS中，盒子模型可以分成：

  • W3C 标准盒子模型
  • IE 怪异盒子模型

默认情况下，盒子模型为W3C 标准盒子模型

(1) 标准盒子模型

  • 标准盒子模型，是浏览器默认的盒子模型

  • 标准盒子模型 = margin、border、padding、content

  • content(width+height) 只是内容宽高，不包含 padding 和 border值

  • 即 content = width + height

(2) IE 怪异盒子模型

  • 怪异盒子模型 也是 = margin、border、padding、content

  • 标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。

  • 即 content = width + height + border + pading

(3) box-sizing

  • CSS 中的 box-sizing 属性定义了引擎应该如何计算一个元素的总宽度和总高度

  • content-box 默认值，元素的 width/height 不包含padding，border，与标准盒子模型表现一致

  • border-box 元素的 width/height 包含 padding，border，与怪异盒子模型表现一致

  • inherit 指定 box-sizing 属性的值，应该从父元素继承

2 CSS选择器有哪些？优先级？哪些属性可以继承？

(1) 属性选择器常

  • id选择器（#box），选择id为box的元素
  • 类选择器（.one），选择类名为one的所有元素
  • 标签选择器（div），选择标签为div的所有元素
  • 后代选择器（#box div），选择id为box元素内部所有的div元素
  • 子选择器（.one>one_1），选择父元素为.one的所有.one_1的元素
  • 相邻同胞选择器（.one+.two），选择紧接在.one之后的所有.two元素
  • 群组选择器（div,p），选择div、p的所有元素

(1.1) 属性选择器常——使用频率低的选择器

  • 伪类选择器
:link ：选择未被访问的链接
:visited：选取已被访问的链接
:active：选择活动链接
:hover ：鼠标指针浮动在上面的元素
:focus ：选择具有焦点的
:first-child：父元素的首个子元素
  • 伪元素选择器
:first-letter ：用于选取指定选择器的首字母
:first-line ：选取指定选择器的首行
:before : 选择器在被选元素的内容前面插入内容
:after : 选择器在被选元素的内容后面插入内容

-属性选择器

[attribute] 选择带有attribute属性的元素
[attribute=value] 选择所有使用attribute=value的元素
[attribute~=value] 选择attribute属性包含value的元素
[attribute|=value]：选择attribute属性以value开头的元素

(2) 优先级

  • 内联 > ID选择器 > 类选择器 > 标签选择器

  • 内联样式的优先级最高，如果外部样式需要覆盖内联样式，就需要使用!important

(3) 继承属性

  • 关于继承属性，可以分成：

    • 字体系列属性
    • 文本系列属性
    • 元素可见性visibility
    • 表格布局属性
    • 列表属性
    • 光标属性`cursor：箭头可以变成需要的形状

  • 继承中比较特殊的几点：

    • a 标签的字体颜色不能被继承
    • h1-h6标签字体的大下也是不能被继承的

  • 无 继承的属性

    • display
    • 文本属性：vertical-align、text-decoration
    • 盒子模型的属性：宽度、高度、内外边距、边框等
    • 背景属性：背景图片、颜色、位置等
    • 定位属性：浮动、清除浮动、定位position等
    • 生成内容属性：content、counter-reset、counter-increment
    • 轮廓样式属性：outline-style、outline-width、outline-color、outline
    • 页面样式属性：size、page-break-before、page-break-after
3 em/px/rem/vh/vw

(1) px 绝对单位，页面按精确像素展示

所谓像素就是呈现在我们显示器上的一个个小点，每个像素点都是大小等同的，所以像素为计量单位被分在了绝对长度单位中

(2) em 是相对长度单位，相对于当前对象内文本的字体尺寸

  • 如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（1em = 16px）

    • 为了简化 font-size 的换算，我们需要在css中的 body 选择器中声明font-size= 62.5%，这就使 em 值变为 16px*62.5% = 10px

    • 这样 12px = 1.2em, 10px = 1em, 也就是说只需要将你的原来的px 数值除以 10，然后换上 em作为单位就行了

  • 特点：

    • em 的值并不是固定的
    • em 会继承父级元素的字体大小
    • em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸
    • 任意浏览器的默认字体高都是 16px

(3) rem，相对单位，相对的只是HTML根元素font-size的值

  • 同理，如果想要简化font-size的转化，我们可以在根元素html中加入font-size: 62.5%
html {font-size: 62.5%;  } /*  公式16px*62.5%=10px  */

  • 这样页面中1rem=10px、1.2rem=12px、1.4rem=14px、1.6rem=16px;使得视觉、使用、书写都得到了极大的帮助

  • 特点：

    • rem单位可谓集相对大小和绝对大小的优点于一身
    • 和em不同的是rem总是相对于根元素，而不像em一样使用级联的方式来计算尺寸

(4) vh、vw

vw ，就是根据窗口的宽度，分成100等份，100vw就表示满宽，50vw就表示一半宽。（vw 始终是针对窗口的宽），同理，vh则为窗口的高度

这里的窗口分成几种情况：

  • 在桌面端，指的是浏览器的可视区域
  • 移动端指的就是布局视口

(5) 总结

  • px：绝对单位，页面按精确像素展示

  • em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值

  • rem：相对单位，可理解为root em, 相对根节点html的字体大小来计算

  • vh、vw：主要用于页面视口大小布局，在页面布局上更加方便简单

4 BFC

(1) BFC

  • 我们在页面布局的时候，经常出现以下情况：

    • 这个元素高度怎么没了？
    • 这两栏布局怎么没法自适应？
    • 这两个元素的间距怎么有点奇怪的样子？
    • ......

归根究底是元素之间相互的影响，导致了意料之外的情况，这里就涉及到BFC概念

  • BFC（Block Formatting Context），即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则

  • BFC目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素

(2) 触发条件

触发BFC的条件包含不限于：

  • 根元素，即HTML元素
  • 浮动元素：float值为left、right
  • overflow值不为 visible，为 auto、scroll、hidden
  • display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
  • position的值为absolute或fixed

(3) 应用场景

(3.1) margin 纵向重叠

  • margin 纵向重叠问题
    • 相邻元素 margin-top 和 margin-bottom 会发生重叠
    • 空白内容

      也会发重叠
  • margin 负值问题
    • margin-top 和 margin-left 负值，元素向上、向左移动
    • margin-right 负值，右侧元素左移，自身不受影响
    • margin-bottom 负值，下方元素上移移，自身不受影响

解决办法：

  • 同一个BFC的俩个相邻的盒子的margin会发生重叠
  • 可以在p外面包裹一层容器，并触发这个容器生成一个BFC，那么两个p就不属于同一个BFC，则不会出现margin重叠
<style>
  .wrap {
      overflow: hidden;// 新的BFC
  }
  p {
      color: #f55;
      background: #fcc;
      width: 200px;
      line-height: 100px;
      text-align:center;
      margin: 100px;
  }
</style>
<body>
    <p>Haha</p>
    <div class="wrap">
        <p>Hehe</p>
    </div>
</body>

(3.2) 清除内部浮动

<style>
  .par {
      border: 5px solid #fcc;
      width: 300px;
  }

  .child {
      border: 5px solid #f66;
      width:100px;
      height: 100px;
      float: left;
  }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

image.png

而BFC在计算高度时，浮动元素也会参与，所以我们可以触发.par元素生活才能BFC，则内部浮动元素计算高度时候也会计算

.par {
    overflow: hidden;
}

image.png

5 flexbox（弹性盒布局模型）

(1) flex

Flexible Box 简称 flex，意为”弹性布局”，可以简便、完整、响应式地实现各种页面布局

(2) 容器属性

容器属性有：

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

image.png

image.png

image.png

image.png

image.png

image.png

(3) 容器成员属性

容器成员属性如下：

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

image.png

image.png

image.png

image.png

image.png

image.png

6 CSS3新增了哪些新特性

(1) 选择器

image.png

(2) 新样式

边框

css3新增了三个边框属性，分别是：

  • border-radius：创建圆角边框
  • box-shadow：为元素添加阴影
  • border-image：使用图片来绘制边框

box-shadow

设置元素阴影，设置属性如下：

  • 水平阴影
  • 垂直阴影
  • 模糊距离(虚实)
  • 阴影尺寸(影子大小)
  • 阴影颜色
  • 内/外阴影

其中水平阴影和垂直阴影是必须设置的

背景

新增了几个关于背景的属性，分别是background-clip、background-origin、background-size和background-break

background-clip

用于确定背景画区，有以下几种可能的属性：

  • background-clip: border-box; 背景从border开始显示
  • background-clip: padding-box; 背景从padding开始显示
  • background-clip: content-box; 背景显content区域开始显示
  • background-clip: no-clip; 默认属性，等同于border-box

通常情况，背景都是覆盖整个元素的，利用这个属性可以设定背景颜色或图片的覆盖范围

background-origin

当我们设置背景图片时，图片是会以左上角对齐，但是是以border的左上角对齐还是以padding的左上角或者content的左上角对齐? border-origin正是用来设置这个的

  • background-origin: border-box; 从border开始计算background-position
  • background-origin: padding-box; 从padding开始计算background-position
  • background-origin: content-box; 从content开始计算background-position

默认情况是padding-box，即以padding的左上角为原点

background-size

background-size属性常用来调整背景图片的大小，主要用于设定图片本身。有以下可能的属性：

  • background-size: contain; 缩小图片以适合元素（维持像素长宽比）
  • background-size: cover; 扩展元素以填补元素（维持像素长宽比）
  • background-size: 100px 100px; 缩小图片至指定的大小
  • background-size: 50% 100%; 缩小图片至指定的大小，百分比是相对包 含元素的尺寸

background-break

元素可以被分成几个独立的盒子（如使内联元素span跨越多行），background-break 属性用来控制背景怎样在这些不同的盒子中显示

  • background-break: continuous; 默认值。忽略盒之间的距离（也就是像元素没有分成多个盒子，依然是一个整体一样）
  • background-break: bounding-box; 把盒之间的距离计算在内；
  • background-break: each-box; 为每个盒子单独重绘背景

文字

word-wrap

语法：word-wrap: normal|break-word

  • normal：使用浏览器默认的换行
  • break-all：允许在单词内换行

text-overflow

text-overflow设置或检索当当前行超过指定容器的边界时如何显示，属性有两个值选择：

  • clip：修剪文本
  • ellipsis：显示省略符号来代表被修剪的文本

text-shadow

text-shadow可向文本应用阴影。能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色

text-decoration

CSS3里面开始支持对文字的更深层次的渲染，具体有三个属性可供设置：

  • text-fill-color: 设置文字内部填充颜色
  • text-stroke-color: 设置文字边界填充颜色
  • text-stroke-width: 设置文字边界宽度
7 实现单行／多行文本溢出的省略样式

(1) 实现 单行 溢出的省略样式

涉及的css属性有：

  • text-overflow：规定当文本溢出时，显示省略符号来代表被修剪的文本
  • white-space：设置文字在一行显示，不能换行
  • overflow：文字长度超出限定宽度，则隐藏超出的内容
p{
  overflow: hidden;
  line-height: 40px;
  width:400px;
  height:40px;
  border:1px solid red;
  text-overflow: ellipsis;
  white-space: nowrap;
}

(2) 实现 多行 溢出的省略样式

多行文本溢出的时候，可以分为两种情况：

  • 基于高度截断
  • 基于行数截断

(2.1) 基于高度截断

伪元素 + 定位

核心的css代码结构如下：

  • position: relative：为伪元素绝对定位
  • overflow: hidden：文本溢出限定的宽度就隐藏内容）
  • position: absolute：给省略号绝对定位
  • line-height: 20px：结合元素高度,高度固定的情况下,设定行高, 控制显示行数
  • height: 40px：设定当前元素高度
  • ::after {} ：设置省略号样式
<style>
  .demo {
    position: relative;
    line-height: 20px;
    height: 40px;
    overflow: hidden;
  }
  .demo::after {
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0 20px 0 10px;
  }
</style>

<body>
    <div class='demo'>这是一段很长的文本</div>
</body>

这种实现具有以下优点：

  • 兼容性好，对各大主流浏览器有好的支持
  • 响应式截断，根据不同宽度做出调整

一般文本存在英文的时候，可以设置word-break: break-all使一个单词能够在换行时进行拆分

(2.2) 基于行数截断

纯css实现也非常简单，核心的css代码如下：

  • -webkit-line-clamp: 2：用来限制在一个块元素显示的文本的行数，为了实现该效果，它需要组合其他的WebKit属性）
  • display: -webkit-box：和1结合使用，将对象作为弹性伸缩盒子模型显示
  • -webkit-box-orient: vertical：和1结合使用 ，设置或检索伸缩盒对象的子元素的排列方式
  • overflow: hidden：文本溢出限定的宽度就隐藏内容
  • text-overflow: ellipsis：多行文本的情况下，用省略号“…”隐藏溢出范围的文本
<style>
  p {
    width: 400px;
    border-radius: 1px solid red;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
<p>
    这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
    这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
</p>

可以看到，上述使用了webkit的CSS属性扩展，所以兼容浏览器范围是PC端的webkit内核的浏览器，由于移动端大多数是使用webkit，所以移动端常用该形式

需要注意的是，如果文本为一段很长的英文或者数字，则需要添加word-wrap: break-word属性

8 回流跟重绘

(1) 回流跟重绘

  • 回流：布局引擎会根据各种样式计算每个盒子在页面上的大小与位置

  • 重绘：当计算好盒模型的位置、大小及其他属性后，浏览器根据每个盒子特性进行绘制

(2) 回流 触发时机

回流这一阶段主要是计算节点的位置和几何信息，那么当页面布局和几何信息发生变化的时候，就需要回流，如下面情况：

  • 添加或删除可见的DOM元素
  • 元素的位置发生变化
  • 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
  • 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代
  • 页面一开始渲染的时候（这避免不了）
  • 浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）

(3) 重绘 触发时机

触发回流一定会触发重绘

一些其他引起重绘行为：

  • 颜色的修改
  • 文本方向的修改
  • 阴影的修改
9 响应式设计

image.png

avatar
文章
阅读
粉丝