?????? 最近面試了一些公司，和技術總監聊了一些前端技術方面的內容。回來之后我總結了一下，大致可以分為三個模塊：第一、Html與css 方面；第二、瀏覽器解析方面；第三、js方面。打算，分為三篇博文，根據自己的理解和大家分享。由于作者水平有限，希望大家多提意見和建議！

　　今天，和大家分享html與css相關的知識。我把這個方面有細分為四小點，1.行內元素塊元素有哪些特點以及轉換方式；2.定位；3.盒子模型；4.css選擇器。下面就做條做分析：

　　1、行內元素和塊元素

　　先解釋一下塊元素吧，塊元素就是指那些，獨立在一行的元素，他們后面會自動帶有換行符。比如像div ?, p ?,form , ul , li , ol , dl 等。它們的出現，往往獨自占領一行。在沒有設置寬度的情況下，默認寬度總是其父元素的寬度。

　　行內元素呢，就是指那些不會獨立出現在一行，單獨使用的時候后面不會有換行符的元素。比如像span, ? strong, ? img, a 等。這些元素，默認的高寬，總是其內容的高寬。并且，margin和padding值，只有左右有效。

　　行內元素和塊元素的互換，也是前端面試經常問到的。行內元素轉換成塊元素，只要設置其display屬性為block即可。反過來，塊元素轉換成行內元素呢？只要將其display屬性設置為inline即可。感興趣的童鞋，可以親自試試。

　　2、定位

　　定位的問題，一般會這樣問：position有幾個值，都分別代表什么意思？這樣說的話，估計大家就明白了吧。一共有5個值，分別是：absolute?fixed?relative?static?inherit。很多童鞋都會忽略inherit，在此提醒一下。下面就來分別解釋一下：

　　absolute　? 生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。

　　fixed 　　?? 生成絕對定位的元素，相對于瀏覽器窗口進行定位。

　　relative　　生成相對定位的元素，相對于其正常位置進行定位。

　　static　　 ??默認值。沒有定位，元素出現在正常的流中

　　inherit　　 規定應該從父元素繼承 position 屬性的值

這里要多說一句，有很多新人搞不清楚absolute和relative，relative是相對其自身的位置變動的。absolute是會向上找其父元素，直到找到不是static定位的元素進行定位。一般在使用absolute的時候，都會給其父元素設置position:relative屬性，使其基于父元素定位！

　　3、盒子模型

　　內容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模型都具備這些屬性。這些屬性我們可以把它轉移到我們日常生活中的盒子（箱子）上來理解，日常生活中所見的盒子也就是能裝東西的一種箱子，也具有這些屬性，所以叫它盒子模型。通俗的講，就是margin border padding content 這四個屬性。在理解盒子模型的時候，需要注意的就是整個盒子的高度和寬度。舉個例子說明一下，比如我有一個div寬高都是100px，當我設置其padding屬性為20px時，其寬高會變成140px。這點，往往會有很多新人忽略！

　　4、css選擇器

　　寫了這么多，終于到最后一個問題了，還有點小累呢，我的小手啊... 為了省事，還是截一張圖搞定吧，哈哈，太特么機智了！還有點小激動呢。好了，看下圖吧：

　　

最后，多說幾句，這些都是基礎知識，如果想融會貫通的使用的話，還需要自己多敲代碼！畢竟孰能生巧！

?

有需要購置家用路由器和鍵盤鼠標的童鞋，不要忘記猛點宏正數碼哦，在此歡迎！

?

轉載請標明出處：http://www.cnblogs.com/callmesummer/p/3970437.html

?

拿出手機，打開支付寶掃一掃，再小的力量，也是一種支持：

?

?

轉載于:https://www.cnblogs.com/callmesummer/p/3970437.html

總結

以上是生活随笔為你收集整理的面试总结之html+css的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。