如何理解CSS的display属性 CSS3 display：flex和display：box有...
\u5173\u4e8eCSS\u5c5e\u6027display\uff1anone\u548cvisible\uff1ahidden\u7684\u533a\u522b\u6211\u53d1\u73b0\u4f7f\u7528visible:hidden\u5c5e\u6027\u4f1a\u4f7f\u5bf9\u8c61\u4e0d\u53ef\u89c1\uff0c\u4f46\u8be5\u5bf9\u8c61\u5728\u7f51\u9875\u6240\u5360\u7684\u7a7a\u95f4\u6ca1\u6709\u6539\u53d8\uff08\u770b\u4e0d\u89c1\u4f46\u6478\u5f97\u5230\uff09\uff0c\u7b49\u4e8e\u7559\u51fa\u4e86\u4e00\u5757\u7a7a\u767d\u533a\u57df\uff0c\u800cdisplay:none\u5c5e\u6027\u4f1a\u4f7f\u8fd9\u4e2a\u5bf9\u8c61\u5f7b\u5e95\u6d88\u5931\uff08\u770b\u4e0d\u89c1\u4e5f\u6478\u4e0d\u5230\uff09
\u524d\u8005\u662fflex 2012\u5e74\u7684\u8bed\u6cd5\uff0c\u4e5f\u5c06\u662f\u4ee5\u540e\u6807\u51c6\u7684\u8bed\u6cd5\uff0c\u5927\u90e8\u5206\u6d4f\u89c8\u5668\u5df2\u7ecf\u5b9e\u73b0\u4e86\u65e0\u524d\u7f00\u7248\u672c\u3002
\u540e\u8005\u662f2009\u5e74\u7684\u8bed\u6cd5\uff0c\u5df2\u7ecf\u8fc7\u65f6\uff0c\u662f\u9700\u8981\u52a0\u4e0a\u5bf9\u5e94\u524d\u7f00\u7684\u3002
\u6240\u4ee5\u517c\u5bb9\u6027\u7684\u4ee3\u7801\uff0c\u5927\u81f4\u5982\u4e0b
123456 display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
none
block
inline
inline-block
inherit
下面，我将按照顺序将上述几种属性做一个完整的讲解。
第一部分：display:none
none这个值表示此元素将不被显示。比如，当我们在浏览网页时，如果看到了某个烦人的广告遮挡了我们的实现，更为可气的是，它还没有关闭的选项，这时（以chrome为例），我们就可以按下F12，打开开发者工具，点击element，然后使用左上角的选择工具选中想要删除的广告，可以看到element中会有高亮的一行或几行代码，右键，点击Add Attribute，然后输入：style="display:none"，这时就可以发现广告不见啦！ 当然display:none的用法绝不是专门用于这里的，它还可以用于二级下拉菜单的制作中将二级下拉菜单先设置位display:none;,当鼠标滑过一级菜单时，再显示出来（详见《如何实现导航菜单中的二级下拉菜单》）。还可以用于登陆模态框的制作等等。
第二部分：display:block
使用了display：block;之后， 此元素将显示为块级元素，此元素前后会带有换行符。我们先来回顾以下块级元素是什么，他有什么特点。
既然要区分块级元素和行内元素，就得先说说标准文档流了。标准文档流：简称标准流，指的是在不使用其他的与排列和定位相关的css规则时，各种元素的排列规则。于是，我们将“各种元素”分为块级元素和行内元素。（注：实际上还有空元素，如<br>用于换行，<hr>为一条水平线，这里对空元素不做过多讨论）
块级元素特点：
总是以一个块的形式表现出来，占领一整行。若干同级块元素会从上之下依次排列（使用float属性除外）。
可以设置高度、宽度、各个方向外补丁（margin）以及各个方向的内补丁（padding）。
当宽度（width）缺省时，它的宽度时其容器的100%，除非我们给它设定了固定的宽度。
块级元素中可以容纳其他块级元素或行内元素。
常见的块级元素由<p><div><h1><li>等等。
块级元素的display属性值默认为block。
行内元素特点：
它不会单独占据一整行，而是只占领自身的宽度和高度所在的空间。若干同级行内元素会从左到右（即某个行内元素可以和其他行内元素共处一行），从上到下依次排列。
行内元素不可以设置高度、宽度，其高度一般由其字体的大小来决定，其宽度由内容的长度控制。
行内元素只能设置左右的margin值和左右的padding值，而不能设置上下的margin值和上下的padding值。因此我们可以通过设置左右的padding值来改变行内元素的宽度。
常见的行内元素由<a><em><img>等等。
行内元素一般不可以包含块级元素。
块级元素的display属性值默认为inline。
ok!简单回顾了块级元素和行内元素之后，我们就可以进行下一步讲解了。
通过对一个行内元素设置display: block;可以将行内元素设置为块级元素，进而设置它的宽高和上下左右的padding和margin。
应用：
如果我们经常会制作导航栏，这时就要使用ul li 和a组合的方式，但是<a>是行内元素，我们无法设置它的宽和高，这时，就可以在<a>的样式表中，将之设置为display：block。这样就可以设置它的宽和高，以及上下左右的margin和padding以达到我们想要的效果了。
display:none 是隐藏display: inline 是行内元素 在一行显示display: block 是块级元素 执行换行显示
绛旓細CSS Display 鏄粈涔堟剰鎬濓紵CSS 涓殑 display 灞炴ц〃绀轰竴涓厓绱犲簲璇ュ浣曟樉绀銆傞氳繃璁剧疆 display 灞炴э紝鎴戜滑鍙互鎺у埗鍏冪礌鏄樉绀烘垚鍧楃骇鍏冪礌杩樻槸琛屽唴鍏冪礌锛屾垨鑰呮槸寰堝鍏朵粬鐨勬樉绀烘柟寮忋傚湪 HTML 鐨勮涔夊寲缁撴瀯涓紝display 灞炴у彲浠ヨ鎴戜滑鏇村姞鐏垫椿鍦颁娇鐢ㄥ厓绱狅紝鏉ユ弧瓒虫垜浠疄闄呯殑椤甸潰闇姹傘備笉鍚岀殑鏄剧ず鏂瑰紡涓嶄粎鍙互褰卞搷鍏冪礌...
绛旓細display 灞炴ц瀹氬厓绱犲簲璇ョ敓鎴愮殑妗嗙殑绫诲瀷,鐢ㄧ殑鏈澶氱殑灏辨槸display:block;鏄剧ず display:none;闅愯棌銆備笅闈㈡槸鎵鏈夊肩殑鐢ㄦ硶鎻忚堪銆俤isplay鏈韩鎰忔濇槸鈥滄樉绀恒侀樀鍒椻濈殑鎰忔 鍊 鎻忚堪 none 姝ゅ厓绱犱笉浼氳鏄剧ず銆俠lock 姝ゅ厓绱犲皢鏄剧ず涓哄潡绾у厓绱狅紝姝ゅ厓绱犲墠鍚庝細甯︽湁鎹㈣绗︺俰nline 榛樿銆傛鍏冪礌浼氳鏄剧ず涓哄唴鑱...
绛旓細瑕佺悊瑙isplay灞炰簬锛岃鐪嬪畠鐨勫畾涔夊拰鐢ㄦ硶 display 灞炴ц瀹氬厓绱犲簲璇ョ敓鎴愮殑妗嗙殑绫诲瀷銆傝鏄 杩欎釜灞炴х敤浜庡畾涔夊缓绔嬪竷灞鏃跺厓绱犵敓鎴愮殑鏄剧ず妗嗙被鍨嬨傚浜 HTML 绛夋枃妗ｇ被鍨嬶紝濡傛灉浣跨敤 display 涓嶈皑鎱庝細寰堝嵄闄╋紝鍥犱负鍙兘杩濆弽 HTML 涓凡缁忓畾涔夌殑鏄剧ず灞傛缁撴瀯銆傚浜 XML锛岀敱浜 XML 娌℃湁鍐呯疆鐨勮繖绉嶅眰娆＄粨鏋勶紝鎵鏈 display ...
绛旓細CSS涓殑`display`灞炴х敤浜庢帶鍒跺厓绱犵殑鏄剧ず鏂瑰紡銆傝繖涓睘鎬у喅瀹氫簡鍏冪礌濡備綍鍦ㄩ〉闈笂鍛堢幇锛屾槸鍚﹀彲瑙侊紝浠ュ強涓庡叾浠栧厓绱犵殑甯冨眬鍏崇郴銆傚叾涓紝`block`鏄痐display`灞炴х殑涓涓笺備簩銆乨isplay:block鐨勮В閲 褰撳厓绱犺璁剧疆涓篳display: block`鏃讹紝瀹冨皢浠ュ潡绾у厓绱犵殑褰㈠紡鍛堢幇銆傚潡绾у厓绱犻氬父鍦ㄩ〉闈㈠竷灞涓崰鏈夊畬鏁寸殑鍧楋紝骞跺湪鍐...
绛旓細display锛氳瀹氬厓绱犵殑绫诲瀷銆傚父鐢ㄧ殑绫诲瀷鏈変互涓嬪嚑绉嶏細1銆乶one锛氶殣钘忕被鍨 灏嗗厓绱犺缃负闅愯棌绫诲瀷锛屽厓绱犲瓨鍦ㄤ簬html涓紝浣嗕笉鏄剧ず鍑烘潵銆2銆乥lock锛氬潡绫诲瀷 鏃犺鍏冪礌鏈韩绫诲瀷鏄潡鍏冪礌杩樻槸琛屽唴鍏冪礌锛岃缃簡display: block;锛屾祻瑙堝櫒閮戒細灏嗚鍏冪礌浠ュ潡鍏冪礌绫诲瀷鏉ヨВ鏋愩3銆乮nline锛氳鍐呯被鍨 鏃犺鍏冪礌鏈韩绫诲瀷鏄潡鍏冪礌杩樻槸...
绛旓細none block inline inline-block inherit 涓嬮潰锛屾垜灏嗘寜鐓ч『搴忓皢涓婅堪鍑犵灞炴у仛涓涓畬鏁寸殑璁茶В銆傜涓閮ㄥ垎锛display:none none杩欎釜鍊艰〃绀烘鍏冪礌灏嗕笉琚樉绀恒傛瘮濡傦紝褰撴垜浠湪娴忚缃戦〉鏃讹紝濡傛灉鐪嬪埌浜嗘煇涓儲浜虹殑骞垮憡閬尅浜嗘垜浠殑瀹炵幇锛屾洿涓哄彲姘旂殑鏄紝瀹冭繕娌℃湁鍏抽棴鐨勯夐」锛岃繖鏃讹紙浠hrome涓轰緥锛夛紝鎴戜滑灏卞彲浠ユ寜...
绛旓細display 灞炴ц瀹氬厓绱犵殑灞曠ず绫诲瀷銆傚潡鍏冪礌鐨刣isplay灞炴у间负block琛屽厓绱犵殑display灞炴у间负inline琛ㄦ牸鍏冪礌鐨刣isplay灞炴у间负tableinput鐨刣isplay灞炴у间负inline-block銆俤isplay: none鐨勫厓绱犱笉鏄剧ず锛屼篃涓嶄細鍙備笌DOM娓叉煋銆
绛旓細鍦‵lexbox涓紝渚嬪锛寀l璁剧疆涓篸isplay:contents锛屽垯浼氱Щ闄l鍏冪礌鏈韩锛岃屽叾瀛愰」灏嗕綔涓篎lex椤圭洰鐨勭粍鎴愰儴鍒嗐傛繁鍏鐞嗚Вdisplay鐨勮鍒欙紝濡傚垱寤築FC锛堝潡绾ф牸寮忓寲涓婁笅鏂囷級鍜孖FC锛堝唴鑱旀牸寮忓寲涓婁笅鏂囷級锛屾槸甯冨眬澶у笀鐨勫繀淇銆傛柊鐢ㄦ硶濡俤isplay:block flow-root鐨勫嚭鐜帮紝涓哄竷灞甯︽潵浜嗘洿澶氬彲鑳芥с傛荤粨鏉ヨ锛宒isplay灞炴ф槸甯冨眬...
绛旓細棣栧厛锛屼綘涓婇潰鐨勮娉#mainnav *{margin:0;padding:0;}涓殑鎰忔濇槸灏咺D涓#mainnav涓嬬殑鎵鏈夊悗浠ｅ厓绱犲簲鐢ㄦ牱寮忥紝鐢ㄢ*鈥濅竴鑸槸閽堝IE6鍙婁互涓嬬増鏈殑锛佸叾娆★紝a 鍏冪礌鏄槸涓涓鍐呭厓绱狅紝display锛歜lock锛涘氨鏄皢浠栧己琛岃浆鍖栦负鍧楃骇鍏冪礌銆傝鍐呭厓绱犳病鏈夋病鏈変笂涓嬪～鍏,涔熷氨鏄浣犺缃畃adding-top padding-bottom灏...
绛旓細display:block; /*杩欎釜鏄皢鍏冪礌鏄剧ず涓哄潡鍏冪礌*/display:inline; /*杩欎釜鏄樉绀轰负琛屽厓绱*/display:inline-block; /*杩欎釜鏄皢鍧楀厓绱犺浆涓鸿鍏冪礌锛屾晥鏋滅被浼糹nline*/display:none; /*杩欎釜鏄皢鍏冪礌闅愯棌*/
