前端面试 —— CSS（一）

已于 2022-02-04 19:19:56 修改
阅读量362 收藏
点赞数
分类专栏： 面试 文章标签： css 面试
于 2021-10-06 10:52:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44184425/article/details/120611545
版权

画一条 0.5px 的直线

.line {
  height: 1px;
  width: 200px;
  background-color: red;
  transform: scaleY(0.5);
  transform-origin: 50% 100%;
}

盒模型的宽度如何计算？

盒模型是指网页元素的结构。当指定一个元素的宽高时，便设置了元素内容的尺寸——任何内边距（padding）、边框（border）、外边距（margin）都会基于他叠加，这是基础的盒模型，也就是 box-sizing: content-box
给元素设置 box-sizing: border-box 会改变盒模型，使其获得更好的可预测性。这时指定宽高会把 padding 包括进来。这也是 IE 默认的配置，IE8+ 支持使用box-sizing 进行切换

/* offsetWidth 的值是多少 */
#div {
    width: 100px;
    padding: 10px;
    border: 1px solid #ccc;
    margin: 10px;
}

关于元素更多几何属性，可以参考 这个

margin 纵向重叠的问题

相邻元素的 margin-top 和 margin-bottom 会发生重叠，空白内容的 <p></p> 也会重叠

<style>
    p {
        font-size: 16px;
        line-height: 1;
        margin-top: 10px;
        margin-bottom: 15px;
    }
</style>
<!-- AAA 和 BBB 之间的距离是多少？ 15 -->
<p>AAA</p>
<p></p>
<p></p>
<p></p>
<p>BBB</p>

margin 负值的问题

负值的 margin 在外界看来他的宽减少了 xxx 大小

  • margin-top 和 margin-left 负值，元素向上向左移动
  • margin-right 和 margin-bottom 负值，右侧/下方元素左移/上移，自身不受影响
  • 都会影响文档流

BFC 的理解和应用

概念：块级格式化上下文（Block format context）。一块独立的渲染区域，内部元素的渲染有自己的一套规则，不会影响外部元素

形成条件：

  • 非 visible 的 overflow
  • 非 none 的 float
  • display: inline-block、inline-flex、inline-grid、table-cell、table-caption、flex或grid
  • position: absolute / fixed

float 布局的问题（圣杯、双飞翼）

<!-- 圣杯布局 padding + 定位 -->
<style>
  * {
    margin: 0;
  }

  .wrap {
    padding: 0 200px;
    overflow: hidden;
  }
  
  .center {
    float: left;
    width: 100%;
    height: 200px;
    background-color: #f00;
    box-sizing: border-box;
  }

  .left {
    float: left;
    position: relative;
    left: -200px;
    width: 200px;
    height: 200px;
    background-color: #0f0;
    margin-left: -100%;
  }

  .right {
    float: left;
    position: relative;
    right: -200px;
    width: 200px;
    height: 200px;
    background-color: #00f;
    margin-left: -200px;
  }

  .others {
    height: 100px;
    background-color: #ccc;
  }
</style>

<body>
  <div class="others">
    <h1>我是前面的元素</h1>
  </div>
  <div class="wrap">
    <div class="center">中间中间中间中间中间中间中间</div>
    <div class="left">左边左边左边左边左边左边左边</div>
    <div class="right">右边右边右边右边右边右边右边</div>
  </div>
  <div class="others">
    <h1>我是后面的元素</h1>
  </div>
</body>

<!-- 双飞翼 子元素 + margin  -->
<style>
  * {
    margin: 0;
  }

  .wrap {
    overflow: hidden;
  }
  
  .center {
    float: left;
    width: 100%;
    height: 200px;
    background-color: #f00;
  }

  .child {
    margin: 0 200px;
  }

  .left {
    float: left;
    width: 200px;
    height: 200px;
    background-color: #0f0;
    margin-left: -100%;
  }

  .right {
    float: left;
    width: 200px;
    height: 200px;
    background-color: #00f;
    margin-left: -200px;
  }

  .others {
    height: 100px;
    background-color: #ccc;
  }
</style>

在这里插入图片描述

flex 画骰子

.one {
	justify-content: center;
	align-items: center;
}

.two {
	justify-content: space-between;
	align-items: center;
}

.three {
	justify-content: space-between;
}
.three > .dot:nth-child(2) {
	align-self: center;
}
.three > .dot:nth-child(3) {
	align-self: flex-end;
}

.four {
    display: flex;
    justify-content: space-between;
  }
