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 表示整个盒子是包含你设置的边距的，边距指内边距和外边距
版权声明：除特别声明外，本站所有文章皆是本站原创，转载请以超链接形式注明出处！
