資訊專欄INFORMATION COLUMN
摘要：對(duì)于一個(gè)剛起步的新手來說，搞定屬性確實(shí)沒有那么容易。現(xiàn)在我來說說我對(duì)幾個(gè)屬性值得理解。此屬性是說不讓元素顯示。先上圖是對(duì)于行內(nèi)元素來說的，例如等。
對(duì)于一個(gè)剛起步的新手來說，搞定css屬性確實(shí)沒有那么容易?，F(xiàn)在我來說說我對(duì)display幾個(gè)屬性值得理解。（只是幾個(gè)經(jīng)常用到的屬性值），不足的地方還請(qǐng)大佬們指正。
1.display:nonedisplay：none; 此屬性是說不讓元素顯示。先上圖
display:block是對(duì)于行內(nèi)元素來說的，例如span,a,i.em等。
塊級(jí)元素和行內(nèi)元素的區(qū)別：
1）塊級(jí)元素會(huì)獨(dú)占一行，其寬度自動(dòng)填滿其父元素寬度
行內(nèi)元素不會(huì)獨(dú)占一行，相鄰的行內(nèi)元素會(huì)排列在同一行里，直到一行排不下，才會(huì)換行，其寬度隨元素的內(nèi)容而變化
2） 塊級(jí)元素可以設(shè)置 width, height屬性，行內(nèi)元素設(shè)置width, height無效（focus:塊級(jí)元素即使設(shè)置了寬度，仍然是獨(dú)占一行的）
3) 塊級(jí)元素可以設(shè)置margin 和 padding. 行內(nèi)元素的水平方向的padding-left,padding-right,margin-left,margin-right 都產(chǎn)生邊距效果，但是豎直方向的padding-top,padding-bottom,margin-top,margin-bottom都不會(huì)產(chǎn)生邊距效果。
3.display:inline.此屬性值是針對(duì)塊級(jí)元素的，使用該屬性值，塊級(jí)元素就不會(huì)一家為大，不再獨(dú)占一行，如果其后的元素是行內(nèi)元素，就會(huì)跟在這個(gè)塊級(jí)元素后面顯示。
4.display:flexdisplay:flex是彈性布局，我個(gè)人對(duì)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é)垂直縱軸對(duì)齊方式*/
}
.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;
}
實(shí)現(xiàn)效果
看到效果想到了什么？老鐵們，是不是感覺很熟悉。這不就是QQ，微信，里面我們看到的聊天的那個(gè)界面嗎，是不是超級(jí)容易就實(shí)現(xiàn)了。加入不使用display:flex來實(shí)現(xiàn)，你想到的是什么。反正我會(huì)是想到float屬性，但是后果呢？很讓人頭疼，使用了float浮動(dòng)，你就要替他擦屁股。所以，使用display:flex豈不是很爽歪歪？
詳解：
使用display:flex屬性的時(shí)候，假設(shè)你左邊放圖片，中間放文本，右面再放其他的東西的話，把這三個(gè)放到一個(gè)盒子里，給包含著三個(gè)元素的父元素設(shè)置display:flex，給左右兩邊設(shè)置寬度，給主元素設(shè)置flex:1(我這里把文本當(dāng)做主元素),這樣就輕松實(shí)現(xiàn)了三個(gè)元素在一行顯示。是不是很nice！
小白一枚，有不當(dāng)?shù)牡胤綉┱?qǐng)大佬們指正，抱拳啦。如果對(duì)您有一點(diǎn)幫助，給個(gè)贊唄，么么噠
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/112296.html
摘要：對(duì)于一個(gè)剛起步的新手來說，搞定屬性確實(shí)沒有那么容易?，F(xiàn)在我來說說我對(duì)幾個(gè)屬性值得理解。此屬性是說不讓元素顯示。先上圖是對(duì)于行內(nèi)元素來說的，例如等。 對(duì)于一個(gè)剛起步的新手來說，搞定css屬性確實(shí)沒有那么容易?，F(xiàn)在我來說說我對(duì)display幾個(gè)屬性值得理解。（只是幾個(gè)經(jīng)常用到的屬性值），不足的地方還請(qǐng)大佬們指正。 1.display:none display：none; 此屬性是說不讓元素...
摘要：行內(nèi)元素特征設(shè)置寬高屬性無效設(shè)置僅左右水平方向有效，上下垂直無效設(shè)置上下左右都有效內(nèi)容不會(huì)自動(dòng)進(jìn)行換行行內(nèi)塊元素行內(nèi)塊元素綜合了兩者的特征，各有取舍，可以對(duì)任意元素進(jìn)行屬性設(shè)置。 文章大綱來源：【Day 1】HTML & HTML 5 標(biāo)記語言 XHTML/HTML/HTML 5異同 了解doctype HTML HTML 5 標(biāo)記語言 標(biāo)記語言(ML)即 Markup Langu...
摘要：元素框從文檔流完全刪除，并相對(duì)于其包含塊定位。簡(jiǎn)單來說就是，元素不再占用任何文檔流的空間，只剩下相對(duì)于包含塊的定位顯示。行框和清理浮動(dòng)框旁邊的行框會(huì)被縮短，使行框圍繞浮動(dòng)框，所以創(chuàng)建浮動(dòng)框可以使文本圍繞圖像。 文章大綱來源：【Day 3】HTML復(fù)習(xí) + CSS基礎(chǔ) CSS框模型 寬度和高度 內(nèi)邊距 外邊距 CSS定位 浮動(dòng) CSS框模型 內(nèi)容引用：CSS 框模型概述 CSS 框模...
摘要：元素框從文檔流完全刪除，并相對(duì)于其包含塊定位。簡(jiǎn)單來說就是，元素不再占用任何文檔流的空間，只剩下相對(duì)于包含塊的定位顯示。行框和清理浮動(dòng)框旁邊的行框會(huì)被縮短，使行框圍繞浮動(dòng)框，所以創(chuàng)建浮動(dòng)框可以使文本圍繞圖像。 文章大綱來源：【Day 3】HTML復(fù)習(xí) + CSS基礎(chǔ) CSS框模型 寬度和高度 內(nèi)邊距 外邊距 CSS定位 浮動(dòng) CSS框模型 內(nèi)容引用：CSS 框模型概述 CSS 框模...
閱讀 2987·2021-11-19 09:40
閱讀 3941·2021-10-09 09:43
閱讀 2745·2021-09-22 15:31
閱讀 1841·2021-07-30 15:31
閱讀 844·2019-08-30 15:55
閱讀 3323·2019-08-30 15:54
閱讀 1252·2019-08-30 11:26
閱讀 1975·2019-08-29 13:00