.four .inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 比四点多一个这个 */
.five.inner:nth-child(2) {
    align-self: center;
}

 .box6 {
    display: flex;
    justify-content: space-between;
 }
 .box6 .inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
 }

在这里插入图片描述

居中对齐实现方式

文字水平 text-align（泰嗯赖），块级元素用 margin
垂直居中定位好，负 margin，transform 都别跑
还有 calc（凯Q）和 auto，高级用法不能少
伪元素表格也很巧，就是毛病有点遭

/* 文字居中对齐 */
text-align: center;

line-height: 50px;
height:50px;

/* 块元素居中 */
margin: auto;

/* 定位元素居中(width: 100px;height: 200px;) */
position: absolute;
left: 50%;
margin-left: -50px;

top: 50%;
margin-top: -100px;

/* CSS3方法 - 定位元素居中(width: 100px;height: 200px;) */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)

/* 定位元素居中(width: 100px;height: 200px;) */
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

/* 伪元素 */
span {
	vertical-align: middle;
}
.wrap::before {
	content: '';
	display: inline-block;
	vertical-align: middle;
	height: 100%;
}

/* table-cell */
.wrap {
	display: table;
}
span {
	display: table-cell;
	vertical-align: middle;
}

line-height 继承问题

  • 如果是具体数值，如 30px，则继承该值
  • 如果是比例，如 2 / 1.5，则继承该比例（先继承，再计算）
  • 如果是百分比，如 200%，则继承计算出来的值（先计算，再继承）

rem 是什么？

相对长度单位，相对于根元素（<html></html>），常用于响应式布局

如何实现响应式？

  • media-query，根据不同的屏幕宽度设置根元素 font-size
  • rem，基于根元素的相对单位
@media only screen and (max-width: 374px) {
    /* iphone5 或者更小的尺寸，以 iphone5 的宽度（320px）比例设置 font-size */
    html {
        font-size: 86px;
    }
}
@media only screen and (min-width: 375px) and (max-width: 413px) {
    /* iphone6/7/8 和 iphone x */
    html {
        font-size: 10px;
    }
}
@media only screen and (min-width: 414px) {
    /* iphone6p 或者更大的尺寸，以 iphone6p 的宽度（414px）比例设置 font-size */
    html {
        font-size: 110px;
    }
}

body {
    font-size: 0.16rem;
}

网页视口尺寸：

  • window.screen.height ==> 屏幕高度
  • window.innerHeight ==> 网页视口高度（去掉上下状态栏）
    • vw/vh 以此为依据
  • document.body.clientHeight ==> body 高度

背景图片居中

.screen {
	background: url('path/to/image') no-repeat center
}

CSS 样式优先级

内联样式 1,0,0,0
ID 0,1,0,0
类、伪类、属性 0,0,1,0
标签、伪元素 0,0,0,1

外边距合并

原因：两个嵌套块级元素，父元素如果没有上补白和上边框，那么它的上边距会和它的文档流中的的第一个子元素的上边距重叠，取两者较大的值。

  1. 为父元素定义上边框 border: 1px solid transparent
  2. 为父元素添加内边距 padding: 1px
  3. *父元素添加 overflow: hidden

阴影

盒子阴影：
- h-shadow 水平阴影
- v-shadow 垂直阴影
- blur 模糊距离
- spread 尺寸
- color 颜色
- inset 是否内阴影

.box {
	box-shadow: 10px 10px 10px 2px #ccc;
}

文字阴影：
- h-shadow
- v-shadow
- blur
- color

.textarea {
	text-shadow: 10px 10px 10px #ccc;
}

行元素和块元素特点

行元素：

  • 水平排列，超出部分换行
  • 上下 margin 无效，设置宽高无效
  • padding 不参与空间计算
  • 设置行高有效，等同于给父元素设置

块元素

  • 独占一行，宽度自动填满父元素

行内块元素

  • 水平排列，排不下直接换行
  • 宽度由内容撑开，元素之间有空白缝隙，设置上一级元素 font-size 为 0 能抵消

清除浮动

/* 清除浮动修改版，能包含所有的外边距 */
.clearfix::before,
.clearfix::after {
    display: table;
    content: " ";
}
.clearfix::after {
    clear: both;
}

CSS属性书写顺序

  1. 布局定位：display / position / float / clear / visibility / overflow
  2. 盒子属性：width / height / margin / padding / border / background
  3. 文本属性：color / font / text-decoration / text-align / vertical-align / break-word
  4. 其他属性：content / cursor / border-radius / box-shadow / text-shadow

