HTML
五大浏览器及内核（截止到2024年4月23日）?
Google Chrome & Microsoft Edge：使用 Blink 内核，Blink是Webkit的一个分支。
Mozilla Firefox：使用 Gecko 内核。
Apple Safari：使用 Webkit 内核。
Opera：使用 Blink 内核。
Internet Explorer (已退役)：已在2022年停用了对Internet Explorer的支持，推荐转用Microsoft Edge。label的作用是什么？
for属性表示Label标签要绑定的HTML 元素，你点击这个标签的时候，所绑定的元素将获取焦点。
<form>
<label for="userName">用户名 : </label>
<input type="text" id="userName" />
</form>
说一下行内和块级元素?
常用行内元素：span、a、img、input、select、label、textarea、button等
块级元素：div、h1、ol、ul、li、p、header、footer等简述一下对HTML语义化的理解
1.去掉或丢失样式的时候能够让页面呈现出清晰的结构。
2.有利于SEO和搜索引擎建立良好沟通，有助于爬虫抓取更多的信息，爬虫依赖于标签来确定上下文和各个关键字的权重。
3.方便其它设备解析。
4.便于团队开发和维护，语义化根据可读性。DOCTYPE有什么作用？标准模式与混杂模式如何区分？它们有何意义?
作用：告诉浏览器使用哪个版本的HTML规范来渲染文档。DOCTYPE不存在或形式不正确会导致HTML文档以混杂模式呈现。
标准模式（Standards mode）以浏览器支持的最高标准运行；
混杂模式（Quirks mode）中页面是一种比较宽松的向后兼容的方式显示。
CSS
页面导入样式时，使用link和@import有什么区别
link属于html标签，而@import是css提供的
页面加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载
link是html标签，因此没有兼容性，而@import只有IE5以上才能识别
link除了引用样式文件，还可以引用图片等资源文件，而@import只引用样式文件
link支持使用Javascript控制DOM去改变样式；而@import不支持。怎么让Chrome支持小于12px 的文字？
-webkit-text-size-adjust:none; //但这个属性在高版本的 Chrome 中已经被废除。
transform: scale();
px,em,rem的区别
px：像素,是相对于显示器屏幕分辨率而言的固定的值。
em：值并不是固定的 , 会继承父级元素的字体大小。
rem：只是相对于html根元素字体大小详解
px：绝对度量单位，就是像素
em：相对度量单位，但是计算起来实在费劲。em指的是相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。换句话说，如果当前div的字体大小是12像素，那么1em就是12像素，如果div字体大小是24像素，1em就是24像素。
rem：也是和字体相关的相对度量单位，但是，rem是相对于根元素的字体大小进行设置的，如果html元素中的字体大小设置为24px，那么针对任意html内的元素设置1rem，均表示的是24px，大大节省了我们计算字体大小的时间。calc, support, media各自的含义及用法？
@support主要是用于检测浏览器是否支持CSS的某个属性，其实就是条件判断，如果支持某个属性，你可以写一套样式，如果不支持某个属性，你也可以提供另外一套样式作为替补。
@supports (display: flex) { div { display: flex; }}
@supports not (display: flex) { div { float: right; }}
calc()函数用于动态计算长度值。 calc()函数支持 "+", "-", "*", "/" 运算；
width:calc(100% - 30px) / 4; //注意:符号前后都需要加空格
- @media查询，你可以针对不同的媒体类型定义不同的样式。特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
@media screen and (min-width:960px){
body{background:orange;}
}
css水平、垂直居中的写法，请至少写出4种？
水平居中
text-align: center; /* 行内元素*/
margin: 0 auto; /* 块级元素*/
position:absolute;left:50%;transform:translateX(-50%);
display:flex; justify-content: center;
垂直居中
height: 100px;line-height: 100px;
position：absolute;top:50%;transform:translateY(-50%);
display:flex; align-items: center;
display:table+display:table-cell; vertical-align: middle;
- 画一条0.5px的直线？
height: 1px;transform: scaleY(0.5);
- 说一下盒模型？
盒模型的组成，由里向外content,padding,border,margin;
在IE盒子模型中，width表示content+padding+border这三个部分的宽度。
在标准的盒子模型中，width指content部分的宽度。
box-sizing(默认值:content-box)的使用。
box-sizing: content-box; /* 是W3C盒子模型。*/
box-sizing: border-box; /* 是IE盒子模型。*/
- 浏览器是怎样解析CSS选择器的?
CSS选择器的解析是从右向左解析的。
display的值及其作用?
inline：（默认值）：表示指定对象为内联元素。
none： 表示隐藏对象，与visibility属性的hidden值不同，display：none不为被隐藏的对象保留物理空间 ，然visibility：hidden就保留。
block： 指定对象为块元素。
list-item： 指定对象为列表项目。
inline-block： 指定对象为内联块元素。
table： 指定对象作为块元素级的表格。
inline-table： 指定对象作为内联元素级的表格。
flex： 将对象设置为弹性布局。说一下你理解的hack?
CSS hack的目的就是使你的CSS代码兼容不同的浏览器。CSS继承性?
不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承。
所有元素可继承:visibility和cursor。
<a>标签的文字颜色和下划线是不能继承的。
<h>标签的文字大小是不能继承的。定位流
position: relative; /* 相对定位就是相对于原来在标准流中的位置进行移动。*/
position: absolute; /* 默认情况下是以body为参考点,如果祖先元素中有一个元素也是定位流(相对定位、绝对定位、固定定位),那么就是以这个元素为参考点。*/
- 实现移动端1px边框
1、viewport + rem 实现
同时通过设置对应viewport的rem基准值，这种方式就可以像以前一样轻松愉快的写1px了。
在devicePixelRatio = 2 时，输出viewport：
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
在devicePixelRatio = 3 时，输出viewport：
<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">
2、box-shadow模拟边框，利用css 对阴影处理的方式实现0.5px的效果
box-shadow: inset 0px -1px 1px -1px #c8c7cc;
3、transform实现
transform: scaleY(.5); //横线
- CSS3新特性有那些
颜色：新增rgba()
文字阴影：text-shadow: ;
边框：圆角border-radius: ;边框阴影box-shadow: ;
盒子模型：box-sizing: ;
背景：bacground-size: ;设置图片的尺寸
background-origin: ;设置图片的原点
background-clip: ;设置背景图片的剪裁区域
渐变：linear-gradient radial-gradient
例：
background:linear-gradient(red, blue);
过度：transition: ;可以实现动画
自定义动画：@keyframes
唯一引入的伪元素：::selection
媒体查询：@media
例：
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
边框图像：border-image
例：
border-image:url(border.png) 30 round;
- 说一下伪类和伪元素?
动态伪类选择器
:hover
:active
UI元素状态伪类选择器
-适用于表单验证，例如input可用或不可用
:enabled
:disabled
input:enabled {
background: green;
}
input:disabled {
background: #f4f4f4;
}
<input type="text" disabled>
<input type="text">
伪元素用于想某些选择器设置特殊效果
-为了和伪类区分开，伪元素需要写两个冒号（::）
::first-letter 设置第一个字的样式
::first-line 设置第一行的样式
::before
::after
