## 簡述一下快標簽和行標簽的區別 **考察點：** 1. 考察快標簽和行標簽的區別。 2. 考察哪些是塊標簽，哪些是行標簽。 3. 考察如何將塊標簽轉化為行標簽，行標簽轉化為塊標簽。 4. 考察塊標簽和行標簽在布局上有哪些特性。 **回答：** 1. 在布局時，塊標簽單獨占滿一行， 行標簽所占寬度為其內容寬度，相鄰行標簽可能布局在同一行，但是塊標簽每個標簽占一行。 2. `div`, `p`, `ul`, `ol`, `li`, `h1`~`h6`, `form`, `main`, `header`, `footer`, `article`, `section`, `pre`, `tr`, `fieldset`, `hr`, `iframe`等屬于塊標簽， `span`, `a`, `img`, `figure`, `video`, `table`, `th`, `td`, `input`, `select`, `textarea`, `label`, `strong`, `em`等屬于行標簽。 3. 可以通過css屬性display設置成inline將塊標簽改成行標簽， 設置成block將行標簽改成塊標簽。 4. 塊標簽可以設置`width`, `height`, `margin`，行標簽設置`width`, `height`無效, 自然，對應的`min-width`,`max-width`,`min-height`,`max-height`也是無效的， 行標簽設置margin時上下無效。行標簽可以設置display為inline-block來使`width`, `height`, `margin`設置有效，且行標簽相鄰的塊標簽設置的`margin`的上下邊距沒有效果。 **例子** ```html <div style="padding:20px;border:1px?solid?#ccc;">block?tag</div> <span style="padding:10px;border:1px solid #ccc;background:red;opacity: 0.4;margin:20px;">inline tag</span> <div style="padding:20px;border:1px solid #ccc;">block tag</div> ```