position 定位

  • static，默认定位
  • relative，相对于元素原先位置定位。标准流
  • absolute，没祖先元素或祖先没定位，以Document为依据；有定位以其为参考点。脱标
  • fixed，固定于浏览器可视区位置。脱标
  • sticky，默认行为像 relative；当页面滚出目标区域时，行为像 fixed。标准流

定位特殊特性

  • 行内元素添加绝对定位，可以设定宽高
  • 块级元素添加绝对定位，宽高由内容撑开（类似inline-block）
  • 绝对/固定定位（脱标的盒子）不会触发外边距合并

元素显示与隐藏

  1. display: none 隐藏元素且不占文档流
  2. visibility: hidden 隐藏元素，占用文档流
  3. opacity: 0 隐藏元素，占用文档流
  4. overflow: hidden/auto/scroll
    如果有定位的盒子，请慎用overflow:hidden 因为它会隐藏多余的部分

display: none
（1）DOM 结构：浏览器不会渲染 display 属性为 none 的元素，不占据空间；
（2）事件监听：无法进行 DOM 事件监听；
（3）性能：动态改变此属性时会引起重排，性能较差；
（4）继承：不会被子元素继承，毕竟子类也不会被渲染；
（5）transition：transition 不支持 display。

visibility: hidden
（1）DOM 结构：元素被隐藏，但是会被渲染不会消失，占据空间；
（2）事件监听：无法进行 DOM 事件监听；
（3）性 能：动态改变此属性时会引起重绘，性能较高；
（4）继 承：会被子元素继承，子元素可以通过设置 visibility: visible; 来取消隐藏；
（5）transition：transition 支持 visibility。

opacity: 0
（1）DOM 结构：透明度为 100%，元素隐藏，占据空间；
（2）事件监听：可以进行 DOM 事件监听；
（3）性 能：提升为合成层，不会触发重绘，性能较高；
（4）继 承：会被子元素继承,且，子元素并不能通过 opacity: 1 来取消隐藏；
（5）transition：transition 支持 opacity。

CSS 画三角

<style>
  .triangle {
    width: 0;
    border-width: 40px 20px;
    border-style: solid;
    border-color: transparent;
    border-bottom-color: #00f;
    border-right-color: #00f;
    /* 为了照顾兼容性 */
    line-height: 0;
    font-size: 0;
  }
</style>

<body>
  <div class="triangle"></div>
</body>

溢出文本省略号显示

/* 单行文本 */
h1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 多行文本 */
h1 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

CSS3新特性（IE9+）

选择器

  • 属性选择器 ^$*
  • 伪类选择器 (一个是先看序号，一个是先看类型)
    • nth-child(n) n可以是数字，关键字(even偶数，odd奇数)和公式(n+3, -n+3)
    • nth-of-type(n)
  • 伪元素选择器（和伪类一起的话先伪类再伪元素 .box:hover::before）
    • ::before
    • ::after

盒子模型(box-sizing)

  • content-box 盒子大小为 width + padding + border
  • border-box 盒子大小为 width

其他特性（了解）

  • filter: func(arg)
  • calc() 声明CSS属性值时执行一些计算

过渡

  • transition: property time curve start
    • property css属性
    • time 花费时间(单位秒)
    • curve 运动曲线
    • start 延时

JavaScript 相关

选择器 document.querySelector()

存储

  • localStorage（本地存储）
  • sessionStorage（临时存储）
localStorage.setItem('name', 'thinc')
const name = localStorage.getItem('name')
localStorage.removeItem('name')
localStorage.clear()

SEO（前提条件）

  • title标签
  • description标签
  • keywords标签

LOGO SEO优化

  1. logo里面放h1标签
  2. h1里放链接a
  3. 链接a里放文字，但文字不显示（text-indent: -9999px; overflow: hidden 或 font-size: 0）
  4. 给链接title属性

网络中使用最多的图片格式有哪些

JPEG、GIF、PNG，最流行的是 JPEG，可以把文件压缩到最小。

  • jpeg 有损压缩
  • png 支持透明效果

link 和 import 引入 CSS 区别？

  1. 用法：link 是 HTML 提供的标签，不仅可以加载 CSS，还能定义 RSS、rel 等属性；@import 是 CSS 提供的语法规则，只能导入样式表。
  2. 加载顺序：link 标签引入的 CSS 和页面同时加载；@import 引入的 CSS 会等到页面被全部下载完再被加载（所以网速慢的时候可能会出现闪烁）。
  3. 兼容性：link 标签作为 HTML 元素，不存在兼容性问题；@import 是 CSS2.1 提出的语法，只有在 IE5+ 才能识别。
  4. DOM 可控：可以通过 JS 操作 DOM 插入 link 标签；而 @import 是一种语法，不能用 JS 操作插入。

