Css布局知識(shí)點(diǎn)有哪些

這篇文章主要介紹了Css布局知識(shí)點(diǎn)有哪些，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

常見的塊級(jí)元素<div> <p> <form>

常見的行內(nèi)元素<span> <a>

display 是CSS中最重要的用于控制不具有的屬性。每個(gè)元素都有一個(gè)默認(rèn)的display值，這個(gè)默認(rèn)值與元素的類型有關(guān)。有的默認(rèn)值為block ，被稱為塊級(jí)元素，有的默認(rèn)值為inline被稱為行內(nèi)元素。

當(dāng) display 值為none時(shí)，元素會(huì)隱藏。與visibility不同，visibility:hidden;還會(huì)占據(jù)空間。而display:none 則不占據(jù)空間。<script>默認(rèn)的display值為none

margin:auto;

#main { width: 600px; margin: 0 auto; }

設(shè)置塊級(jí)元素的 width 可以防止它從左到右撐滿整個(gè)容器。然后你就可以設(shè)置左右外邊距為 auto 來(lái)使其水平居中。元素會(huì)占據(jù)你所指定的寬度，然后剩余的寬度會(huì)一分為二成為左右外邊距。

盒模型

當(dāng)設(shè)置了元素的寬度，實(shí)際展現(xiàn)的元素會(huì)超過(guò)你的設(shè)置，這是因?yàn)樵氐倪吙?span lang="EN-US">border 和內(nèi)邊距會(huì)（padding)會(huì)撐開元素。

.simple { width: 500px; margin: 20px auto; }

.fancy { width: 500px; margin: 20px auto; padding: 50px; border-width: 10px; }

將上面兩個(gè)class運(yùn)用在不同的div上，會(huì)發(fā)現(xiàn)fancy明顯比simple要大，雖然給他們?cè)O(shè)置了相同的寬度

box-sizing屬性：當(dāng)你設(shè)置一個(gè)元素為 box-sizing: border-box; 時(shí)，此元素的內(nèi)邊距和邊框不再會(huì)增加它的寬度。

.simple { width: 500px; margin: 20px auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.fancy { width: 500px; margin: 20px auto; padding: 50px; border: solid blue 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Css布局知識(shí)點(diǎn)有哪些”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!