理解CSS中的display属性

2024-01-24 14:00:04

display属性规定元素生成框的类型，默认值inline。

属性值有很多，但常用且支持度较好的就那么几个。

block

block元素当不设置宽度时，宽度为父元素的宽度，独占一行，支持设置宽高、外边距、内边距。不支持CSS的vertical-align属性

<address> <article> <aside>
<blockquote> <body> <dd> <details> <div> <dl> <dt>
<fieldset> <figcaption> <figure> <footer> <form> 
<h1> <header> <hr> 
<html> 
<legend> 
<nav> 
<ol> 
<optgroup> <option>
<p> 
<section> 
<summary>
<ul>

inline

inline元素宽度由内容撑开，不独占一行，不支持设置宽高、上下margin、上下padding。

<a> <abbr> <area> <bdo> <br> <cite> <code> <del> <dfn> <em> <i> <ins> <kbd> <label> <map> <mark> <pre> <q> <rp> <rt> <ruby> <s> <samp> <small> <span> <strong> <sub> <sup> <u> <var> <wbr>

和文本相关的元素都是inline标签

inline-block

inline-block元素当设置宽度时，宽度由内容撑开。元素不独占一行，支持设置宽高、外边距、内边距。

<audio> <button> <canvas> <embed> <iframe> <img> <input> <keygen> <meter> <object> <progress> <select> <textarea> <video>

以上inline-block元素是指它们具有inline-block的特征，并非默认值就是display: inline-block。只有表单类元素是纯inline-block元素，audio、canvas、iframe、img、keygen、object、video都应该算是inline元素

none

none元素脱离文档流并隐藏自身。

<base> <link>   <title> <datalist> <params> <script> <source> <style>

table

table元素不设置宽度时，宽度由内容撑开。独占一行，支持宽高、外边距、内边距。拥有表格的特征，可设置table-layout、border-collapse、border-spacing等表格专有属性。如果设置了border-collapse:collapse 设置padding将会无效

table-cell

tabel-cell元素不设置宽度时，宽度由内容撑开，不独占一行，可以设置宽高和内边距，不可以设置外边距。tabel-cell就像表格的td元素，td元素能设置padding，但是margin无效。

可以利用这点实现元素的垂直居中：

<style>
.t1 {
    display: table-cell;
    width:150px;
    height: 150px;
    background-color: green;
    vertical-align: middle;
    text-align: center;
  }
<style>
  <div class="t1">
  <p>Hello World</p>
</div>

码农公寓