css盒子模型 css3盒子相關樣式


1.內邊距(內邊距在content外,邊框內)
內邊距屬性:
padding          設置所有邊距
padding-bottom     底邊距
padding-left          左邊距
padding-right          右邊距
padding-top          上邊距
 
2.邊框
border-style   定義邊框樣式
單邊框樣式
border-top-style
border-left-style
border-right-style
border-bottom-style
 
border-top-width
border-left-width
border-right-width
border-bottom-width
 
邊框顏色
border-color
 
css3邊框
border-radius:    圓角邊框
box-shadow:     邊框陰影
border-image:     邊框圖片
 
3.外邊距
圍繞在內容邊框的區域就是外邊距,外邊距默認為透明區域
外邊距接受任何長度單位,百分數值
margin     設置所有邊距
margin-bottom     設置底邊距
margin-left          設置左邊距
margin-right          設置右邊距
margin-top          設置上邊距
 
外邊距合並
當另個盒子合並在一起的時候,他們的邊距會合並,(遵循多的一部分)
 
css3盒子相關樣式
1.盒子的類型
inline       block     inline-block     inline-table(讓別個變成行內元素)     list-item(變成列表形式的展現)
 
<style>
     div{
          display:list-item;
          list-style-type:circle;
          margin-left:30px;
     }
</style>
<body>
     <div>實例1</div>
     <div>實例2</div>
     <div>實例3</div>
     <div>實例4</div>
</body>
內聯元素無法設置寬度和高度,希望設置它的高度,寬度,又希望按照內聯樣式顯示,所以使用inline-block
 
2.對盒子中容納不下的內容的顯示
overflow : hidden(隱藏)     scroll(滾動)     auto(水平或垂直添加滾動條)     visible(直接超出顯示)
overflow-x : hidden    scroll  ;
overflow-y : hidden    scroll  ;
 
white-space : nowrap ;(字體不允許換行)
 
3.盒子的陰影和大小計算方式
box-shadow : 10px 10px 5px #ccc ;
 
盒子大小根據盒子的 box-sizing:(border-box , content-box , inherit)來決定
content-box  表示整個區域的寬度和高度不被包含在盒子的區域當中
border-box  表示整個盒子是包含你設置的邊距的,邊距指內邊距和外邊距


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM