本文详细介绍了CSS盒模型的组成，包括margin、border、padding和content，以及它们的属性和缩写方式。同时，解释了W3C盒子模型与IE盒子模型的区别，并指出在处理嵌套盒子时边框重合的问题。此外，还提到了盒子背景样式的设置，如background-color、background-image等。通过对这些概念的理解，开发者可以更好地控制网页元素的布局和视觉效果。
1.盒子组成
margin 外边距 盒子到外面某个地方的距离
border 边框 盒子四边的边框 默认为0
padding 内边距 盒子内容到盒子内边的距离
width 表示设置的长度
height 表示设置的高度
2.盒子的属性
margin 外边距的属性 上 margin-top 右margin-right 下 margin-bottom 左 margin-left
缩写 一般按顺序来 margin ： 上右下左 注意点：外边距的那部分没有颜色
boder 内边距的属性 上 boder-top 右border-right 下border-bottom 左 border-left
缩写 border ： 上右下左
也可写为 border：边框大小 边框样式 边框颜色 列如 border： 1px solid red；
padding 内边距的属性 上padding-top 右padding-right 下padding-bottom 左 padding-left
缩写 padding：上右下左
3.CSS的盒模型
内容盒子/W3C盒子/普通盒子 width表示内容区的宽度 height表示内容区的高度
盒子的宽度 width+padding-left+padding-right+border-right+border-left
盒子高度 height+padding-top+padding-bottom+border-top+border-bottom
页面所占的宽度 盒子宽度+margin-left+margin-right
页面所占的高度 盒子高度+margin-top+margin-bottom
边框盒子/怪异盒子/IE盒子 width表示盒子的宽度 height表示盒子的高度
内容区的高度 width-paddingleft-padding-right-margin-left-marginright
内容区的高度 height-paddingtop-padding-bottom-bordertop-borderbottom
盒子的宽度 width
盒子的高度 height
盒子所占的页面宽度 width+margin-left+margin-right
盒子所占的页面高度 height+margin-top+margin-bottom
盒子模型注意点 两个盒子嵌套关系边框重合问题
1)给父元素加边框
2)给父元素加内边距
3.盒子背景样式
背景颜色 background-color
背景图片 background-image
背景平铺 background-repeat
背景位置 background-position
缩写 background：背景颜色 背景图片 背景平铺 背景位置
背景关联方式 background-attachment ：scroll
scroll 默认值 滚动条
fixed 固定
扫一扫
851
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
