說起css盒子模型，很多人都會覺得不就是margin padding border width height那點事兒嗎，對，就說說這點事。 css盒子模型的作用：決定盒子有多大，即能有多大的空間給元素用來展示，物件的邊界，留白，物件的大小，還有就是去其他元素的相對位置。 注意事項：如果乙個盒子的寬度設定為100&，就不要在設定margins padding 和 borders 否則會撐破盒子的，是布局失控。margin會自動合併，解決方法（bfc）。
inline和block的區別 inline元素的大小只是和內容有關，設定高寬都沒有作用，除非設定成 inline-bock。 block 級物件會自然地水平充滿其父容器，因此沒有必要為之設定 100% 寬度屬性 block 級物件的起始擺放位置是其父容器的左上邊界，並順排在其前面的兄弟 block 物件的下方（除非設定 float 或絕對位置） inline 級物件會忽略其寬度和高度設定 inline 級物件會隨著文字排版，並受排版屬性的影響（如 white-space, font-size, letter-spacing） inline 級物件可以使用 vertical-align 屬性控制其垂直對齊，block 級物件不可以 inline 級物件的下方會保留一些自然的空間，以適應字母 g 一類的會向下探出的筆畫 乙個設定為 float 的 inline 物件將變成 block 物件
以下是使用 float 和 clear 屬性的一些重要準則:
乙個 float 物件，將從其置身的 block 級非 float 內容流中跳出，換句話說，如果你要將乙個 box 向左邊 float，它後面的 block 級非 float 物件會顯示到下方，inline 級內容會在旁邊包圍 要讓一段內容從一側包圍乙個 float 物件，這段內容必須要麼是 inline 級的，要麼也設定為相同方向的 float 乙個 float 物件，如果沒有設定寬度，則會自動縮成其包含的內容的寬度，因此最好為 float 物件明確設定寬度 如果乙個 block 物件包含 float 子物件，會出現本文中闡述的問題。 乙個設定了 clear 屬性的物件，將不會包圍其前面的 float 物件 乙個既設定了 clear 又設定了 float 屬性的物件，只有 clear:left 屬性生效，clear:right 不起作用
CSS定位那點事兒
這幾日特別學習了定位的相關屬性和用法，懵逼了好久。說到定位懵逼，恐怕不得不提浮動，一開始也是懵逼，一會兒飄離文件流，一會兒又佔了位置，說是啥脫離文件流半層，這點意思可是把咱們坑慘了。後面又來了定位，再次飄離了文件流。經過一番心思，理解，和試探，終究是有了些眉目。稍作整理，分享給大家共同 無論是浮動還...
css定位那點事兒
這幾日特別學習了定位的相關屬性和用法，懵逼了好久。說到定位懵逼，恐怕不得不提浮動，一開始也是懵逼，一會兒飄離文件流，一會兒又佔了位置，說是啥脫離文件流半層，這點意思可是把咱們坑慘了。後面又來了定位，再次飄離了文件流。經過一番心思，理解，和試探，終究是有了些眉目。稍作整理，分享給大家共同 無論是浮動還...
CSS布局那點事兒
最開始老的一代 開發，布局都是通過 實現的。這樣可以形成規整的網格布局，但是也會帶來一定的複雜性。比如想要新增某個頁面元素，就有可能要改動整個 新增很多無用的行或者列。後來，衍生出不少的css框架，他們遮蔽了底層的css語法，只需要按照特定的使用方式就能實現網格布局。這樣對於開發者來說，好處自然是方...