柚子快報(bào)激活碼778899分享：前端 CSS中常用的屬性

http://yzkb.51969.com/

文章目的

本文是在我進(jìn)行前端開發(fā)過(guò)程中，對(duì)一些css的使用比較頻繁，故而想對(duì)這些css進(jìn)行總結(jié)，以便后續(xù)可以更快地溫習(xí)，當(dāng)然，需要詳細(xì)的解釋請(qǐng)去看官方的文檔,這里主要以通俗易懂的比喻或者例子來(lái)進(jìn)行驗(yàn)證。

width

顧名思義，width用于設(shè)置元素的寬度，比如一個(gè)人的胖和瘦，就對(duì)應(yīng)width的大和小

height

height用于設(shè)置元素的高度，比如一個(gè)人的身高看上去高和矮，就對(duì)應(yīng)height的大和小

display

display用于設(shè)置元素是否被視為塊或者內(nèi)聯(lián)元素以及用于子元素的布局，在我看來(lái)，簡(jiǎn)單來(lái)說(shuō)，就是用于對(duì)某一區(qū)域內(nèi)的元素進(jìn)行排版布局，打個(gè)比方來(lái)說(shuō)就像一個(gè)筐子里有一個(gè)蘋果，一個(gè)梨，一個(gè)橘子，我要在這個(gè)筐的范圍內(nèi)對(duì)這三個(gè)水果的位置進(jìn)行安排，可以讓它們間隔相同距離平面排列，也可以讓它們?nèi)齻€(gè)像疊羅漢一樣疊起來(lái)。而display中比較常見(jiàn)的設(shè)置是block（流式布局）、grid（網(wǎng)格布局）、flex（彈性布局）

block

按照block的形式進(jìn)行排列，即以塊級(jí)元素進(jìn)行排列，每一個(gè)塊都會(huì)單獨(dú)占據(jù)一行，無(wú)論其寬度是否充滿父容器，這里通俗地來(lái)說(shuō)就是有三層樓可以晾衣服，但是如果按照block的形式進(jìn)行晾衣服的話，每一層都只能晾一件衣服，即使每一層可以晾不止一件衣服。

grid

grid布局擅長(zhǎng)于將一個(gè)頁(yè)面劃分為幾個(gè)主要區(qū)域，以及定義這些區(qū)域的大小、位置、層次等關(guān)系，像表格一樣，網(wǎng)格布局讓我們能夠按行或列來(lái)對(duì)齊元素。簡(jiǎn)單來(lái)說(shuō)，grid布局可以在二維層面上進(jìn)行調(diào)整，就好比我們?cè)谝粡埣埳袭嬀W(wǎng)格，每個(gè)網(wǎng)格的大小和位置都可以根據(jù)我們自己的意愿進(jìn)行設(shè)置。

flex

在flex布局模型中，彈性容器的子元素可以在任何方向上排布，也可以“彈性伸縮”其尺寸，既可以增加尺寸以填滿未使用的空間，也可以收縮尺寸以避免父元素溢出。子元素的水平對(duì)齊和垂直對(duì)齊都能很方便的進(jìn)行操控。這里簡(jiǎn)單來(lái)說(shuō)就是flex布局主要在一維的層面上進(jìn)行操作，比如以grid中網(wǎng)格的例子，flex能對(duì)一行或一列的全部元素進(jìn)行放大或縮小，但是沒(méi)法對(duì)單個(gè)網(wǎng)格進(jìn)行這樣的操作。

background-color

顧名思義為背景顏色，有點(diǎn)類似于我們?nèi)フ障囵^照相時(shí)的背景板顏色。

over-flow

over-flow設(shè)置當(dāng)內(nèi)容溢出塊級(jí)元素的上下兩側(cè)時(shí)所顯示的內(nèi)容?？梢圆伙@示，或顯示滾動(dòng)條，或顯示溢出內(nèi)容，有overflow-x、overflow-y。打個(gè)比方，這個(gè)屬性可以理解成一個(gè)杯子里裝有水，當(dāng)水過(guò)多溢出時(shí)，我們是將溢出的這部分清理掉，還是另外一個(gè)杯子接，即選擇處理這部分溢出的水的方式。

flex-direction

flex-direction屬性指定了內(nèi)部元素是如何在 flex 容器中布局的，定義了主軸的方向 (正方向或反方向),簡(jiǎn)單理解就是定員元素按column還是row方向來(lái)進(jìn)行操作，即定義一個(gè)主方向。

padding

