8.3CSS盒模型 笔记

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  固定