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.去掉或丟失樣式的時候能夠讓頁面呈現(xiàn)出清晰的結構脉执。
2.有利于SEO和搜索引擎建立良好溝通疼阔，有助于爬蟲抓取更多的信息，爬蟲依賴于標簽來確定上下文和各個關鍵字的權重半夷。
3.方便其它設備解析婆廊。
4.便于團隊開發(fā)和維護，語義化根據(jù)可讀性巫橄。DOCTYPE有什么作用淘邻？標準模式與混雜模式如何區(qū)分？它們有何意義?
作用：告訴瀏覽器使用哪個版本的HTML規(guī)范來渲染文檔湘换。DOCTYPE不存在或形式不正確會導致HTML文檔以混雜模式呈現(xiàn)宾舅。
標準模式（Standards mode）以瀏覽器支持的最高標準運行统阿；
混雜模式（Quirks mode）中頁面是一種比較寬松的向后兼容的方式顯示。
CSS
頁面導入樣式時筹我，使用link和@import有什么區(qū)別
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的區(qū)別
px：像素,是相對于顯示器屏幕分辨率而言的固定的值破镰。
em：值并不是固定的 , 會繼承父級元素的字體大小餐曼。
rem：只是相對于html根元素字體大小詳解
px：絕對度量單位，就是像素
em：相對度量單位鲜漩，但是計算起來實在費勁。em指的是相對于當前對象內文本的字體尺寸集惋。如當前對行內文本的字體尺寸未被人為設置孕似，則相對于瀏覽器的默認字體尺寸。換句話說刮刑，如果當前div的字體大小是12像素喉祭，那么1em就是12像素，如果div字體大小是24像素雷绢，1em就是24像素泛烙。
rem：也是和字體相關的相對度量單位，但是翘紊，rem是相對于根元素的字體大小進行設置的蔽氨，如果html元素中的字體大小設置為24px，那么針對任意html內的元素設置1rem帆疟，均表示的是24px鹉究，大大節(jié)省了我們計算字體大小的時間。calc, support, media各自的含義及用法踪宠？
@support主要是用于檢測瀏覽器是否支持CSS的某個屬性自赔，其實就是條件判斷，如果支持某個屬性柳琢，你可以寫一套樣式绍妨，如果不支持某個屬性润脸，你也可以提供另外一套樣式作為替補。
@supports (display: flex) { div { display: flex; }}
@supports not (display: flex) { div { float: right; }}
calc()函數(shù)用于動態(tài)計算長度值他去。 calc()函數(shù)支持 "+", "-", "*", "/" 運算毙驯；
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：（默認值）：表示指定對象為內聯(lián)元素。
none： 表示隱藏對象纫事，與visibility屬性的hidden值不同勘畔，display：none不為被隱藏的對象保留物理空間 ，然visibility：hidden就保留丽惶。
block： 指定對象為塊元素炫七。
list-item： 指定對象為列表項目。
inline-block： 指定對象為內聯(lián)塊元素钾唬。
table： 指定對象作為塊元素級的表格万哪。
inline-table： 指定對象作為內聯(lián)元素級的表格。
flex： 將對象設置為彈性布局知纷。說一下你理解的hack?
CSS hack的目的就是使你的CSS代碼兼容不同的瀏覽器壤圃。CSS繼承性?
不是所有的屬性都可以繼承, 只有以color/font-/text-/line-開頭的屬性才可以繼承。
所有元素可繼承:visibility和cursor琅轧。
<a>標簽的文字顏色和下劃線是不能繼承的伍绳。
<h>標簽的文字大小是不能繼承的。定位流
position: relative; /* 相對定位就是相對于原來在標準流中的位置進行移動乍桂。*/
position: absolute; /* 默認情況下是以body為參考點,如果祖先元素中有一個元素也是定位流(相對定位冲杀、絕對定位效床、固定定位),那么就是以這個元素為參考點。*/
- 實現(xiàn)移動端1px邊框
1权谁、viewport + rem 實現(xiàn)
同時通過設置對應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 對陰影處理的方式實現(xiàn)0.5px的效果
box-shadow: inset 0px -1px 1px -1px #c8c7cc;
3运嗜、transform實現(xiàn)
transform: scaleY(.5); //橫線
- CSS3新特性有那些
顏色：新增rgba()
文字陰影：text-shadow: ;
邊框：圓角border-radius: ;邊框陰影box-shadow: ;
盒子模型：box-sizing: ;
背景：bacground-size: ;設置圖片的尺寸
background-origin: ;設置圖片的原點
background-clip: ;設置背景圖片的剪裁區(qū)域
漸變：linear-gradient radial-gradient
例：
background:linear-gradient(red, blue);
過度：transition: ;可以實現(xiàn)動畫
自定義動畫：@keyframes
唯一引入的偽元素：::selection
媒體查詢：@media
例：
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
邊框圖像：border-image
例：
border-image:url(border.png) 30 round;
- 說一下偽類和偽元素?
動態(tài)偽類選擇器
:hover
:active
UI元素狀態(tài)偽類選擇器
-適用于表單驗證，例如input可用或不可用
:enabled
:disabled
input:enabled {
background: green;
}
input:disabled {
background: #f4f4f4;
}
<input type="text" disabled>
<input type="text">
偽元素用于想某些選擇器設置特殊效果
-為了和偽類區(qū)分開悯舟，偽元素需要寫兩個冒號（::）
::first-letter 設置第一個字的樣式
::first-line 設置第一行的樣式
::before
::after
