? ? ?對于一個剛起步的新手來說怕膛，搞定css屬性確實沒有那么容易∈埽現(xiàn)在我來說說我對display幾個屬性值得理解。（只是幾個經(jīng)常用到的屬性值）垒棋，不足的地方還請大佬們指正卒煞。
1.display:none
display：none; 此屬性是說不讓元素顯示。先上圖
2.display:block
display:block是對于行內(nèi)元素來說的叼架，例如span,a,i.em等畔裕。
塊級元素和行內(nèi)元素的區(qū)別：
1）塊級元素會獨(dú)占一行，其寬度自動填滿其父元素寬度
行內(nèi)元素不會獨(dú)占一行乖订，相鄰的行內(nèi)元素會排列在同一行里扮饶，直到一行排不下，才會換行乍构，其寬度隨元素的內(nèi)容而變化
2） 塊級元素可以設(shè)置 width, height屬性甜无，行內(nèi)元素設(shè)置width,? height無效（focus:塊級元素即使設(shè)置了寬度，仍然是獨(dú)占一行的）
3) 塊級元素可以設(shè)置margin 和 padding. ?行內(nèi)元素的水平方向的padding-left,padding-right,margin-left,margin-right 都產(chǎn)生邊距效果哥遮，但是豎直方向的padding-top,padding-bottom,margin-top,margin-bottom都不會產(chǎn)生邊距效果岂丘。
3.display:inline.
此屬性值是針對塊級元素的，使用該屬性值眠饮，塊級元素就不會一家為大奥帘，不再獨(dú)占一行，如果其后的元素是行內(nèi)元素仪召，就會跟在這個塊級元素后面顯示寨蹋。
4.display:flex
display:flex是彈性布局，我個人對display:flex深愛有加（哈哈哈）扔茅，它讓我們省去了很多事情钥庇，趕緊來看看他到底有什么魔法吧。
先來看看代碼吧
html：
<ul>
<li>
<div class="flex-cont flex-simple">
<div class="s-img"></div>
<div class="flex-item s-word">
<p class="s-tit">title</p>
<p class="s-desc">desctiption</p>
</div>
<i><class="f-icon"></i>
</div>
</li>
</ul>
css樣式：
*{
margin:0;
padding:0;
}
ul,li{
list-style:none;
}
.flex-cont{
display: -webkit-flex;
display: -webkit-box;
display:flex;
align-items:center;
/*負(fù)責(zé)垂直縱軸對齊方式*/
}
.flex-item{
flex:1;
background-color:red;
/*手機(jī)寬度有限咖摹，給最主要的元素评姨，加比例 子元素要設(shè)置寬高，剩下的所有歸設(shè)置了flex:1的元素*/
}
.s-tit{
/*高度等于行高萤晴，文字就垂直居中*/
/*line-height: 36px;
height: 36px;
color: green;*/
font-size:20px;
font-weight:bold;
}
.s-tit,
.s-desc{
line-height:1.2;
/*字體大小的1.2倍*/
}
.s-img{
/*占該占的*/
width:50px;
height:50px;
background:#31BBEE;
margin-right:5px;
}
.f-icon{
display:block;
width:20px;
height:20px;
background-color:#31BBEE;
}
看到效果想到了什么吐句？老鐵們，是不是感覺很熟悉店读。這不就是QQ嗦枢，微信，里面我們看到的聊天的那個界面嗎屯断，是不是超級容易就實現(xiàn)了文虏。加入不使用display:flex來實現(xiàn)侣诺，你想到的是什么。反正我會是想到float屬性氧秘，但是后果呢年鸳？很讓人頭疼，使用了float浮動丸相，你就要替他擦屁股搔确。所以，使用display:flex豈不是很爽歪歪灭忠？
詳解：
使用display:flex屬性的時候膳算，假設(shè)你左邊放圖片，中間放文本弛作，右面再放其他的東西的話涕蜂，把這三個放到一個盒子里，給包含著三個元素的父元素設(shè)置display:flex映琳，給左右兩邊設(shè)置寬度机隙，給主元素設(shè)置flex:1(我這里把文本當(dāng)做主元素),這樣就輕松實現(xiàn)了三個元素在一行顯示。是不是很nice刊头！
小白一枚黍瞧，有不當(dāng)?shù)牡胤綉┱埓罄袀冎刚罹。苍印Ｈ绻麑δ幸稽c幫助，給個贊唄您机，么么噠穿肄。
