Css布局知識點有哪些

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

常見的塊級元素<div> <p> <form>

常見的行內元素<span> <a>

display 是CSS中最重要的用于控制不具有的屬性。每個元素都有一個默認的display值，這個默認值與元素的類型有關。有的默認值為block ，被稱為塊級元素，有的默認值為inline被稱為行內元素。

當 display 值為none時，元素會隱藏。與visibility不同，visibility:hidden;還會占據空間。而display:none 則不占據空間。<script>默認的display值為none

margin:auto;

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

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

盒模型

當設置了元素的寬度，實際展現的元素會超過你的設置，這是因為元素的邊框border 和內邊距會（padding)會撐開元素。

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

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

將上面兩個class運用在不同的div上，會發現fancy明顯比simple要大，雖然給他們設置了相同的寬度

box-sizing屬性：當你設置一個元素為 box-sizing: border-box; 時，此元素的內邊距和邊框不再會增加它的寬度。

.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; }

感謝你能夠認真閱讀完這篇文章，希望小編分享的“Css布局知識點有哪些”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!