实现一个遮罩层

注意两个地方：

  1. 遮罩元素应该放在 body 元素中的最后面，这样能保证无法操作被遮挡元素
  2. 对话框需要阻止冒泡，不应该去执行父元素的事件
<style>
  * {
    margin: 0;
    padding: 0;
  }

  button {
    cursor: pointer;
  }

  .mask {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.4);
  }

  .modal {
    position: absolute;
    top: calc(50% - 150px);
    left: calc(50% - 150px);
    width: 300px;
    height: 300px;
    background-color: #fff;
  }
</style>

<body>
  <button class="show-mask">显示遮罩层</button>
  <div class="mask">
    <div class="modal">
      <h1>对话框</h1>
    </div>
  </div>
</body>
<script>
  const btn = document.querySelectorAll('.show-mask')[0]
  const mask = document.querySelectorAll('.mask')[0]
  const modal = document.querySelectorAll('.modal')[0]

  btn.addEventListener('click', () => {
    mask.style.display = 'block'
  })

  mask.addEventListener('click', () => {
    mask.style.display = 'none'
  })

  modal.addEventListener('click', (e) => {
    e.stopPropagation()
  })
</script>

flex

属性简写：flex-grow、flex-shrink、flex-basis
flex-grow: 规定该项在 flex 容器中分配剩余空间的相对比例
flex-shrink: 指定 flex 元素的收缩规则
flex-basis: 规定了元素的初始大小

重排和重绘

浏览器解析渲染机制：

  1. 解析 HTML，生成 DOM 树；
  2. 解析 CSS，生成 CSSOM 树；
  3. 将 DOM 树和 CSSOM 树结合，生成渲染树；
  4. （重排）根据生成的渲染树，计算元素的几何位置；
  5. （重绘）根据渲染树和得到的几何位置，计算元素的绝对像素；
  6. 将像素发给 GPU，展示在页面上

触发机制

  • 重排：元素位置发生变动；计算浏览器窗口尺寸
  • 重绘：颜色、阴影等的变化
