一、為什么要寫這篇文章 今天看到一個問題： 兩個div 都設置 display：inline-block，正常顯示；但是在第二個div中加一個塊級元素或者內聯元素，顯示就變了個樣，為什么？ 解決方案就是給第二個div加上：vertical-align:top ...

很多時候，我們需要讓元素居中顯示：1. 一段文本的水平居中，2. 一張圖片的水平居中，3. 一個塊級元素的水平居中；4. 單行文本的豎直居中，5. 不確定高度的一段文本豎直居中，6. 確定高度的塊級元 ...

模塊、試驗中的grid模塊。逛園子的時候經常可以看到浮動布局，inline-block布局，彈性盒布局這幾個 ...

display作為一個最為恐怖的屬性，沒有之一，絕對不是欺騙3歲小孩，絕對是真實的。下面，就讓我們看看這貨的恐怖面貌。 display 值： none ：隱藏對象。(注意，與visibili ...

一、浮動介紹 歷史： 浮動屬性產生之初是為了實現“文字環繞”的效果，讓文字環繞圖片在網頁實現類似word中“圖文混排”。 定位方式： 浮動讓元素脫離正常流，向父容器的左邊或右邊移動直到碰到包含 ...

在我們平時工作中，經常會遇到把一些塊狀元素在一行排列顯示，這時候我們通常會用到flaot,或許會用inline-block等等，那么他們有什么共性和區別？適用在什么場景？ 共性： ①inline-block: 是把一個元素的display設置為塊狀內聯元素，意思就是說，讓一個元素的容器 ...

今天在做H5的水平滑動卡片時用到了display:inline-block;卻發現處在同一水平線上的元素之間居然產生了縫隙，這很顯然不是我想要的效果，所以我就換成了左浮動，這樣縫隙的問題是解決了，但是需要設置父元素的寬度才能實現水平左右滾動，這樣又增加了代碼量，因為卡片的個數不固定，需要實時設置 ...

最近，在碼代碼的時候，就是下面的這段代碼，我犯了一個很不起眼，但犯了就致命的BUG。 因為只要你犯了，估計檢查半天都找不出。我可是費了老勁，才發現是<p>和&l ...

先來解釋下這兩個標簽 inline-block: 字面意思：行內塊元素，相當於強制轉換，把一個標簽設置為行內的塊元素，既有塊元素的部分特性（支持width\height\maigin-top\margin-bottom），又有行內元素的部分特性(不換行)。 vertical-align ...

內容提要：給Span設置高度和寬度后沒有作用。本文介紹了如何如何給span設置高度寬度。 CSS模型中經常用的容器是DIV和span。 給Span設置高度和寬度后沒有作用。 ...