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>

</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 表示整个盒子是包含你设置的边距的，边距指内边距和外边距

分类: css3