shaun-shao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决父元素的伪元素覆盖子元素
polary_的博客
05-25 1689
为了完成以下记事本样式 用父元素(footer)的伪元素来写，阴影结果子元素(span) clear点击不到 给伪元素设置 pointer-events:none; 就可以解决 <footer> <span>{{list.length}} item left</span> <span class="clear" @click="reAll">clear</span> </footer> 一开始打算给伪元素的设置z-ind
WEB前端面试——常见CSS知识点
06-30
WEB前端面试——常见CSS知识点 CSS是一种标记语言，用于描述网页的样式和布局。以下是常见的CSS知识点： 一、CSS盒子模型 CSS盒子模型分为标准盒模型（content-box）和怪异盒模型（border-box）。标准盒模型的...
解决伪类元素‘after‘或者‘before‘遮挡父元素，导致鼠标移入或点击等事件不生效的问题
haogemr的博客
07-27 1685
对一个元素设置 pointer-events: none，能让浏览器在处理鼠标操作时，忽视掉这个元素的存在，直接「穿透」到点击区域背后的元素上。该元素上的鼠标事件不会被响应，例如 click、mousein、mousedown 事件。该元素上的鼠标效果不会被处理，例如 hover 效果。伪元素不能添加事件，因为他们不是DOM元素，无法响应。如果对显示没有影响的话，可以这么做。意味着直接在这个元素上做鼠标操作时。
关于伪类覆盖指定类相的问题
goodgirl1991的专栏
03-23 602
工作需要，使按钮在一定条件下改变背景色，边框色等样式。可是发现添加类后，该类样式总是被覆盖。 课题提交 在这里，我想要实现的功能是，当isSubmit&&!isShowApproval条件不满足时，为链接添加disableClick类。 .disableClick{background-color:grey} 可是却发现样式是被覆盖的。 经查找后，发现原来是
css控制元素不被覆盖,CSS元素伪不覆盖子元素样式
weixin_39681486的博客
08-04 481
所以我想要样式锚元素包含其他html元素。该基地的代码是：HTML：CSS元素伪不覆盖子元素样式titleLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim自举类不打扰...
html绝对定位重叠,绝对定位元素被遮挡的解决方法技术分享
热门推荐
weixin_35980011的博客
05-30 1万+
css如何避免绝对定位覆盖其他元素？css 固定定位造成两个DIV重叠，如何清理？绝对定位的元素盖住下方的元素时，为什么把下方的p因为relative不脱离文档流，在原有位置大小还在那，你再定位，他还是有个位置在原来的地方，所以不会被覆盖，而position是脱离文档流的，它直接飘在文档流外，在文档流内没有大小，你放在文档流之外的肯定会覆盖文档流，建议定位少用。绝对定位一个元素，不要遮挡到同级的元...
前端面试之CSS总结
01-29
由于最近在准备前端方面的面试，所以对自己平常工作中用到的地方做出一些总结。该篇是CSS部分(上)，有许多地方叙述的并不是十分详细，只是大致的描述一下，给自己提供一个知识轮廓。本篇中主要描述了CSS中的基础部分...
2022最新Web前端经典面试试题及答案——CSS篇.docx
07-08
"2022最新Web前端经典面试试题及答案——CSS篇" 本资源摘要信息将对 CSS 相关知识点进行详细的解释和总结。 一、BFC（Block Formatting Context）的理解及作用 BFC 是 Block Formatting Context 的缩写，指的是...
前端智库，前端面试必备手册
最新发布
04-11
为了帮助广大前端开发者更好地应对面试挑战，我们精心整理了一份全面而实用的前端面试资源——前端智库。 前端智库不仅是一个面试的宝典，更是一个涵盖了前端技术方方面面的知识库。它集合了HTML、CSS、JavaScript...
阿里大厂内部前端面试题库
10-11
阿里大厂内部前端面试题库——算法面试真题（18题） 既是高频真题，也是一套前端进阶学习宝典。几乎满足各级前端工程师的需求，内容涵盖了Html、Css、Javascript、vue、React、小程序、算法等等。实战代码清晰，解析...
盒子模型的知识点汇总
weixin_42834788的博客
07-19 512
一、盒子模型 1.什么是CSS盒子模型? CSS盒子模型仅仅是一个形象的比喻, HTML中所有的标签都是盒子 结论 1.在HTML中所有的标签都可以设置 宽度/高度 == 指定可以存放内容的区域 内边距 == 填充物 边框 == 手机盒子自己 外边距 == 盒子和盒子之间的间隙 <style> span,a,b,strong{ di...
前端uniapp自定义tabbar，在iPoneX上，tabbar有个盒子用了绝对定位position: absolute被遮住问题，env(safe-area-inset-bottom)无效
FUFCY的博客
06-08 1368
env(safe-area-inset-bottom)无效
块元素居中方式
gklcsdn的博客
12-10 756
<!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-...
css盒子遮罩层显示与隐藏
fighting_dream的博客
01-31 1648
实现效果要如图显示： 素材：两张图片 步骤一：制作一个盒子，记住它的尺寸和大小 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子遮罩层的显示与隐藏</tit
用react解决1px问题
yezi153的博客
12-01 167
1.创建公共样式 hairLine.scss 核心代码 // src/assets/styles/hairline.scss @mixin scale-hairline-common($color, $top, $right, $bottom, $left) { content: ''; position: absolute; display: block; z-index: 1; top: $top; right: $right; bottom: $bottom..
6. css盒模型+画一条0.5px的线
qq_43456781的博客
10-09 1782
6. css盒模型+画一条0.5px的线 （1）说一下css盒模型 简介：就是用来装页面上的元素的矩形区域。CSS中的盒子模型包括IE盒子模型和标准的W3C盒子模型。 box-sizing(有3个值哦)：border-box,padding-box,content-box. 标准盒子模型： IE盒子模型： 区别：从图中我们可以看出，这两种盒子模型最主要的区别就是width的包含范围，在标准的盒子模型中，width指content部分的宽度，在IE盒子模型中，width表示content+padding+
使用伪元素after 解决底部 遮挡的内容
chuchongshen5446的博客
05-14 2116
在元素后面加入 ：after { content:''. height:50 px display:block } 转载于:https://my.osc...
css面试高频题目1
egffyty的博客
10-26 131
1、盒子模型 https://www.imooc.com/article/68238 w3c盒子模型（标准） width = content、 盒子总宽 = content（width） + padding + border + margin box-sizing：content-box （代表使用w3c盒子模型） ie盒子模型（怪异） width= content + padding + border 盒子总宽 =width + margin box-sizing：border-box（代表使用ie盒子模
伪元素做进度条
阿毛的博客
10-16 580
111111
前端面试html和css部分笔试题
07-28
当然，我可以帮你回答一些前端面试中关于HTML和CSS的笔试题。以下是一些常见的问题： 1. 请解释一下HTML和CSS的作用。 HTML（超文本标记语言）用于创建网页的结构和内容，而CSS（层叠样式表）用于控制网页的样式和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值