CSS 選擇器中，元素選擇器和類選擇器的差異是什麼？

元素選擇器是最常見的 CSS 選擇器，即，文檔的元素便是最基本的選擇器。選擇器通常是某個 HTML 元素，比方

、

、、等，乃至可所以元素自身。

類選擇器用於將款式規則與順便 class 特點的元素匹配，其間該 class 特點的值為類選擇器中指定的值。運用類選擇器時，首要需求界說款式類，其語法為：

.className{ }

一切能夠順便 class 特點的元素都能夠運用此款式聲明。只需求將 class 特點的值設置為“className”，則能夠將類選擇器的款式與元素相關。

在實際運用時，假如需求為某種元素界說款式，則通常運用元素選擇器；假如要運用款式而不思考具體規劃的元素，最常用的辦法便是運用類選擇器。

簡要描繪 CSS 中的定位機制。

CSS 中，除了默許的流定位方式以外，還有如下幾種定位機制：起浮定位、相對定位、肯定定位和固定定位。

起浮定位是指將元素掃除在一般流以外，而且將它放置在包含框的左面或許右邊，可是照舊坐落包含框以內。

如果你現在在學前端或者工作是前端，歡迎加入我們大前端交流學習裙575546903,獲取大量學習資料，還有大神解答問題,你們可以訂閱轉發一下

一、首要，依照一般流和非一般流來分類：

①一般流：便是依照上下左右的次序一行一行擺放的，長度不夠就會主動擠到下一行。

②非一般流：望文生義便是脫離一般流的，在一般流上面是不佔有方位的。css有position的款式，position包含：static，relative，absolute，fixed四種值。其間static是歸於一般流；relative也是歸於特別的一般流，具體下面有介紹；absolute和fixed以及float便是歸於非一般流的，加載的時候，也會次序加載，可是會脫離一般流的方位。

如果你現在在學前端或者工作是前端，歡迎加入我們大前端交流學習裙575546903,獲取大量學習資料，還有大神解答問題,你們可以訂閱轉發一下

二、分別介紹static,relative,absolute,fixed和float（經過top,left,right,bottom來設置相對定位）

①static：便是默許的一般流，不手動設置position款式的話，默許便是static；

②relative：叫相對定位，指的是相對他自個本來的方位的相對方位，而且本來的方位仍是佔著的（所以說歸於特別的一般流），別的的元素不會填上去，可是設置好相對方位以後，他新的方位是不會揉捏別的元素的，就像把該元素從本來的方位上摳出來，放在獨自一層來規劃。

③absolute:叫肯定定位，指的是①相對其父元素方位的肯定定位，可是他歸於非一般流，②本來的方位是不會佔著的，是獨自的一層，脫離了一般流。除了以上兩點，別的的和relative差不多。

④fixed：叫固定定位，指的是元素相對於瀏覽器窗口的定位（比方一些網站兩頭的廣告），拉動滾動條，他也不會跟著動，也是歸於非一般流，別的的跟relative差不多。

⑤float：叫起浮，是css獨自的款式，有top，right，bottom，left四種常用值，以上四個是歸於position的一種；float也是歸於一般流，單會改動一般流。他只能和一般流在同一層，可是能夠改動元素的方位，同樣是佔著方位的（和relative有點像），不會獨自一層（而relative，absolute，fixed會獨自一層，能夠設置z-index特點來改動其前後方位）。運用float以後，元素則會脫離一般流，該元素則在一般流上不再佔用方位，一般流的元素則會添補上去，這麼假如不去設置的話則會出現重疊掩蓋的狀況；假如想運用了float的元素也佔著一般流上的方位，該怎麼辦呢？這時候，能夠把運用了float款式的元素緊接著的元素運用clear款式，clear款式包含：both，right，left三個值。both表明right和left的float都剷除去，別的兩個同理。這麼子則能夠剷除在此之前的非一般流，讓他們也佔著一般流上的方位，可是這僅僅佔著方位，本來該元素是不存在於該方位的，該方位不存在任何元素（具體自個谷歌理解），可是這麼子的話，緊接著的那個元素想設置margin等，是會出現問題的，由於運用了float款式的元素強佔的那個方位本來是什麼東西也沒有的，不存在鴻溝，所以運用margin則不會以那個元素（運用了float的那個）為鴻溝的，會越過那個鴻溝來核算，當然你也能夠把margin設大點（也便是加上float元素的長度或許寬度）也能夠到達效果。本來，能夠在float後邊的元素之前，獨自加個

明白元從來專門用於剷除起浮即可，接下來的元素運用margin則能夠正常起效（彌補：本來一般來說，能夠在款式表裡邊獨自設置 .clear{clear：both;} 這麼的款式來專門用於剷除起浮，防止重複，代碼會規高雅規範許多）。

display 特點 和 visibility 特點的差異？

能夠運用 display 特點界說樹立規劃時元素生成的顯現框類型。

1.假如將 display 特點設置為 block，能夠讓行內元素（比方 元素）體現得像塊級元素相同；

2.假如將 display 特點設置為 inline，能夠讓塊級元素（比方

元素）體現得像內聯元素相同；

3.能夠經過把 display 特點設置為 none，讓生成的元素底子沒有框。這麼的話，該框及其一切內容就不再顯現，不佔用文檔中的空間。

在 DIV 規劃中，運用 display:none 特點後，HTML 元素（目標）的寬度、高度等各種特點值都將“丟掉”；而運用 visibility:hidden 特點後，HTML 元素（目標）僅僅是在視覺上看不見（徹底通明），而它所佔有的空間方位依然存在，也便是說它仍具有高度、寬度等特點值。

如果你現在在學前端或者工作是前端，歡迎加入我們大前端交流學習裙575546903,獲取大量學習資料，還有大神解答問題,你們可以訂閱轉發一下