顯示模式共三種：block、inline、inline-block；
第一種：block（塊級元素）：
常見塊級元素：div、h1-h6、p、ul、ol、li，其中div元素經常被當做布局元素使用
塊級元素的特點：
所有的塊級元素自己占用一行，無論寬度是多少；
塊級元素可以設定寬度（width）和高度（height）；
塊級元素可以設定內邊距（padding，盒子裡面填充的距離）和外邊距（margin：盒子與盒子之間的距離）；
塊級元素的寬度是其容器（父節點）寬度的100%，如果不設定寬度的話；
塊級元素的內部可以容納其他的塊級元素或者內聯元素；
特例：p以及h1-h6元素通常內部只放文字
第二種：inline（行內元素）：
常見的行內元素：span、a、文字格式化標記（strong/b、em/i、del/s、ins/u）
行內元素的特點：
相鄰的行內元素可以在一行上；
行內元素設定寬度和高度無效；
行內元素可以設定內邊距，但是設定外邊距時，只有水平方向有效；
行內元素的寬度是其內部內容的寬度；
行內元素通常只容納文字或者其他行內元素；
特例：a元素內部可以放塊級元素，如div；
a元素內部不能再放a元素
第三種：inline-block（行內塊元素）：
常見的行內塊元素：img、input、td
行內塊元素的特點：
相鄰的行內塊元素是可以在一行上的（這點類似行內元素）；
行內塊元素可以設定寬度、高度、內邊距和外邊距（這點類似塊級元素）；
顯示模式的轉換：
塊級元素變為行內元素：display：inline；
行內元素變為塊級元素：display：block；
塊級元素/行內元素變為行內塊元素：display：inline-block；
CSS樣式 顯示（完善）
css顯示 一 display none 加了display none 的效果 頁面上不再顯示紅色的div塊，並且滑鼠移動到上面看不到 二 visibility visible hidden 加了visibility hidden 的效果 頁面上不再顯示紅色的div塊，但是滑鼠移動到上面可以看到 d...
CSS中的position和display通俗理解
背景 一直對css中的position和display懵懵懂懂，這幾天查了一下，結合自己理解，通俗解釋如下。1 position屬性 主要分為absolute和relative。其中好理解的static為預設值，按照在html文件中順序顯示 fixed為以瀏覽器為參照。我們知道是所有元素的父節點。在...
CSS顯示模式
css顯示模式 塊元素 獨佔一行 高度，寬度，外邊距以及內邊距都能控制 寬度預設是100 是乙個容器及盒子，裡面可以放行內或者塊級元素 行內元素 一行可以顯示多個 寬高無法設定 預設高度是本身內容的寬度 行內元素只能容納文字或行內元素 行內塊元素 寬高可調 一行多個 預設高度是本身內容的寬度 css...