padding 屬性是控制元素所有四條邊的內(nèi)邊距（元素內(nèi)部空出的空間）區(qū)域，這個(gè)可以和margin對(duì)應(yīng)來(lái)理解。padding是控制內(nèi)邊距區(qū)域，margin是控制外邊距區(qū)域。簡(jiǎn)單理解就是想象一個(gè)地球，padding可以控制大氣層以內(nèi)的空間，而margin控制大氣層之外的空間（但是要在銀河系里）。padding-top、padding-left、padding-right、padding-bottom為padding下幾個(gè)常見(jiàn)的子屬性。它們和margin下的子屬性功能上很相似，但是作用的標(biāo)準(zhǔn)不同，即一個(gè)控制外邊距，一個(gè)控制內(nèi)邊距。

margin

margin屬性為給定元素設(shè)置所有四個(gè)（上右下左）方向的外邊距屬性。理解可以參考上一個(gè)padding。margin-top、margin-left、margin-right、margin-bottom為margin下幾個(gè)常見(jiàn)的子屬性。margin-top屬性用于設(shè)置元素的頂部外邊距外邊距區(qū)域。正值使它離相鄰元素更遠(yuǎn)，而負(fù)值使它更靠近相鄰元素?？梢岳斫鉃槲覀?nèi)送ㄟ^(guò)一個(gè)門框，我們頭頂距離門頂?shù)木嚯x，我們可以踮起腳尖使頭頂與門頂距離減小，也可以蹲下是頭頂與門頂?shù)木嚯x增加，margin-top就是控制這個(gè)距離的。其余三個(gè)left、right、bottom除方向上不同以外，都相同。

filter

?filter屬性將模糊或顏色偏移等圖形效果應(yīng)用于元素。濾鏡通常用于調(diào)整圖像、背景和邊框的渲染。這個(gè)可以簡(jiǎn)單理解成我們手機(jī)相機(jī)功能里的簡(jiǎn)單修圖。

align-items

align-items?屬性設(shè)置了所有直接子元素的align-self值作為一個(gè)組。在 Flexbox 中，它控制子元素在交叉軸上的對(duì)齊。在 Grid 布局中，它控制了子元素在其網(wǎng)格區(qū)域內(nèi)的塊向軸上的對(duì)齊。一般可以設(shè)置成stretch、center、start、end。align-items一般用于垂直方向?qū)R。這個(gè)可以理解成一個(gè)管家?guī)椭鷉lex等布局模式管理子元素的對(duì)齊的位置。

justify-content

justify-content屬性定義瀏覽器如何沿著彈性容器的主軸和網(wǎng)格容器的行向軸分配內(nèi)容元素之間和周圍的空間。一般該屬性值可以設(shè)置成start、center、space-between、space-around、space-evenly。justify-content一般用于水平方向?qū)R。它的作用和align-items相似，只是在對(duì)齊的方向上有所區(qū)別。

line-height

line-height屬性用于設(shè)置多行元素的空間量，如多行文本的間距。對(duì)于塊級(jí)元素，它指定元素行盒（line boxes）的最小高度。這個(gè)其實(shí)和word文檔中的行間距作用相似，即設(shè)置行與行之間的間隔。

font-size

font-size屬性設(shè)置字體大小。更改字體大小還會(huì)更新字體大小相關(guān)的?單位.這個(gè)就和word里的設(shè)置字號(hào)一樣，即控制字體的大小。

font-family

font-family允許你通過(guò)給定一個(gè)有先后順序的，由字體名或者字體族名組成的列表來(lái)為選定的元素設(shè)置字體?？梢岳斫鉃閣ord中設(shè)置的字體比如“宋體”、“楷體”等。

border-radius

border-radius允許你設(shè)置元素的外邊框圓角。當(dāng)使用一個(gè)半徑時(shí)確定一個(gè)圓形，當(dāng)使用兩個(gè)半徑時(shí)確定一個(gè)橢圓。這個(gè)（橢）圓與邊框的交集形成圓角效果。這個(gè)可以理解為將矩形的四個(gè)角變成圓弧形狀，類似與下圖

flex-shrink

flex-shrink屬性指定了 flex 元素的收縮規(guī)則。flex 元素僅在默認(rèn)寬度之和大于容器的時(shí)候才會(huì)發(fā)生收縮，其收縮的大小是依據(jù) flex-shrink 的值。這個(gè)可以理解成當(dāng)一個(gè)杯子中的水溢出的時(shí)候，我們可以考慮將里面的一些水按比例取出來(lái)一部分，達(dá)到不讓水溢出的目的。

以上就先總結(jié)這么多，后面感覺(jué)還有的話再補(bǔ)充。

柚子快報(bào)激活碼778899分享：前端 CSS中常用的屬性

http://yzkb.51969.com/

相關(guān)閱讀