CSS面试题手册

在移动端Web开发中，我们有很多方法可以实现画一条0.5px的线。以下是一些典型的方法：使用 viewport可以将页面的视口设置为设备宽度的一般，然后布局以这个新的视口宽度为基准进行。当设置 border-width: 1px 时，其实际显示出来结果就是物理像素的0.5px。 <meta name="viewport" content="width=device-width,initial-scale=.5, maximum-scale=.5, user-scalable=no"> <div style="border-bottom: 1px solid #ccc"></div>使用 CSS transform 属性这种方法通常适用于大部分场景，主要思路是添加一个 1px 的 border，然后通过 scaleY(.5)/scaleX(.5) 进行缩放。需要注意的是，在利用这种方法画线时，应该以伪元素进行缩放，避免影响容器本身的布局。 <div class="line"></div> .line { position: relative; height: 20px; } .line::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; border-bottom: 1px solid #ccc; transform: scaleY(.5); }使用 SVG. SVG 是一种基于 XML 语法的图像格式，全部是由代码生成，所以可以精确到0.5px。具体实现就是改变SVG中的 stroke-width属性。 <svg width="100%" height="1" version="1.1" xmlns="http://www.w3.org/2000/svg"> <line x1="0" y1="0" x2="375" y2="0" stroke="#000" stroke-width="0.5" /> </svg>使用 Canvascanvas 的API为我们提供了更底层的画图能力，同样能实现这个需要。 <canvas id="canvas"></canvas> <script> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(300, 0); ctx.lineWidth = 0.5; ctx.stroke(); </script>

CSS中的display属性非常关键，主责决定一个元素如何被展示在页面上。以下是几个常见的display属性值以及它们的作用：none：此值使元素不显示，并从文档布局中完全移除，就好像它从未存在一样，不占据任何空间。例子：当你想隐藏一些内容，而不影响页面布局时，可以使用display: none;。.hidden-element { display: none;}block：它将元素显示为块级元素，这意味着元素会新起一行显示，并且尽可能占满父元素的宽度。例子：默认的<div>、<p>、<h1>到<h6>等都是块级元素。.block-element { display: block;}inline：元素不会新起一行，其宽度仅由内容决定，多个inline元素可以在同一行显示。例子：<span>、<a>、<strong>等元素默认是内联元素。.inline-element { display: inline;}inline-block：结合了inline和block的特点，让元素既可以在同一行显示，同时又可以设置宽高。例子：适用于需要在同一行显示的按钮或菜单项，而且还需要设定尺寸。.menu-item { display: inline-block;}flex：将元素设置为弹性容器，其子元素会成为弹性项目。这个值允许使用flexbox布局，可以提供更复杂的布局结构和对齐方式。例子：可以创建一个水平或垂直的导航栏，其中的项可以均匀地分布空间或对齐。.flex-container { display: flex;}grid：启用网格布局，其中的子元素可以放置在定义的行和列网格中。例子：当你要创建一个复杂的页面布局，例如一个有多列和明确对齐方式的仪表盘界面。.grid-container { display: grid;}table：类似于HTML的<table>，将元素表现为表格相关的元素，如<table>,<tr>, <td>等。例子：当你需要使用CSS而不是HTML标签来创建表格布局时。.table-like { display: table;}这些只是display属性中的几个值，实际上还有很多其他值，如list-item、table-row、table-cell等，它们可以用于更专门的布局需求。不同的display设置对布局、文档流和元素间的关系有着直接的影响。

pxpx 是一个固定的像素单位，不依赖于父级元素的字体大小。例如，如果你设置一个元素的字体大小为14px，不论其父级元素的字体大小是多少，这个元素的字体大小都将是14px。emem 是一个相对单位，代表其父级元素的字体大小。例如，如果父级元素的字体大小是16px，那么1em = 16px，2em=32px，以此类推。remrem 也是一个相对单位，但与em不同的是，它是相对于根元素（html）的字体大小，而不是父元素。这意味着如果你的HTML元素的字体大小是20px，那么1rem将等于20px，不论这个元素在DOM树中的位置。vwvw 与vh类似，但它是相对于视窗宽度的单位。1vw等于视窗宽度的1%。总的来说，em和rem都是相对单位，可以提供更好的可伸缩性和响应能力。px则是固定单位，简单直接。vh和vw是依赖于视窗大小的相对单位，非常适合于创建响应式设计。vhvh 是一个相对于视窗高度的单位。1vh等于视窗高度的1%。例如，如果视窗高度是800px，那么1vh就等于8px。这种单位在创建全占满视窗的块级元素时非常方便，无论设备或浏览器窗口大小如何改变，元素总能占满整个视窗。

