14、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
- 行内元素有：a b span img input select strong；
- 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p；
- 空元素，即没有内容的HTML元素。空元素是在开始标签中关闭的，也就是空元素没有闭合标签：
常见的有：<br>、<hr>、<img>、<input>、<link>、<meta>；
鲜见的有：<area>、<base>、<col>、<colgroup>、<command>、<embed>、<keygen>、<param>、<source>、<track>、<wbr>。
15、说一下 HTML5 drag api？
- drastart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。
- darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。
- dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
- dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。
- dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。
- drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。
- dragend：事件主体是被拖放元素，在整个拖放操作结束时触发
16、？
二、css 系列 ⭐⭐⭐⭐⭐
1、BFC的理解？
1.BFC（Block Formatting Context），即块级格式化上下⽂，它是⻚⾯中的⼀块渲染区
域，并且有⼀套属于⾃⼰的渲染规则：
- 内部的盒⼦会在垂直⽅向上⼀个接⼀个的放置
- 对于同⼀个BFC的俩个相邻的盒⼦的margin会发⽣重叠，与⽅向⽆关。
- 每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
- BFC的区域不会与float的元素区域重叠
- 计算BFC的⾼度时，浮动⼦元素也参与计算
- BFC就是⻚⾯上的⼀个隔离的独⽴容器，容器⾥⾯的⼦元素不会影响到外⾯的元素，反之亦然
- BFC⽬的是形成⼀个相对于外界完全独⽴的空间，让内部的⼦元素不会影响到外部的元素
2.触发BFC的条件包含不限于：
- 根元素，即HTML元素
- 浮动元素：float值为left、right
- overflow值不为 visible，为 auto、scroll、hidden
- display的值为inline-block、inltable-cell、table-caption、table、inlinetable、flex、inline-flex、grid、inline-grid
- position的值为absolute或fixed
3.利⽤BFC的特性，我们将BFC应⽤在以下场景：
- 防⽌margin重叠（塌陷）
- 清除内部浮动
- ⾃适应多栏布局
2、说说你对盒模型的理解？
盒模型其实就是浏览器把⼀个个标签都看成⼀个矩形盒⼦，每个盒⼦都由:内容、内边距、边框、外边距四部分组成.
盒模型分为,标准盒模型和怪异盒模型
区别： 标准盒模型的宽高只包含内容，不包含其他部分 怪异盒模型的宽高包含了内容、内边距和边框部分
通过box-sizing属性设置盒模型
border-box //怪异盒模型content-box //标准盒模型
3、如何实现元素⽔平垂直居中？
已知宽高：
1. 定位：
绝对定位 top：50%；left；50%；margin负的自身宽高的一半
2. 定位：
绝对定位 top：50%；left；50%；transform（-50%, -50%）负百分之五十
3. grid⽹格布局
设置父元素为display: grid;使用 grid-auto-columns 和 grid-auto-rows 属性将网格单元格大小设置为 auto ，然后使用 justify-content 和 align-content 属性将格子垂直和水平居中。
未知宽高：
2. 定位：
元素绝对定位 上下左右（0）margin：auto；
3. 弹性盒子：
父元素设置flex弹性盒,然后使用justify-content: center,align-items: center居中
4. table布局
设置⽗元素为 display:table-cell ，⼦元素设置 display: inline-block 。利⽤ vertical和 text-align 可以让所有的⾏内块级元素⽔平垂直居中
4、CSS如何画⼀个三⻆形？原理是什么？
通常情况下我们会使⽤图⽚或者 svg 去完成三⻆形效果图，但如果单纯使⽤ css 如何完成⼀个三⻆
形呢？其实实现过程似乎也并不困难，通过边框就可完成
实现过程：
设置一个宽高为零的元素，然后设置它的border边框为50px或更大，最后给个颜色值，把另外三个边框的宽度改为零
5、说说em/px/rem/vh/vw区别？
em/px/rem/vh/vw区别如下：
px：绝对单位，⻚⾯按精确像素展示
em：相对单位，基准点为⽗节点字体的⼤⼩，如果⾃身定义了 font-size 按⾃身来计算，整个⻚⾯内1em 不是⼀个固定的值
rem：相对单位，可理解为 root em , 相对根节点 html 的字体⼤⼩来计算
vh、vw：主要⽤于⻚⾯视⼝⼤⼩布局，在⻚⾯布局上更加⽅便简单
6、脱离文档流的方法？
脱离文档流指的是将元素从正常的 HTML 文档的布局流中取出，使其不占据文档流空间的一种技术。
下面列举了几种常见的脱离文档流的方法：
- position 属性为 absolute 或 fixed：使用绝对定位或固定定位可以将元素从正常的文档流中取出，但是需要注意的是，这会导致元素与其他元素的重叠，因此需要使用 z-index 属性进行层级控制。
- float 属性：使用浮动可以将元素从正常的文档流中取出，但是需要注意的是，浮动会影响元素后续元素的位置布局，需要通过清除浮动来避免对后续元素的影响。
- transform 属性：使用 transform 属性对元素进行旋转、缩放等变换操作，可以将元素从正常的文档流中取出，但是需要注意的是，元素仍然会占据原来的空间位置，只是在视觉上进行了变换，如果需要完全从文档流中取出，还需要结合 absolute 或 fixed 定位。
- display 属性为 inline-block 或 table-cell：使用 inline-block 或 table-cell 可以将元素从正常的文档流中取出，但是需要注意的是，这会将元素变成行内块状或表格单元格状，需要注意在布局时的样式调整。
7、css选择器大全？
- **标签选择器：**通过 HTML 标签名选择元素，如 p、div、ul。
- **类选择器：**通过类名选择元素，使用 .class，如 .container、.red-text。
- **ID 选择器：**通过元素 ID 选择元素，使用 #id，如 #header、#main。
- **后代选择器：**选择指定的后代元素，在两个选择器之间加上空格，如 ul li、.container p。
- **子元素选择器：**选择指定的子元素，在父元素后加 >，如 .container > h1。
- **相邻兄弟选择器：**选择紧接在另一元素后的元素，在选择器后加 +，如 h1 + p。
- **通用选择器：**选择所有元素，使用 *，如 *。
- **属性选择器：**通过元素属性选择元素，有以下三种方式：
- [attribute]：选择具有指定属性的元素，如 [href]。
- [attribute=value]：选择具有指定属性和值的元素，如 [class=container]。
- [attribute*=value]：选择具有包含指定值的属性的元素，如 [class*=col]。
- **伪类选择器：**表示元素的特殊状态或位置，有以下几种方式：
- :hover：鼠标悬停在元素上时应用的样式。
- :active：元素被激活时应用的样式。
- :focus：元素在聚焦时应用的样式。
- :nth-child(n)：指定位置的子元素应用的样式，如 li:nth-child(2) 表示选择第二个 li 元素。
- :first-child：选择父元素下的第一个子元素。
- :last-child：选择父元素下的最后一个子元素。
这些是常用的 CSS 选择器，不同的选择器可以组合使用，实现更加精确的元素选择。
8、在flex布局中使用position：absolute会怎么样？
在使用 Flex 布局时，子元素如果设置了 position: absolute，会脱离 Flex 布局，并且不再占据父容器的空间。因此，Flex 容器会忽略该元素，而其他子元素会根据自身的尺寸和 Flex 属性进行排列。
具体来说，对于一个设置了 position: absolute 的子元素，它的位置和尺寸是相对于最近的非 static 定位的祖先元素（或者根元素）计算的。这意味着它不再受到 Flex 容器的对齐和排列控制，而是完全自由定位的。
下面是一个例子：
<div class="container"> <div class="box box-1"></div> <div class="box box-2"></div> <div class="box box-3"></div> </div>
.container { display: flex; justify-content: center; align-items: center; } .box { width: 100px; height: 100px; } .box-1 { background-color: red; } .box-2 { background-color: blue; position: absolute; right: 0; top: 0; } .box-3 { background-color: green; }
如上所示，我们在 Flex 容器中的第二个子元素（box-2）上设置了 position: absolute，它将不再占据父容器的空间，并且不会被 Flex 容器控制。
因此，box-1 和 box-3 会按照 Flex 容器的对齐和排列方式进行排列，而 box-2 则会被放置在父容器的右上角，其位置和尺寸由 position 和 top、right 属性决定。
9、calc, support, media各自的含义及用法？
calc、support、media 是 CSS3 新增的三种常用语法和功能，分别用于计算样式属性值、检测浏览器对某一特性的支持及针对不同设备或方式媒体类型设置样式。
1.calc
calc() 函数可以让我们在 CSS 中进行简单的数学计算，以得到更灵活的样式效果。它允许在 CSS 属性中使用数学表达式，以便轻松地进行计算，如下所示：
width: calc(100% - 20px); height: calc(50vh - 10%);
其中 calc() 函数中可以包含 +、-、*、/ 和括号等运算符，用来完成基本的四则运算，以及百分比、长度、角度和时间等多个单位的计算。
2.@support
支持检测是指检查浏览器是否支持某些 CSS 属性、函数或特性。@supports 规则可以用来测试浏览器是否支持某项 CSS 特性。示例如下：
@supports (display: grid) { /* 支持 Grid 布局 */ .container { display: grid; grid-template-columns: repeat(3, 1fr); } }
这里，只有浏览器支持 Grid 布局时，@supports 规则中的 CSS 代码才会被应用。
3.@media
@media 规则用于设置针对不同设备或方式、不同媒体类型的样式。它可以根据屏幕大小、分辨率、设备类型等条件来设置不同的样式，以便为不同的用户提供最佳的用户体验。示例如下：
@media (max-width: 768px) { /* 当屏幕宽度小于等于 768px 时应用的样式 */ .container { width: 100%; margin-left: 0; } }
在 @media 规则中，我们可以使用多个 CSS 属性来设置针对特定条件的样式，如 max-width、min-width、orientation、resolution 等属性。
总的来说，calc、@support 和 @media 是 CSS3 中非常实用的新功能，可以让开发者更灵活地设置样式和布局，提高网站的响应性和用户体验。
10、关于弹性盒子的所有属性，及详解？
弹性盒子（Flexbox）布局是 CSS3 中新增的一种布局方式，其可以方便地处理现代 Web 页面中常见的各种布局问题，如横向居中、垂直居中、等高布局、自适应布局等。关于弹性盒子的所有属性，下面逐一进行详解：
- 1.display
设置弹性盒子的显示方式，取值为 flex 或 inline-flex，其中 flex 表示块级弹性盒子，inline-flex 表示行内弹性盒子。
- 2.flex-direction
设置主轴的方向，取值为 row（默认值）、row-reverse、column 和 column-reverse。其中 row 表示主轴为水平方向，起点在左端；row-reverse 表示主轴为水平方向，起点在右端；column 表示主轴为垂直方向，起点在上沿；column-reverse 表示主轴为垂直方向，起点在下沿。
- 3.flex-wrap
设置是否换行及如何换行，取值为 nowrap（默认值）、wrap 和 wrap-reverse。其中 nowrap 表示不换行；wrap 表示按顺序换行；wrap-reverse 表示按倒序换行。
- 4.flex-flow
flex-flow 是 flex-direction 和 flex-wrap 的简写形式，其语法为：flex-flow: ; 例如：flex-flow: row wrap; 表示主轴方向为水平，同时换行。
- 5.justify-content
设置主轴上的对齐方式，取值为 flex-start（默认值）、flex-end、center、space-between 和 space-around。其中 flex-start 表示左对齐，flex-end 表示右对齐，center 表示居中对齐，space-between 表示两端对齐且项目之间的间隔相等，space-around 表示每个项目两侧的间隔相等且与其他项目之间的间隔不同。
- 6.align-items
设置交叉轴上的对齐方式，取值为 flex-start、flex-end、center、baseline 和 stretch。其中 flex-start 表示顶部对齐，flex-end 表示底部对齐，center 表示居中对齐，baseline 表示基线对齐，stretch 表示项目高度自动填充整个容器。
- 7.align-content
设置多根轴线（有多行时）的对齐方式，取值与 justify-content 相同。如果只有一行，则该属性不起作用。
弹性盒子项目的属性
- 1.order
设置项目的排列顺序，数值越小，越靠前，默认为 0。
- 2.flex-grow
设置项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。
- 3.flex-shrink
设置项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。
- 4.flex-basis
设置项目的基准值，在分配多余空间之前，项目占据的主轴空间，默认值为 auto 表示由项目本身计算得出。
- 5.flex
flex 是 flex-grow、flex-shrink 和 flex-basis 的简写形式，其语法为：flex: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]，例如：flex: 1 0 auto; 表示一个放大比例为 1、缩小比例为 0、基准值为 auto 的项目。
- 6.align-self
设置单个项目在交叉轴方向上的对齐方式，取值与 align-items 相同，但是它只作用于单个项目，而不是整个容器。
11、css可以继承的属性？
在 CSS 中，有些属性是可以继承的，子元素会从其父元素继承这些值，以避免反复书写相同的样式。以下是一些常见的可以被子元素继承的属性：
1.字体系列（font-family）
设置在父元素上的字体系列会被子元素继承，除非子元素中有自己定义的字体系列。
2.字号（font-size）
父元素上定义的字号也可以被子元素继承，但是在继承的同时子元素可能会基于自己的盒模型计算具体字号，从而得到不同的尺寸。
3.字重（font-weight）
如同字体系列和字号一样，子元素也可以从父级继承 font-weight 的值。
4.行高（line-height）
行高是文字行内高度的度量标准。因为在默认情况下，line-height 取值为 normal（通常是当前字体大小的 1.2 到 1.5 倍），所以设置在父元素上的行高通常也会被子元素继承。
5.颜色（color）
父元素设置的文本颜色也可以被子元素继承，不过在许多情况下子元素会通过类名或 ID 选择器的方式来覆盖父级颜色。
6.列表样式（list-style）
如果将 list-style 属性定义在某个 ul 或 ol 元素上，那么它的子元素也可以继承该属性值。
7.文本方向（direction）、文本对齐（text-align）和文本缩进（text-indent）
文本方向、文本对齐和文本缩进这三个属性也可以被子元素继承。但是要注意，在设置对齐时，行内元素的实际位置可能要基于其自身的内部盒模型计算而非从父级继承。
并不是所有的 CSS 属性都可以被继承，有些属性设计为不能继承，例如 width、height、background 等。
