來自前端菜鳥對css display屬性的理解

TZLLOG 發(fā)布于2019-08-29 13:00 / 1917人閱讀

摘要：對于一個剛起步的新手來說，搞定屬性確實沒有那么容易。現(xiàn)在我來說說我對幾個屬性值得理解。此屬性是說不讓元素顯示。先上圖是對于行內(nèi)元素來說的，例如等。

對于一個剛起步的新手來說，搞定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：

 
     
         
             
             
                title 
                desctiption

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;

}

實現(xiàn)效果

看到效果想到了什么？老鐵們，是不是感覺很熟悉。這不就是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幫助，給個贊唄，么么噠