CSS樣式 顯示模式display

2022-06-19 18:15:15 字數 1018 閱讀 1212

顯示模式共三種: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...