CSS基础篇

12343字约41分钟

2025-02-11

CSS盒模型，在不同浏览器的差异

查看答案

css 标准盒子模型

css盒子模型又称为框模型（Box Model），包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin） 几个要素。如下图：

在标准盒子模型中，元素的宽度（width）和高度（height）只包含内容区域（content）的大小，不包含内边距（padding）、边框（border）和外边距（margin）。元素实际占用的宽度和高度需要加上内边距、边框和外边距。计算公式如下：

实际大小 = content + border + padding + margin

IE盒子模型

IE盒子模型又称为IE盒模型（IE Box Model），包含了元素内容（content）、边框（border）、内边距（padding）、外边距（margin） 几个要素。如下图：

在IE盒子模型中，元素的宽度（width）和高度（height）包含了内容区域（content）、内边距（padding）和边框（border）的大小，但不包含外边距（margin）。元素实际占用的宽度和高度需要加上外边距。计算公式如下：

实际大小 = width + margin

CSS所有选择器及其优先级、使用场景，哪些可以继承，如何运用 @ 规则

详情

css选择器种类有哪些?

1. 元素选择器：选择指定元素的样式，例如：h1、p、div 等。
1. 类选择器：选择指定类名的元素的样式，例如：.classname。
1. ID选择器：选择指定ID的元素的样式，例如：#idname。
1. 属性选择器：选择指定属性的元素的样式，例如：[href]、[type="text"] 等。
1. 伪类选择器：选择指定状态的元素的样式，例如：:hover、:active 等。
1. 伪元素选择器：选择指定元素的特定部分的样式，例如：::before、::after 等。
1. 组合选择器：将多个选择器组合在一起，例如：div p、.classname#idname 等。
1. 通配符选择器：选择所有元素的样式，例如：*。
1. 多类选择器: 选择同时具有多个类名的元素。

.class1.class2 {
    background-color: lightgray;
}

否定选择器: 选择不满足指定条件的元素。

/* 选择所有不是p元素的元素 */
:not(p) {
    margin: 0;
}

CSS选择器优先级

选择器优先级由高到低分别为：

!important > 内联样式 > ID选择器 > 类选择器 > 伪类选择器 > 属性选择器 > 元素选择器 > 伪元素选择器 > 通配符选择器（* 应少用）> 浏览器自定义；

当比较多个相同级别的CSS选择器优先级时，它们定义的位置将决定一切。下面从位置上将CSS优先级由高到低分为六级：

1、位于标签里的中所定义的CSS拥有最高级的优先权。

2、第二级的优先属性由位于标签中的 @import 引入样式表所定义。

3、第三级的优先属性由标签所引入的样式表定义。

4、第四级的优先属性由标签所引入的样式表内的 @import 导入样式表定义。

5、第五级优先的样式有用户设定。

6、最低级的优先权由浏览器默认。

CSS哪些属性可以继承？

在CSS里，部分属性会自动从父元素传递给子元素，这就是属性的继承。下面是一些常见的可继承属性：

1. 字体属性：font-family、font-size、font-weight、font-style、font-variant、font-size-adjust、font-stretch、font-effect、font-emphasize、font-emphasize-position、font-emphasize-style、font-smooth。
1. 文本属性：text-indent、text-align、text-transform、letter-spacing、word-spacing、line-height、color、text-shadow、text-wrap。
1. 列表相关属性：list-style-type、list-style-image、list-style-position。
1. 表格相关属性：border-collapse、border-spacing、empty-cells、caption-side。
1. 元素可见性：visibility。
1. 光标属性：cursor。

需要注意的是，盒模型相关属性（像width、height、margin、padding、border）通常不会继承。若想强制某个属性继承，可以使用 inherit 关键字。

常用at规则及使用示例：

在CSS中，@ 规则（At-rules）是一种特殊的规则，用于实现一些特殊的功能，如导入外部样式表、定义媒体查询、创建动画等。以下是一些常用的 @ 规则及其使用示例：

1. @import：用于导入其他样式表。

@import url("style.css");

1. @media：用于根据不同的媒体类型应用不同的样式。

@media screen and (min-width: 600px) {
    body {
        background-color: lightblue;
    }
}

1. @font-face：用于定义自定义字体。

@font-face {
    font-family: "MyFont";
    src: url("myfont.woff2") format("woff2"),
         url("myfont.woff") format("woff");
}

1. @keyframes：用于定义动画。

@keyframes myAnimation {
    0% {
        background-color: red;
    }
    100% {
        background-color: blue;
    }
}

1. @supports：用于检测浏览器是否支持某个特性。

@supports (display: grid) {
    .container {
        display: grid;
    }
}

1. @charset: 用于指定样式表的字符编码。

@charset "UTF-8";

1. @page: 用于设置打印时的页面样式。

@page {
    margin: 1cm;
}

1. namespace: 用于定义命名空间。

