HTML和CSS常見面試題

css 選擇符：

1.id選擇器（ # myid）

2.類選擇器（.myclassname）

3.標籤選擇器（div, h1, p）

4.相鄰選擇器（h1 + p）

5.子選擇器（ul > li）

6.後代選擇器（li a）

7.萬用字元選擇器（ * ）

8.屬性選擇器（a[rel = 「external」]）

9.偽類選擇器（a: hover, li:nth-child）

可以繼承的屬性：

可繼承的樣式： font-size font-family color, ul li dl dd dt;

不可繼承的樣式：border padding margin width height ;

優先順序：

!important > id > class > tag

important 比內聯優先順序高,但內聯比 id 要高

css3新增偽類舉例：

p:first-of-type 選擇屬於其父元素的首個 p 元素

p:last-of-type 選擇屬於其父元素的最後 p 元素

p:only-of-type 選擇屬於其父元素唯一的 p 元素

p:only-child 選擇屬於其父元素的唯一子元素的 p 元素。

p:nth-child(2) 選擇屬於其父元素的第二個子元素的每個 p 元素。

:enabled :disabled 控制表單控制項的禁用狀態。

:checked 單選框或核取方塊被選中。

塊級元素：div ,p,h1,form,ul,li

行內元素：span,a,label,input,img,strong,em,button;

css盒模型：內容，padding,border,margin;

1、顏色：新增rgba、hsla模式

2、文字陰影(text-shadow)

3、邊框：圓角（border-radius）邊框陰影：box-shadow

4、盒子模型：box-sizing

5、背景：background-size設定背景的尺寸，background-origin設定背景的原點，background-clip設定背景的裁剪區域，以「，」分隔可以設定多背景，用於自適應布局

6、漸變：linear-gradient、radial-gradient

7、過渡：transition可實現動畫

8、自定義動畫

9、在css3中唯一引入的偽元素是::selection

10、多**查詢、多欄布局

11、border-image

12、2d轉換：transform:translate(x,y)rotate(x,y)skew(x,y)scale(x,y)

13、3d轉換

css 精靈圖，把一堆小的整合到一張大的（png）上，減輕伺服器對的請求數量。

css精靈把一堆小的整合到一張大的上，減輕伺服器對的請求數量

css sprites其實就是把網頁中一些背景整合到一張檔案中，再利用css的"background-image","background-position"的組合進行背景定位，這樣可以減少。

很多請求的開銷，因為請求耗時比較長；請求雖然可以併發，但是如果請求太多會給伺服器增加很大的壓力。

鏈結

結構是html,表現是css

就是讓瀏覽器更好的讀懂你寫的**，在進行html結構、表現、行為設計時，盡量使用語義化的標籤，使程式**簡潔明瞭，易於進行web操作和**seo，方便團隊的一種標準，以圖實現一種「無障礙」的web開發。

結構層、表示層、行為層

結構層（structural layer）：由html或xhtml之類的標記語言負責建立。

表示層（presentation layer）:由css負責建立。

行為層（beh**iorlayer）:負責回答「內容應該如何對事件做出反應」這一問題。這是 j**ascript 語言和 dom主宰的領域。

display:none;使用該屬性後，html元素（物件）的寬高，高度等各種屬性值都將「丟失」；

visibility:hidden;使用該屬性後，html元素（物件）僅僅是在視覺上看不見（完全透明），而它所佔據的空間位置仍然存在，也即是說它仍然具有高度，寬度等屬性值。

首先，需要把元素的寬高設定為0，然後設定邊框樣式。

width
: 0;
height
: 0;
border-top
: 40px solid transparent;
border-left
: 40px solid transparent;
border-right
: 40px solid transparent;
border-bottom
: 40px solid #00ff00;

不同瀏覽器的標籤預設的margin和padding不一樣。

因為瀏覽器的相容問題，不同瀏覽器對有些標籤的預設值是不同的，如果沒對css初始化往往會出現瀏覽器之間的頁面顯示差

*

static（預設）：按照正常文件流進行排列；

relative（相對定位）：不脫離文件流，參考自身靜態位置通過 top, bottom, left, right 定位；

absolute(絕對定位)：參考距其最近乙個不為static的父級元素通過top, bottom, left, right 定位；

fixed(固定定位)：所固定的參照對像是可視視窗。

div

浮動元素的左右居中：

div

浮動元素的上下左右居中：

div

固定定位只需要注意子絕父相，子元素設定absolute，父元素要設定relativeinline（預設）–內聯

none–隱藏

block–塊顯示

table–**顯示

list-item–專案列表

inline-block–行內塊

自動變成display:block

使用偶數字型。偶數字型大小相對更容易和 web 設計的其他部分構成比例關係。windows 自帶的點陣宋體（中易宋體）從 vista 開始只提供 12、14、16 px 這三個大小的點陣，而 13、15、17 px時用的是小一號的點。（即每個字佔的空間大了 1 px，但點陣沒變），於是略顯稀疏。

HTML和CSS常見面試題

HTML常見面試題

CSS常見面試題

常見面試題

相關推薦