什么是BFCBFC (Block Formatting Context) 是 Web 页面的可视化 CSS 渲染的一部分，它是块级盒布局发生的区域，也是浮动元素与其他元素的交互限定区域。 如何创建 BFC在 CSS 中，以下几种方式可以创建 BFC：根元素或其它包含它的元素浮动元素 (元素的 float 不是 none)绝对定位元素（元素的 position 为 absolute 或 fixed）内联块（元素的 display 为 inline-block）表格单元格 (元素的 display 为 table-cell，HTML 表格单元格默认为 table-cell)表格标题（元素的 display 为 table-caption，HTML 表格标题默认为 table-caption）匿名表格单元格元素（元素的 display 为 table、table-row、table-row-group、table-header-group、table-footer-group 或 table-cell且是匿名的）overflow 值不为 visible 的块级元素弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）网格元素（display 为 grid 或 inline-grid 元素的直接子元素）contain 值为 layout、paint 或 size 的元素多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）column-span 为 all 的元素总是会创建一个新的 BFC，这样使得元素能跨越多列。14. BFC 有哪些规则BFC遵循一些特殊的规则，主要包括：内部的 Box 会在垂直方向一个接一个地放置。也就是说，在 BFC 中，块级盒子都是紧贴在一起的。垂直方向的距离由 margin 决定，两个相邻 Box 的 margin 会发生重叠。Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠。每个元素的左边，与包含块（Containing Block）的左边相接触。这句话的意思是：在 BFC 中，每一个 Box 的左边都贴紧包含块的左边。BFC的区域不会与 float box 重叠。BFC 是浮动元素和其它元素交互的界限，BFC 与浮动盒子不会重叠。计算 BFC 的高度时，浮动元素也参与计算。也就是说，如果 BFC 内部有浮动的元素，那么 BFC 的高度会扩大，以包含这个浮动元素，也就是说 BFC 是可以包含浮动元素的。6. BFC 的应用场景通过掌握 BFC，我们可以解决一些常见的 CSS 布局问题，如以下几种场景：避免外边距折叠在 BFC 中，处于同一 BFC 中的两个块元素的垂直外边距会发生折叠。如果你不想让这两个外边距折叠，你可以将元素放在不同的 BFC 中。清除浮动由于 BFC 可以包含浮动，我们可以用 BFC 来清除内部浮动，避免造成父元素高度塌陷。当父元素内部的子元素全部浮动后，它们脱离了正常的文档流，父元素就会失去高度，这个现象通常被称为高度塌陷。如果把父元素变为一个 BFC，那么它可以“感知”到浮动元素，从而包裹住浮动元素。这是因为 BFC 在生成时，会计算内部的浮动元素。为了将父元素变为一个 BFC，我们通常会使用 overflow 属性，如：overflow:auto 或者 overflow:hidden。.container { overflow: auto;}制作自适应两栏布局BFC 也可以用于构建布局。比如，常见的两栏布局，左栏固定宽度，右栏自适应：HTML 结构如下：<div class="container"> <div class="left"></div> <div class="right"></div></div>CSS 样式如下：.container { width: 100%;}.left { float: left; width: 200px; height: 200px; background-color: red;}.right { overflow: hidden; height: 200px; background-color: green;}在这个例子中，left 元素设置了浮动，然后 right 元素设置 overflow:hidden，这样 right 就基于 BFC，从而填充剩下的空间。综上，BFC 在处理一些布局问题和元素间的关系时非常有用，它是 CSS 中的一个重要概念，理解和掌握它可以帮助我们更好地应对布局难题。

弹性盒布局模型，通常称为Flexbox，是CSS3中的一种先进布局方式，旨在提供一种更有效的方式来布置、对齐和分配容器内项目的空间，即使它们的尺寸是未知或者是动态变化的。Flexbox布局给予了容器能够扩展项目以填充可用空间，或者收缩它们以防止溢出的能力。Flexbox的主要特点：灵活性：Flexbox允许项目的宽度和高度可以根据容器的空间动态伸缩。方向无关性：与传统的布局（如块布局，基于行，或内联布局，基于列）不同，Flexbox的方向可以是水平的或垂直的，这意味着它不受页面流的限制。容器和项目的区别：在Flexbox中存在两种类型的元素：容器（flex容器）和项目（flex项目）。容器用来定义一个flex环境并包含一些布局属性，项目则是容器的子元素，可以使用不同的属性来控制其自身的排版。对齐：可以轻松地在水平或垂直方向上对齐项目，这在以前的布局模型（如浮动或定位）中通常需要额外的工作。空间分配：当项目占用的空间小于容器的时候，可以控制多余空间的分配方式，或者当空间不足时，控制如何收缩项目。例子：假设我们有一个导航菜单，我们希望菜单项在容器内均匀分布，并且在不同屏幕尺寸上都能保持良好的布局。使用Flexbox，我们可以这样来定义容器和项目：/* Flex Container */.nav-menu { display: flex; justify-content: space-between; /* 分散对齐子项 */}/* Flex Items */.nav-item { flex-grow: 1; /* 允许子项根据需要占据空间 */ text-align: center; /* 文本居中对齐 */}在HTML中，我们的导航菜单可能是这样的：<nav class="nav-menu"> <a class="nav-item" href="#">首页</a> <a class="nav-item" href="#">关于我们</a> <a class="nav-item" href="#">服务</a> <a class="nav-item" href="#">联系方式</a></nav>在上述示例中，.nav-menu是一个flex容器，.nav-item是其子项，也就是flex项目。通过对.nav-menu使用display: flex;属性，我们定义了一个弹性容器，并且使用justify-content: space-between;来确保.nav-item在容器内均匀分布。每个.nav-item都被设置了flex-grow: 1;属性，这意味着所有的子项都会根据可用空间进行伸缩，来占据容器的空间。这样，不管屏幕大小如何变化，菜单项都能保持均匀的布局。Flexbox的这种灵活性和易用性，使得它成为创建响应式布局和现代网页设计必不可少的工具之一。

在 CSS (层叠样式表) 中，选择器的权重由其特定性（specificity）确定。具有更高特定性的样式规则将覆盖较低特定期的规则。以下就是计算特定性的方法：内联样式（Inline Styles）：在 HTML 元素内部使用 style 属性定义的样式。例如 <div style="color: red;"> 的权重是 1000。ID 选择器：如 #content（权重为 0100）。类选择器、属性选择器、伪类选择器：如 .class, [type="text"], :hover（权重为 0010）。元素选择器、伪元素选择器：如 div, p, ::before （权重为 0001）。特殊选择器：*、+、>、~ 这些组合选择器不增加权重。对于 !important 属性权重最高，出现在样式属性值后,如 color: red !important; 。计算权重时，各类选择器的数量是独立计算的，比较权重时，会按照四个层级（四个数字）进行逐级比较，权重高的样式优先生效。例如, ID 选择器的权重更高，所以 #id p（一个 ID 和一个元素，权重为 0101）会覆盖 .class .class .class（三个类，权重为 0030）的样式。可理解各部分权重为 四个 "十进制位"，高位权重大于低位。 请注意：权重只是决定 CSS 样式冲突的一个因素，还应考虑源代码的顺序和继承。

什么是伪类和伪元素伪类伪类（Pseudo-classes）是用来选择 DOM 树之外的信息，或者是无法被常规 CSS 选择器选择的信息。这些可能是元素的特殊状态，或者是根据元素的结构信息（例如：第一个子元素）而选择的元素。伪类使用冒号 :来表达，例如：:hover, :first-child, :nth-child(3)等。一些常见的伪类包括：:hover：鼠标悬停在元素上的状态:active：元素被激活的状态，如被鼠标按下:focus：元素获得焦点的状态:first-child：选中父元素的第一个子元素:last-child：选中父元素的最后一个子元素:nth-child(n)：选中父元素的第 n 个子元素伪元素伪元素（Pseudo-elements）允许你选择并样式化元素的一部分。它们允许你向元素添加特殊效果，或者插入内容到文档中的某个位置。伪元素使用两个冒号 ::来表达，例如：::after, ::before, ::first-letter等。一些常见的伪元素包括：::before：在元素内容的前面插入内容::after：在元素内容的后面插入内容::first-letter：选中块级元素的第一行的第一个字母::first-line：选中块级元素的第一行::selection：选中用户选中的元素部分 伪类和伪元素的区别定义方面：伪类是对元素的特定状态进行选取，而伪元素则是创建出DOM树中不存在的元素。使用规则方面：伪类使用一个冒号 :，而伪元素使用两个冒号 ::。作用对象方面：伪类通常作用在原有元素上，而伪元素是创建新的虚拟元素插入DOM树。数量限制方面：在一个选择器中可以使用多个伪类，而伪元素则限制为一个。 总结伪类和伪元素都是特殊的选择器，它们的作用是选取那些不能通过普通 CSS 选择器选取到的元素或元素的某個狀態。伪类主要是用来基于元素的状态或根据结构来选择元素，而伪元素则是用来选取元素的某个特定部分。