@namespace url(URL_ADDRESS@namespace url(http://www.w3.org/1999/xhtml);

1. document: 用于定义文档级样式。

@document url(URL_ADDRESS) {
    body {
        background-color: yellow;
    }
}

CSS伪类和伪元素有哪些，它们的区别和实际应用

查看答案

常见伪类

链接伪类：:link（未访问的链接）、:visited（已访问的链接）。
用户行为伪类：:hover（鼠标悬停）、:active（元素被激活，如点击时）、:focus（元素获得焦点）。
结构伪类：:first-child（父元素的第一个子元素）、:last-child（父元素的最后一个子元素）、:nth-child(n)（父元素的第n个子元素）、:nth-last-child(n)（父元素的倒数第n个子元素）、:only-child（父元素唯一的子元素）。
目标伪类：:target（当前活动的目标元素）。
表单相关伪类：:enabled（可用的表单元素）、:disabled（禁用的表单元素）、:checked（选中的单选框或复选框）、:required（有 required 属性的表单元素）、:optional（没有 required 属性的表单元素）。

常见伪元素

::before：在元素内容之前插入内容。
::after：在元素内容之后插入内容。
::first-letter：选择元素的第一个字母。
::first-line：选择元素的第一行。
::selection：选择用户选中的文本。

区别

本质不同：

伪类用于选择处于特定状态的元素，比如元素的链接状态、用户交互状态、在文档树中的位置等。
伪元素用于创建文档树中不存在的虚拟元素，像在元素前后插入内容、选择元素的特定部分。

语法不同：

伪类使用单冒号 :，例如 :hover。
伪元素在CSS3中使用双冒号 ::，例如 ::before，不过为了兼容旧浏览器，单冒号写法也被支持。

优先级不同：

伪类的优先级和类选择器相同。
伪元素的优先级和元素选择器相同。

Position 的值有哪些，分别有哪些作用？

查看答案

position 属性有哪些值？

1. static：默认值，元素按照正常文档流布局。
1. relative：相对定位，相对于元素在文档流中的原始位置进行定位。
1. absolute：绝对定位，相对于最近的已定位祖先元素进行定位，如果没有已定位祖先元素，则相对于 <html> 元素。
1. fixed：固定定位，相对于浏览器窗口进行定位。
1. sticky：粘性定位，在滚动过程中根据设定的偏移量进行定位。

它们的作用分别是什么？

1. static：元素按照正常文档流布局。
1. relative：相对于元素在文档流中的原始位置进行定位，不会影响其他元素的布局。
1. absolute：相对于最近的已定位祖先元素进行定位，如果没有已定位祖先元素，则相对于 <html> 元素。
1. fixed：相对于浏览器窗口进行定位，不会随着滚动条滚动而移动。
1. sticky：在滚动过程中根据设定的偏移量进行定位，当元素到达设定的偏移量时，会固定在该位置。

雪碧图实现原理

雪碧图（Sprite）是一种将多个小图片合并成一张大图的技术，通过CSS的背景图片和定位来实现图片的显示。实现原理如下：

将多个小图片合并成一张大图，每个小图片的位置和大小都已经确定。
在HTML中使用一个 <div> 元素作为容器，设置其背景图片为合并后的大图。
通过CSS的 background-position 属性来定位每个小图片在大图中的位置。
当需要显示某个小图片时，只需要将 <div> 元素的 background-position 属性设置为对应的位置即可。
可以通过CSS的 background-size 属性来设置小图片的大小，以适应不同的显示需求。

水平垂直居中的方案, 优缺点？

查看答案

水平居中

1. 行内元素：可以使用 text-align: center; 来实现水平居中。
1. 块级元素：可以使用 margin: 0 auto; 来实现水平居中。
1. 绝对定位：可以使用 left: 50%; transform: translateX(-50%); 来实现水平居中。
1. 弹性布局：可以使用 display: flex; justify-content: center; 来实现水平居中。

垂直居中

1. 行内元素：可以使用 vertical-align: middle; 来实现垂直居中。
1. 块级元素：可以使用 line-height: height; 来实现垂直居中。
1. 绝对定位：可以使用 top: 50%; transform: translateY(-50%); 来实现垂直居中。
1. 弹性布局：可以使用 display: flex; align-items: center; 来实现垂直居中。

BFC 是什么？应用场景？

查看答案

BFC直译为块级格式化上下文，它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与外部毫不相干。

注意：可以把BFC理解为一个大的盒子，其内部是由Block-level box组成的

BFC布局规则：

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算

哪些元素会生成 BFC：

根元素
float 的值不为 none
overflow 的值不为 visible
display 的值为 inline-block、table-cell、table-caption
position的值为 absolute 或 fixed

CSS函数有哪些？

查看答案

CSS函数有哪些？

根据w3cplus中可以划分为以下几类：

属性函数：attr();
背景图片函数：linear-gradient()、radial-gradient()、conic-gradient()、repeating-linear-gradient()、repeating-radial-gradient()、repeating-conic-gradient()、image-set()、image()、url()、element();
颜色函数：rgb()、rgba()、hsl()、hsla()、hwb()、color-mod();
图形函数：circle()、ellipse()、inset()、polygon()、path();
滤镜函数：blur()、brightness()、contrast()、drop-shadow()、grayscale()、hue-rotate()、invert()、opacity()、saturate()、sepia()；
转换函数：matrix()、matrix3d()、perspective()、rotate()、scale()、scale3d()、scaleX()、scaleY()、scaleZ()、skew()、translate()；
数学函数：calc()、min()、max()、mixmax()、repeat()；
缓动函数：cubic-bezier()、steps()；
其他函数：counter()、counters()、toggle()、var()、 symbols()。

PostCSS、Sass、Less的异同，以及使用配置，至少掌握一种

查看答案

编译环境不一样，Sass的安装需要Ruby环境，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出css到浏览器，也可以在开发环节使用Less，然后编译成css文件，直接放到项目中；

变量符号不一样，Less是@，而Scss是$；
输出设置，Less没有输出设置，Sass提供4中输出选项：nested, compact, compressed 和 expanded；
处理条件语句，Sass支持条件语句，可以使用if{}else{},for{}循环等等。 LESS的条件语句使用有些另类，他不是我们常见的关键词if和else if之类，而其实现方式是利用关键词“when”；
引用外部文件，文件名如果以下划线_开头的话，Sass会认为该文件是一个引用文件，不会将其编译为css文件，ess引用外部文件和css中的@import没什么差异；
工具库的不同，Sass有工具库Compass, 简单说，Sass和Compass的关系有点像Javascript和jQuery的关系,Compass在Sass的基础上，封装了一系列有用的模块和模板，补充强化了Sass的功能。Less有UI组件库Bootstrap,Bootstrap是web前端开发中一个比较有名的前端UI组件库，Bootstrap的样式文件部分源码就是采用Less语法编写。

PostCSS介绍：

PostCSS 的主要功能只有两个：第一个就是前面提到的把 CSS 解析成 JavaScript 可以操作的 AST，第二个就是调用插件来处理 AST 并得到结果。因此，不能简单的把 PostCSS 归类成 CSS 预处理或后处理工具。PostCSS 所能执行的任务非常多，同时涵盖了传统意义上的预处理和后处理。

PostCSS使用

PostCSS 一般不单独使用，而是与已有的构建工具进行集成。PostCSS 与主流的构建工具，如 Webpack、Grunt 和 Gulp 都可以进行集成。完成集成之后，选择满足功能需求的 PostCSS 插件并进行配置。现在经常用到的是基于PostCSS的Autoprefixer插件，使用方式可以在官网的插件库进行查询。下面是官网地址：

CSS模块化方案有哪些？

查看答案

CSS Modules

原理：CSS Modules会将CSS类名编译成全局唯一的类名，从而避免样式冲突。在构建过程中，每个CSS文件都会生成一个映射对象，将原始类名映射到编译后的唯一类名。

Sass/Scss + BEM命名规范

原理：Sass/Scss是CSS预处理器，支持嵌套、变量、混合器等功能。BEM（Block Element Modifier）是一种命名规范，通过块（Block）、元素（Element）和修饰符（Modifier）的组合来命名类名，使类名具有明确的语义，减少样式冲突的可能性。

CSS in JS

原理：CSS in JS是将CSS代码直接嵌入到JavaScript文件中，通过JS动态生成CSS代码。在构建过程中，CSS代码会被编译成JavaScript对象，然后通过JS动态插入到DOM中。 css库： styled-components、emotion

CSS如何配置按需加载？

查看答案

使用require.js按需加载 CSS
webpack配置 CSS 的按需加载

如何防止CSS阻塞渲染？

查看答案

CSS 阻塞渲染指的是浏览器在解析 HTML 构建 DOM 树时，遇到外部 CSS 文件会暂停解析，先去下载并解析 CSS 文件，构建 CSSOM 树，然后将 DOM 树和 CSSOM 树合并成渲染树后再进行渲染。以下是一些防止 CSS 阻塞渲染的方法：

1. 内联关键 CSS

将首屏渲染所需的关键 CSS 直接内联到 HTML 文件的 <style> 标签中。这样浏览器无需等待外部 CSS 文件下载，可直接使用内联的 CSS 进行渲染。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>防止 CSS 阻塞渲染</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      color: #333;
    }
    h1 {
      color: #007bff;
    }
  </style>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a paragraph.</p>
</body>
</html>

2. 使用媒体查询异步加载非关键 CSS

对于非首屏渲染所需的 CSS 文件，可以使用媒体查询和 media 属性，让浏览器在满足特定条件时才加载这些 CSS 文件，从而实现异步加载。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>防止 CSS 阻塞渲染</title>
  <!-- 首屏关键 CSS 内联 -->
  <style>
    body {
      font-family: Arial, sans-serif;
      color: #333;
    }
    h1 {
      color: #007bff;
    }
  </style>
  <!-- 非关键 CSS 异步加载 -->
  <link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a paragraph.</p>
</body>
</html>

3. 预加载 CSS

使用 <link rel="preload"> 标签预加载 CSS 文件，让浏览器提前开始下载 CSS 文件，但不会阻塞渲染。当需要使用该 CSS 文件时，浏览器可以直接使用已下载好的文件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>防止 CSS 阻塞渲染</title>
  <!-- 预加载 CSS -->
  <link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="styles.css"></noscript>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a paragraph.</p>
</body>
</html>

4. 优化 CSS 文件大小

通过压缩 CSS 文件、去除不必要的代码和注释等方式，减小 CSS 文件的大小，从而缩短 CSS 文件的下载时间，减少对渲染的阻塞。可以使用工具如 UglifyCSS、cssnano 等进行 CSS 文件的压缩。

5. 分割 CSS 文件

将 CSS 文件按照功能或页面模块进行分割，只在需要的页面加载相应的 CSS 文件，避免一次性加载大量不必要的 CSS 代码。

CSS3 的新特性有哪些？

查看答案

1、颜色: 新增 RGBA , HSLA 模式
2、文字阴影(text-shadow)
3、边框: 圆角(border-radius) 边框阴影 : box-shadow
4、盒子模型: box-sizing
5、背景: background-size background-origin background-clip
6、渐变: linear-gradient, radial-gradient
7、过渡 : transition 可实现动画
8、自定义动画 animate @keyfrom
9、媒体查询多栏布局 @media screen and (width:800px) {…}
10、border-image
11、2D 转换; transform: translate(x,y) rotate(x,y) skew(x,y) scale(x,y)
12、3D 转换
13、字体图标 font-face
14、弹性布局 flex

简述 transform，transition，animation 的作用？

查看答案

1、transform：描述了元素的静态样式，本身不会呈现动画效果，可以对元素进行旋转

rotate、扭曲 skew、缩放 scale 和移动 translate 以及矩阵变形 matrix。
transition 和 animation 两者都能实现动画效果
transform 常常配合 transition 和 animation 使用

2、transition 样式过渡，从一种效果逐渐改变为另一种效果

transition 是一个合写属性
Transition:transition-property transition-duration transition-timing-function
transition-delay
从左到右分别是：css 属性、过渡效果花费时间、速度曲线、过渡开始的延迟时间
transition 通常和 hover 等事件配合使用，需要由事件来触发过渡

3、animation 动画由@keyframes 来描述每一帧的样式

区别：

transform 仅描述元素的静态样式，常常配合 transition 和 animation 使用
transition 通常和 hover 等事件配合使用，animation 是自发的，立即播放
animation 可设置循环次数
animation 可设置每一帧的样式和时间，transition 只能设置头尾
transition 可与 js 配合使用，js 设定要变化的样式，transition 负责动画效果。

CSS浏览器兼容性写法

查看答案

2. 浏览器前缀

不同浏览器对一些新的 CSS 属性支持情况不同，需要添加浏览器前缀来确保兼容性。常见的浏览器前缀有：

-webkit-：用于 Safari、Chrome 等基于 WebKit 内核的浏览器。 -moz-：用于 Firefox 浏览器。 -ms-：用于 Internet Explorer 浏览器。 -o-：用于 Opera 浏览器。

3. 针对特定浏览器的CSS Hack

在某些情况下，需要针对特定浏览器编写不同的 CSS 代码。可以使用一些 CSS Hack 来实现。

/* 针对 Internet Explorer 6 的 Hack */
* html .element {
  color: red;
}

/* 针对 Internet Explorer 7 的 Hack */
*:first-child + html .element {
  color: blue;
}

/* 针对 Internet Explorer 8 的 Hack */
.ie8 .element {
  color: green;
}

4. 使用 Modernizr 检测浏览器特性

Modernizr 是一个 JavaScript 库，可以检测浏览器是否支持某些 CSS 特性。根据检测结果，可以为不支持的浏览器提供替代方案。

5. 自动化插件--使用 Autoprefixer

Autoprefixer 是一个 PostCSS 插件，可以自动为 CSS 添加浏览器前缀。在构建项目时，可以使用 Autoprefixer 来处理 CSS 文件，减少手动添加前缀的工作量。

如何实现双飞翼（圣杯）布局？

查看答案

双飞翼布局是一种常见的网页布局方式，它可以实现三栏布局，其中中间一栏的宽度自适应，两边一栏的宽度固定。双飞翼布局的实现方式有多种，其中一种是使用浮动和负边距。具体实现步骤如下：

首先，将整个布局分为三个部分：中间栏、左栏和右栏。
中间栏的宽度自适应，使用 float: left 使其浮动在左侧。
左栏和右栏的宽度固定，使用 float: left 使其浮动在中间栏的左侧。
为中间栏和左栏设置 margin-left 和 margin-right，使其与左右栏的宽度相等。
为中间栏设置 padding-left 和 padding-right，使其与左右栏的宽度相等。
为左右栏设置 margin-left 和 margin-right，使其与中间栏的宽度相等。
为左右栏设置 width，使其与中间栏的宽度相等。
为左右栏设置 float: left，使其浮动在中间栏的左侧。
为左右栏设置 position: relative，使其相对于中间栏进行定位。
为左右栏设置 left 和 right，使其与中间栏的宽度相等。
为左右栏设置 background-color，使其与中间栏的背景颜色不同。

CSS 单位中 px、em 和 rem 的区别？

查看答案

px：像素，是一种绝对单位，在不同的设备上显示效果不同。
em：相对于父元素的字体大小，当父元素的字体大小改变时，子元素的字体大小也会改变。
rem：相对于根元素的字体大小，当根元素的字体大小改变时，子元素的字体大小也会改变。

rem 适配方法如何计算 HTML 跟字号及适配方案？

查看答案

通用方案

1、设置根 font-size：625%（或其它自定的值，但换算规则 1rem 不能小于 12px）
2、通过媒体查询分别设置每个屏幕的根 font-size
3、CSS 直接除以 2 再除以 100 即可换算为 rem

优：有一定适用性，换算也较为简单劣：有兼容性的坑，对不同手机适配不是非常精准；需要设置多个媒体查询来适应不同手机，单某款手机尺寸不在设置范围之内，会导致无法适配

网易方案

1、拿到设计稿除以 100，得到宽度 rem 值
2、通过给 html 的 style 设置 font-size，把 1 里面得到的宽度 rem 值代入 x document.documentElement.style.fontSize = document.documentElement.clientWidth / x + ‘px‘;
3、设计稿 px/100 即可换算为 rem

优：通过动态根 font-size 来做适配，基本无兼容性问题，适配较为精准，换算简便劣：无 viewport 缩放，且针对 iPhone 的 Retina 屏没有做适配，导致对一些手机的适配不是很到位

1、拿到设计稿除以 10，得到 font-size 基准值 2、引入 flexible 3、不要设置 meta 的 viewport 缩放值 4、设计稿 px/ font-size 基准值，即可换算为 rem 优：通过动态根 font-size、viewpor、dpr 来做适配，无兼容性问题，适配精准。劣：需要根据设计稿进行基准值换算，在不使用 sublime text 编辑器插件开发时，单位计算复杂

CSS 中 `link` 和 `@import` 的区别？

查看答案

适用范围不同

@import 可以在网页页面中使用，也可以在 CSS 文件中使用，用来将多个 CSS 文件引入到一个 CSS 文件中；而 link 只能将 CSS 文件引入到网页页面中

功能范围不同

link 属于 XHTML 标签，而 @import 是 CSS 提供的一种方式，link 标签除了可以加载 CSS 外，还可以定义 RSS，定义 rel 连接属性等，@import 就只能加载 CSS

加载顺序不同

当一个页面被加载的时候，link 引用的 CSS 会同时被加载，而 @import引用的 CSS 会等到页面全部被下载完再被加载。所以有时候浏览 @import 加载 CSS 的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显

兼容性

由于 @import 是 css2.1 提出的，所以老的浏览器不支持，@import 只有在 IE5以上的才能识别，而 link 标签无此问题

控制样式时的差别

使用 link 方式可以让用户切换 CSS 样式.现代浏览器如 Firefox,Opera,Safari 都支持 rel=”alternate stylesheet”属性(即可在浏览器上选择不同的风格),当然你还可以使用 Javascript 使得 IE 也支持用户更换样式

权重区别

link 引入的样式权重大于 @import 引入的样式

display：none 与 visibility：hidden 的区别？

查看答案

最常用的为 display:none 和 visibility:hidden

dispaly:none: 设置该属性后，该元素下的元素都会隐藏，占据的空间消失
visibility:hidden: 设置该元素后，元素虽然不可见了，但是依然占据空间的位置

区别

1. visibility 具有继承性，其子元素也会继承此属性，若设置 visibility:visible，则子元素会显示
1. visibility 不会影响计数器的计算，虽然隐藏掉了，但是计数器依然继续运行着。
1. 在 CSS3 的 transition 中支持 visibility 属性，但是不支持 display，因为 transition 可以延迟执行，因此配合 visibility 使用纯 CSS 实现 hover 延时显示效果可以提高用户体验
1. display:none 会引起回流(重排)和重绘 visibility:hidden 会引起重绘

为什么会出现浮动？浮动元素会引起什么问题？如何清除浮动？

查看答案

为什么会出现浮动

浮动（float）属性最初是为了实现文字环绕图片的效果而引入的。在网页设计中，经常需要让文字围绕在图片或者其他元素的周围，浮动属性可以让元素脱离正常的文档流，向左或向右移动，直到它的外边缘碰到包含框或者另一个浮动元素的边框为止，从而实现文字环绕的布局。

浮动元素会引起什么问题

1. 父元素的高度无法被撑开，影响与父元素同级的元素；
1. 与浮动元素同级的非浮动元素（内联元素）会跟随其后；
1. 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构解

如何清除浮动

1. 使用 clear 属性：在浮动元素的后面添加一个空标签，然后设置该标签的 clear:both 属性，即可清除浮动。
1. 使用 BFC（块级格式化上下文）: 设置父元素的 overflow 属性为 hidden 或 auto 来创建 BFC，从而包含浮动元素。
1. 使用伪元素清除浮动: 父级添加 ::after 伪元素，并为伪元素设置 clear: both 属性清除浮动。

简述弹性盒子 flex 布局及 rem 布局？

查看答案

弹性盒子 flex 布局

弹性盒子（Flexbox）是 CSS3 中新增的一种布局方式，它可以让元素在容器中按照一定的规则进行排列和对齐。使用弹性盒子可以实现更灵活的布局效果，同时也可以避免使用浮动和定位等传统的布局方式。

弹性盒子的核心概念

容器（Flex Container）：设置了 display: flex 或 display: inline-flex 的元素，它是所有子元素（Flex Items）的父元素。
子元素（Flex Items）：容器内的直接子元素，它们会根据容器的属性进行布局。
主轴（Main Axis）：容器中元素排列的主要方向，可以是水平方向（默认）或垂直方向。
交叉轴（Cross Axis）：与主轴垂直的方向。

弹性盒子的常用属性

容器属性

display：定义容器为弹性容器，值可以是 flex 或 inline-flex。
flex-direction：定义主轴的方向，值可以是 row（默认，水平从左到右）、row-reverse（水平从右到左）、column（垂直从上到下）、column-reverse（垂直从下到上）。
flex-wrap：定义子元素是否换行，值可以是 nowrap（默认，不换行）、wrap（换行）、wrap-reverse（换行且顺序反转）。
justify-content：定义子元素在主轴上的对齐方式，值可以是 flex-start（默认，左对齐）、flex-end（右对齐）、center（居中对齐）、space-between（两端对齐，子元素之间间距相等）、space-around（子元素两侧间距相等）。
align-items：定义子元素在交叉轴上的对齐方式，值可以是 stretch（默认，拉伸填充容器）、flex-start（顶部对齐）、flex-end（底部对齐）、center（居中对齐）、baseline（基线对齐）。
align-content：定义多行子元素在交叉轴上的对齐方式，值与 justify-content 类似。

子元素属性

flex-grow：定义子元素的放大比例，默认值为 0，表示不放大。
flex-shrink：定义子元素的缩小比例，默认值为 1，表示可以缩小。
flex-basis：定义子元素在主轴上的初始大小，默认值为 auto。
flex：是 flex-grow、flex-shrink 和 flex-basis 的缩写，默认值为 0 1 auto。
order：定义子元素的排列顺序，值为整数，默认值为 0，数值越小越靠前。
align-self：定义单个子元素在交叉轴上的对齐方式，覆盖容器的 align-items 属性。

rem概念

rem（root em）是一种相对长度单位，它相对于根元素（<html>）的字体大小。使用 rem 布局可以实现页面元素的整体缩放，方便进行响应式设计。

rem 的原理

通过设置根元素的字体大小，然后使用 rem 作为元素的尺寸单位，当根元素的字体大小改变时，所有使用 rem 单位的元素尺寸也会相应改变。

优点

响应式布局：可以根据不同的屏幕尺寸动态调整根元素的字体大小，从而实现页面的整体缩放。
易于维护：只需要修改根元素的字体大小，就可以改变整个页面的布局。

适配方案步骤：

1、首先动态计算 html 的 font-size
2、将所有的 px 换算成 rem(计算过程请看下面代码和注释（注意：rem 的换算是根据设计图稿的像素计算的，下面的计算只是动态计算 html 的 font-size 大小），请看下面的注意事项

<meta name="viewport" content="width=device-width,user-scalable=no"/>
<style>
 body {
    margin: 0;
 }
 div {
     /*width: 80px;*/
     height: 100px;
     width: 4rem;
     height: 4rem;
     /*1rem=20; nrem=80; n=80/rem; n=80/20; n=4*/
     background: green;
     float: left;
 }
<style>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</body>
<script>
 (function(){
    var html=document.documentElement;
    var width=html.getBoundingClientRect().width; //获取屏幕宽度（设备独立像素）， 如iPhone6 为 414
    html.style.fontSize=width/16+'px'; //html font-size = 20px;
    //iphone5 下 1rem=20 这里之所以除以 16，是因为要把宽度分成 16 份，这个数并没有固定，一般选 15，16，以 ipone5 为准是 16，因为一除可以得到整数 20，好计算。 
 })();
</script>

注意：

1、必需动态的去设置 html 的大小，才能适配
2、根据页面的宽度除以一个系数，把算出的这个值赋给 html 的 font-size 属性，rem换算值是根据 psd 设计图的宽度 / 系数的 rem 系数
- 2.1）为什么要除一个数字，原因是：一个页面里，不可能全都是整屏的元素，肯定有一行中放多个元素。所以就把一行分成 n 份
- 2.2）不除一个数字的话，那 1 个 rem 就是屏幕的宽度，这个值太大，如果一个元素的宽度比它小的话，就不方便计算
- 2.3）这个系数，自己定。多少都可以，但是建议给一个能整除的值（这个能整除的数，是还要根据设计稿能整除的数。）

以 640px 设计稿和 750px 的视觉稿，网易这样处理：

var width = document.documentElement.clientWidth; // 屏幕的布局视口宽度
var rem = width / 7.5; // 750px 设计稿将布局视口分为 7.5 份
var rem = width / 6.4; // 640px 设计稿将布局视口分为 6.4 份

这样不管是 750px 设计稿还是 640px 设计稿，1rem 等于设计稿上的 100px。故 px 转换 rem 时：1rem = 1px * 0.01;

750px 设计稿上：

// 设计稿上 75px 对应 0.75rem, 距离占设计稿的 10%；
// 在 ipone6 上：
width = document.documentElement.clientWidth = 375px；
// 1rem = 375px / 7.5 = 50px;
// 0.75rem = 37.5px; (37.5/375=10%；占屏幕 10%)
// 在 ipone5 上：
width = document.documentElement.clientWidth = 320px；
// rem = 320px / 7.5 = 42.667px;
// 0.75rem = 32px; (32/320=10%；占屏幕 10%)

故对于设计稿上任何一个尺寸换成 rem 后，在任何屏下对应的尺寸占屏幕宽度的百分比相同。故这种布局可以百分比还原设计图

3、对于切的图片，尺寸是根据设计图的尺寸宽度的，显示起来会很大，如果是 Img 标签，可以设置宽度为切出的图片尺寸，换算成 rem，如果是 background-img，用 background-size 属性，设置设计图尺寸宽高，换算成 rem 进行图片的缩放适配。

对于上述的第二点，根据设计稿动态转换 rem，这里说一下，前面的计算是动态的设置 html的 font-size 的大小，这是根据设备的独立像素计算的。而设计稿往往是根据物理像素，即设备像素设计的，往往很大，是 750px 及以上，所以在转换 rem 的时候，转换是根据 psd 设计稿的像素进行转换，即 1rem = 设计稿像素宽度/系数，例如，如果是 1080px 的设计稿，那么，就用 1rem = 1080/18 = 60px（这里用 18 做系数，是因为能整除），然后布局的时候就根据设计稿的元素尺寸转换，例如设计稿一个元素的高为 60px，那么就可以转化为 1rem 了

特点：

1、所有有单位的属性会根据屏幕的尺寸自动计算大小
2、同样一个元素，在不同的设备下的大小是不一样的。在尺寸小的设备下显示的小，在尺寸大的设备下显示的大
3、一般以 iphone6 为基准，以它的宽度 750 除上一个系数，再去算 rem
- 3.1）打开 Hbuilder，顶部栏的工具》选项》Hbuilder》代码助手》px 自动转 rem 设置
- 3.2）less 自动转换：Hbuilder 也可以将 less 文件自动转成 css 文件。less 文件的书写如下所示

// 比如想设置宽度为 187px，高度为 100px 的元素，可以通过下面方式计算适配
@rem：25rem； /*这是 1rem = X px 的 X 的值，但是用了 rem 做单位而已*/
div{
 width: 187/@rem;
 height: 100/@rem;
}

Tips：上述步骤 2 中换算可以通过 Hbuilder 将 px 自动转 rem 以及通过 less 自动计算成 rem，sublime 也可以通过插件进行自动转换

弹性布局适配(会配合 rem 适配使用 )

兼容情况

IE10 及以上、ios9 及以上、android4.4 及以上版本支持

如何解决 margin“塌陷”？

查看答案

外边距塌陷共有两种情况：

第一种情况：两个同级元素，垂直排列，上面的盒子给 margin-bottom 下面的盒子给 margin-top，那么他们两个的间距会重叠，以大的那个计算。解决这种情况的方法为：两个外边距不同时出现。
第二种情况：两个父子元素，内部的盒子给 margin-top，其父级也会受到影响，同时产生上边距，父子元素会进行粘连，决绝这种情况的方法为：父级添加一个 css 属性 overflow： hidden 禁止超出。

什么是外边距重叠？重叠的结果是什么？

查看答案

外边距重叠的定义

外边距重叠（Margin Collapsing），也称为外边距合并，是指在垂直方向上，两个或多个块级元素的外边距（margin）相遇时，它们会合并成一个外边距，这个合并后的外边距大小等于这些外边距中的最大值。外边距重叠只会发生在垂直方向上（margin-top 和 margin-bottom），水平方向（margin-left 和 margin-right）不会出现这种情况。

外边距重叠的情况

相邻兄弟元素：当两个相邻的块级元素上下排列时，它们的垂直外边距会发生重叠。
父元素与第一个/最后一个子元素：如果父元素没有上内边距（padding-top）或上边框（border-top），那么父元素的 margin-top 会与第一个子元素的 margin-top 重叠；如果父元素没有下内边距（padding-bottom）或下边框（border-bottom），那么父元素的 margin-bottom 会与最后一个子元素的 margin-bottom 重叠。
空块级元素：如果一个块级元素没有内容、内边距、边框，那么它的 margin-top 和 margin-bottom 会发生重叠。

外边距重叠的结果

外边距重叠的结果取决于外边距的大小。如果两个外边距的大小相等，那么它们会合并成一个外边距，大小为这个外边距的大小。如果两个外边距的大小不同，那么它们会合并成一个外边距，大小为两个外边距中的最大值。

1、两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值
2、两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值
3、两个外边距一正一负时，折叠结果是两者的相加的和
4、外边距不重叠的情况
- 水平 margin 永远不会重合
- 设置了 overflow 属性(visible 除外)的元素和它的子元素之间的 margin 不会重叠
- 设置了绝对定位（position:absolute）的盒模型，垂直 margin 不会被重叠，和子元素之间也不重叠
- 设置了 display:inline-block 的元素，垂直 margin 不会重叠，和子元素之间也不重叠根元素(如 html)与 body 的 margin 不会重叠

防止外边距重叠的方法

对于相邻兄弟元素：可以将元素设置为浮动元素（float: left 或 float: right）、行内块元素（display: inline-block）或绝对定位元素（position: absolute），这样元素就不会发生外边距重叠。
对于父元素与子元素：可以给父元素添加 padding 或 border，或者将父元素设置为 BFC（块级格式化上下文），例如设置 overflow: hidden。
对于空块级元素：可以给元素添加内容、内边距或边框，避免外边距重叠。

CSS 预处理器是什么？常见的 CSS 预处理器有哪些？使用 CSS 预处理器的优缺点有哪些？

查看答案

CSS 预处理器是什么？

CSS 预处理器是一种脚本语言，它扩展了 CSS 并在 CSS 语法基础上添加了诸如变量、嵌套规则、混合（mixins）、函数等编程特性。这些特性使得 CSS 的编写更加高效、可维护和可扩展。预处理器会将编写的代码编译成标准的 CSS 代码，然后在网页中使用。

常见的 CSS 预处理器有哪些？

Sass（Syntactically Awesome Stylesheets）：有两种语法格式，一种是 .sass 扩展名的缩进语法，另一种是 .scss 扩展名的类 CSS 语法。Sass 是最早的 CSS 预处理器之一，功能强大，社区活跃。
Less（Leaner Style Sheets）：受 Sass 启发而创建，语法与 CSS 非常相似，易于学习和上手。Less 可以在客户端或服务器端编译。
Stylus：提供了简洁灵活的语法，支持多种书写风格，既可以使用类似 CSS 的语法，也可以使用更简洁的缩进语法。Stylus 通常用于 Node.js 项目。

使用 CSS 预处理器的优缺点

优点

提高代码可维护性：通过使用变量、嵌套规则和混合等特性，可以减少代码重复，使代码结构更加清晰，易于理解和维护。
增强代码复用性：可以定义可复用的代码块（如混合），在多个地方重复使用，提高开发效率。
支持编程特性：引入了变量、函数、条件语句等编程概念，使得 CSS 编写更加灵活和强大。
更好的代码组织：可以将样式代码分割成多个文件，通过导入功能进行管理，使项目结构更加清晰。缺点
学习成本：需要学习额外的语法和特性，对于初学者来说可能有一定的学习曲线。
编译时间：在项目规模较大时，编译预处理器代码可能需要一定的时间，影响开发效率。
调试困难：由于预处理器代码需要编译成 CSS 才能在浏览器中使用，调试时可能需要在编译后的 CSS 代码中查找问题，增加了调试的难度。

使用 CSS 怎么让 Chrome 支持小于 12px 的文字比如 10px？

查看答案

针对谷歌浏览器内核，加 webkit 前缀，用 transform:scale() 这个属性进行缩放！

box-sizing属性？

查看答案

用来控制元素的盒子模型的解析模式，默认为 content-box

context-box：W3C的标准盒子模型，设置元素的 height / width 属性指的是 content 部分的高/宽
border-box：IE传统盒子模型。设置元素的 height / width 属性指的是 border + padding + content 部分的 高/宽

`width: auto` 和 `width: 100%` 的区别？

查看答案

width: 100% 会使元素 box 的宽度等于父元素的 content 的宽度；
width: auto 会使元素撑满整个父元素，margin, border, padding, content 区域会自动分配水平空间；

使用 base64 编码的优缺点？

查看答案

base64编码是一种图片处理格式，通过特定的算法将图片编码成一长串字符串，在页面上显示时可用该字符串来代替图片的url属性

使用 base64 的优点：

可以减少该图片的 HTTP 请求

使用 base64 的缺点：

1.根据base64的编码原理，编码后的大小会比源文件大小大1/3，如果把大图片编码到 html/css 中，不仅会造成文件体积增加，影响文件的加载速度，还会增加浏览器对 html 或 css 文件解析渲染的时间。
2.使用base64无法直接缓存，要缓存只能缓存包含base64的文件，比如 HTML 或 CSS，这相比于直接缓存图片的效果要差很多。
3.IE8以前的浏览器不支持，一般一些网站的小图标可以使用base64图片引入。

CSS 里的 `visibility` 属性有个 `collapse` 属性值？在不同浏览器下有什么区别？

查看答案

visibility 属性规定元素是否可见。

当一个元素的 visibility 属性被设置成 collapse 值后，对于一般的元素，它的表现跟 hidden 是一样的：

Chrome中，使用 collapse 值和使用 hidden 没有区别；
firefox，opera 和 IE，使用 collapse 值和使用 display：none 没有什么区别。

`position` 跟 `display`、`overflow`、`float`这些特性相互叠加后会怎么样？

查看答案

display 属性规定元素应该生成的框的类型；
position 属性规定元素的定位类型；
float 属性是一种布局方式，定义元素在哪个方向浮动。
类似于优先级机制：position：absolute/fixed 优先级最高，有他们在时，float 不起作用，display 值需要调整。float 或者 absolute 定位的元素，只能是块元素或表格。

上下 margin 重合的问题?

查看答案

在重合元素外包裹一层容器，通过改变此 div 的属性使两个盒子分属于两个不同的 BFC，以此来阻止 margin 重叠。

移动端的布局用过媒体查询吗？

查看答案

通过媒体查询可以为不同大小和尺寸的媒体定义不同的 css，适应相应的设备的显示。

<head> 里边引入：

<link rel=”stylesheet” type=”text/css” href=”xxx.css” media=”only screen and (max-device-width:480px)”>

@media 里边引入：

@media only screen and (max-device-width:480px) { /* css样式 */ }

浏览器是怎样解析CSS选择器的？

查看答案

CSS选择器的解析是从右向左解析的。

若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。
若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。
两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。

而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。在建立 Render Tree 时（WebKit 中的Attachment过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 Render Tree。

在网页中的应该使用奇数还是偶数的字体？为什么呢？

查看答案

尽量使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。

全屏滚动的原理是什么？用到了CSS的哪些属性？

查看答案

原理：有点类似于轮播，整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%，剩下的可以通过 transform 进行y轴定位，也可以通过 margin-top 实现。
属性：overflow：hidden； transition：all 1000ms ease；

什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

查看答案

响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。
基本原理是通过媒体查询 @media 检测不同的设备屏幕尺寸做处理。
兼容低版本IE 可以使用JS辅助一下来解决。

视差滚动效果？

查看答案

视差滚动（Parallax Scrolling）通过在网页向下滚动的时候，控制背景的移动速度比前景的移动速度慢来创建出令人惊叹的3D效果。

实现方式：

CSS3 实现优点：开发时间短、性能和开发效率比较好；缺点是不能兼容到低版本的浏览器
jQuery 实现通过控制不同层滚动速度，计算每一层的时间，控制滚动效果。优点：能兼容到各个版本的，效果可控性好缺点：开发起来对制作者要求高
插件实现方式例如：parallax-scrolling，兼容性比较好

让页面里的字体变清晰，变细用CSS怎么做？

查看答案

-webkit-font-smoothing 在window系统下没有起作用，但是在IOS设备上起作用 -webkit-font-smoothing：antialiased 是最佳的，灰度平滑。

`position:fixed;` 在 `android` 下无效怎么处理？

查看答案

< meta name="viewport"
   content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
/>

如果需要手动写动画，你认为最小时间间隔是多久，为什么？

查看答案

多数显示器默认频率是 60Hz，即1秒刷新60次，所以理论上最小间隔为1/60*1000ms ＝ 16.7ms。

`li` 与 `li` 之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

查看答案

行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符，这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。

解决方法：

可以将 <li> 代码全部写在一排
浮动 li 中 float：left
在 ul 中用 font-size：0（谷歌不支持）；可以使用 letter-space：-3px

CSS属性 overflow 属性定义溢出元素内容区的内容会如何处理?

查看答案

visible：默认值。内容不会被修剪，会呈现在元素框之外。
hidden：内容会被修剪，并且其余内容是不可见的。
scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。