資訊專欄INFORMATION COLUMN
摘要：對于一個剛起步的新手來說，搞定屬性確實沒有那么容易。現在我來說說我對幾個屬性值得理解。此屬性是說不讓元素顯示。先上圖是對于行內元素來說的，例如等。
對于一個剛起步的新手來說，搞定css屬性確實沒有那么容易。現在我來說說我對display幾個屬性值得理解。（只是幾個經常用到的屬性值），不足的地方還請大佬們指正。
1.display:nonedisplay：none; 此屬性是說不讓元素顯示。先上圖
display:block是對于行內元素來說的，例如span,a,i.em等。
塊級元素和行內元素的區別：
1）塊級元素會獨占一行，其寬度自動填滿其父元素寬度
行內元素不會獨占一行，相鄰的行內元素會排列在同一行里，直到一行排不下，才會換行，其寬度隨元素的內容而變化
2） 塊級元素可以設置 width, height屬性，行內元素設置width, height無效（focus:塊級元素即使設置了寬度，仍然是獨占一行的）
3) 塊級元素可以設置margin 和 padding. 行內元素的水平方向的padding-left,padding-right,margin-left,margin-right 都產生邊距效果，但是豎直方向的padding-top,padding-bottom,margin-top,margin-bottom都不會產生邊距效果。
3.display:inline.此屬性值是針對塊級元素的，使用該屬性值，塊級元素就不會一家為大，不再獨占一行，如果其后的元素是行內元素，就會跟在這個塊級元素后面顯示。
4.display:flexdisplay: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;
/*負責垂直縱軸對齊方式*/
}
.flex-item{
flex:1;
background-color:red;
/*手機寬度有限，給最主要的元素，加比例 子元素要設置寬高，剩下的所有歸設置了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，微信，里面我們看到的聊天的那個界面嗎，是不是超級容易就實現了。加入不使用display:flex來實現，你想到的是什么。反正我會是想到float屬性，但是后果呢？很讓人頭疼，使用了float浮動，你就要替他擦屁股。所以，使用display:flex豈不是很爽歪歪？
詳解：
使用display:flex屬性的時候，假設你左邊放圖片，中間放文本，右面再放其他的東西的話，把這三個放到一個盒子里，給包含著三個元素的父元素設置display:flex，給左右兩邊設置寬度，給主元素設置flex:1(我這里把文本當做主元素),這樣就輕松實現了三個元素在一行顯示。是不是很nice！
小白一枚，有不當的地方懇請大佬們指正，抱拳啦。如果對您有一點幫助，給個贊唄，么么噠
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51037.html
摘要：對于一個剛起步的新手來說，搞定屬性確實沒有那么容易。現在我來說說我對幾個屬性值得理解。此屬性是說不讓元素顯示。先上圖是對于行內元素來說的，例如等。 對于一個剛起步的新手來說，搞定css屬性確實沒有那么容易。現在我來說說我對display幾個屬性值得理解。（只是幾個經常用到的屬性值），不足的地方還請大佬們指正。 1.display:none display：none; 此屬性是說不讓元素...
摘要：行內元素特征設置寬高屬性無效設置僅左右水平方向有效，上下垂直無效設置上下左右都有效內容不會自動進行換行行內塊元素行內塊元素綜合了兩者的特征，各有取舍，可以對任意元素進行屬性設置。 文章大綱來源：【Day 1】HTML & HTML 5 標記語言 XHTML/HTML/HTML 5異同 了解doctype HTML HTML 5 標記語言 標記語言(ML)即 Markup Langu...
摘要：元素框從文檔流完全刪除，并相對于其包含塊定位。簡單來說就是，元素不再占用任何文檔流的空間，只剩下相對于包含塊的定位顯示。行框和清理浮動框旁邊的行框會被縮短，使行框圍繞浮動框，所以創建浮動框可以使文本圍繞圖像。 文章大綱來源：【Day 3】HTML復習 + CSS基礎 CSS框模型 寬度和高度 內邊距 外邊距 CSS定位 浮動 CSS框模型 內容引用：CSS 框模型概述 CSS 框模...
摘要：元素框從文檔流完全刪除，并相對于其包含塊定位。簡單來說就是，元素不再占用任何文檔流的空間，只剩下相對于包含塊的定位顯示。行框和清理浮動框旁邊的行框會被縮短，使行框圍繞浮動框，所以創建浮動框可以使文本圍繞圖像。 文章大綱來源：【Day 3】HTML復習 + CSS基礎 CSS框模型 寬度和高度 內邊距 外邊距 CSS定位 浮動 CSS框模型 內容引用：CSS 框模型概述 CSS 框模...
閱讀 3540·2019-08-30 12:58
閱讀 923·2019-08-29 16:37
閱讀 2796·2019-08-29 16:29
閱讀 3105·2019-08-26 12:18
閱讀 2365·2019-08-26 11:59
閱讀 3405·2019-08-23 18:27
閱讀 2770·2019-08-23 16:43
閱讀 3301·2019-08-23 15:23
