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 表示整個盒子是包含你設置的邊距的,邊距指內邊距和外邊距
