20230829-面试题html+css5道题记录

css预处理工具

参考答案：
CSS 预处理器是一个能让你通过预处理器自己独有的语法来生成CSS的程序。
css预处理器种类繁多，三种主流css预处理器是Less、Sass（Scss）及Stylus；它们各自的背景如下: Sass：
2007年诞生，最早也是最成熟的CSS预处理器，拥有ruby社区的支持和compass这一最强大的css框 架，目前受LESS影响，已经进化到了全面兼容CSS的SCSS（SCSS 需要使用分号和花括号而不是换行和缩进）。
Less：
2009年出现，受SASS的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手，在
ruby社区之外支持者远超过SASS。其缺点是比起SASS来，可编程功能不够。优点是简单和兼容CSS， 反过来也影响了SASS演变到了SCSS的时代，著名的Twitter Bootstrap就是采用LESS做底层语言的。
Stylus：
2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，在此社区之内有一定支持 者，在广泛的意义上人气还完全不如SASS和LESS。
比较
在使用 CSS 预处理器之前最重要的是理解语法，幸运的是基本上大多数预处理器的语法跟 CSS 都差不多。
首先 Sass 和 Less 都使用的是标准的 CSS 语法，因此如果可以很方便的将已有的 CSS 代码转为预处理器代码，默认 Sass 使用 .sass 扩展名，而 Less 使用 .less 扩展名。
这是一个再普通不过的，不过 Sass 同时也支持老的语法，就是不包含花括号和分号的方式：
而 Stylus 支持的语法要更多样性一点，它默认使用 .styl 的文件扩展名，下面是 Stylus 支持的语法
可以在同一个样式单中使用不同的变量，例如下面的写法也不会报错：

行内元素和块级元素什么区别，然后怎么相互转换

参考答案: 块级元素
1.总是从新的一行开始，即各个块级元素独占一行，默认垂直向下排列；
2.高度、宽度、margin及padding都是可控的，设置有效，有边距效果；
3.宽度没有设置时，默认为100%；
4.块级元素中可以包含块级元素和行内元素。
行内元素
1.和其他元素都在一行，即行内元素和其他行内元素都会在一条水平线上排列；
2.高度、宽度是不可控的，设置无效，由内容决定。
3.根据标签语义化的理念，行内元素最好只包含行内元素，不包含块级元素。
转换
当然块级元素与行内元素之间的特性是可以相互转换的。HTML可以将元素分为行内元素、块状元素和 行内块状元素三种。
使用display属性能够将三者任意转换：
(1)display:inline;转换为行内元素；
(2)display:block; 转 换 为 块 状 元 素 ； (3)display:inline-block;转换为行内块状元素。

块元素哪些属性可以继承？

参考答案：
text-indent、text-align、visibility、cursor

盒子模型

参考答案：
1.概念
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括： 外边距（margin） 、 边框
（border） 、 内边距（padding） 、 实际内容（content） 四个属性。
CSS盒模型：标准模型 + IE模型
1.1W3C盒子模型(标准盒模型)
1.2IE盒子模型(怪异盒模型)
2.标准模型和IE模型的区别计算宽度和高度的不同
标准盒模型：盒子总宽度/高度 = width/height + padding + border + margin 。（ 即
width/height 只是内容高度，不包含 padding 和 border 值 ）
IE盒子模型：盒子总宽度/高度 =
border) + margin。（ 即 width/height 包含了 padding 和 border 值 ）
3.CSS如何设置这两种模型
标准： box-sizing: content-box; ( 浏览器默认设置 ) IE： box-sizing: border-box;
4.JS如何获取盒模型对应的宽和高
（1）dom.style.width/height 只能取到行内样式的宽和高，style 标签中和 link 外链的样式取不到。
（2）dom.currentStyle.width/height （只有IE兼容）取到的是最终渲染后的宽和高
（3）window.getComputedStyle(dom).width/height 同（2）但是多浏览器支持，IE9 以上支持。
（4）dom.getBoundingClientRect().width/height 也是得到渲染后的宽和高，大多浏览器支持。IE9 以上支持，除此外还可以取到相对于视窗的上下左右的距离。
（6） dom.offsetWidth/offsetHeight 包括高度（宽度）、内边距和边框，不包括外边距。最
常用，兼容性最好。

BFC: 块级格式化上下文

BFC基本概念： BFC 是
不会影响到外部的元素 。

布局的一个概念，是一块独立的渲染区域，是一个环境，里面的元素

父子元素和兄弟元素边距重叠，重叠原则取最大值。空元素的边距重叠是取
的最大值。

BFC原理（渲染规则|布局规则）：

与 padding
（1）内部的 会在垂直方向，从顶部开始一个接着一个地放置；
（2） Box 垂直方向的距离由
margin 会发生重叠；
(外边距)决定，属于同一个
的两个相邻 的
（3）每个元素的
的左边， 与包含块
的左边相接触，（对于从左到右
的格式化，否则相反）。即使存在浮动也是如此；
（4）BFC 在页面上是一个隔离的独立容器，外面的元素不会影响里面的元素，反之亦然。文字环绕效果，设置 float ；
（5）BFC 的区域不会与 重叠（清浮动）;
（6）计算 的高度时，浮动元素也参与计算。
5.3CSS在什么情况下会创建出BFC（即脱离文档流）
0、根元素，即 HTML 元素（最大的一个 BFC ）
1、浮动（ float 的值不为 none ）
2、绝对定位元素（ position 的值为 absolute 或 fixed ）
3、行内块（ display 为 inline-block ）
4、表格单元（ display 为 table、table-cell、table-caption、inline-block 等 HTML
)
5、弹性盒（ ）
6、默认值。内容不会被修剪，会呈现在元素框之外（ overflow 不为 visible ）
5.4BFC作用（使用场景）
1、自适应两（三）栏布局（避免多列布局由于宽度计算四舍五入而自动换行）
2、避免元素被浮动元素覆盖
3、可以让父元素的高度包含子浮动元素，清除内部浮动（原理：触发父 的 属性，使下面的子
都处在父 div 的同一个区域之内）
4、去除边距重叠现象，分属于不同的