CSS 盒子模型

一.盒子模型

组成部分

• 外边距(margin)：和其他盒子之间的距离
• 边框(border)：边框线
• 内边距(padding)：内容和边框之间的距离
• 内容(content)：盒子的内容，显示文本和图像
  高度与宽度
• 当设置 CSS 元素的宽度和高度属性时，只是设置内容区域的宽度和高度。但是完整大小的元素，还必须添加内边距，边框和外边距。
• 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
• 总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

二.边框属性

边框属性	值
边框样式(border-style)	none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线
边框宽度(border-width)	单位是像素值(px)
边框颜色(border-color)	gb(r,g,b)、rgb(r%,g%,b%)、十六进制颜色值、颜色名
综合设计(border)	border:四边宽度 四边样式 四边颜色
圆角(border-radius)	水平半径参数/垂直半径参数
图片边框(border-image)	url(图片路径)

注意：可以单独设置各边

三.外边距属性

1.属性值

• auto：设置浏览器边距（依赖浏览器）
• length：定义一个固定值（如px，pt，em等）
• %：定义一个使用百分比的边框
• 可以使用负值，重叠的内容

2.单边外边距属性

• margin-top
• margin-right
• margin-bottom
• margin-left

3.简写属性

• margin:25px 50px 75px 100px;
  上边距为25px
  右边距为50px
  下边距为75px
  左边距为100px
• margin:25px 50px 75px;
  上边距为25px
  左右边距为50px
  下边距为75px
• margin:25px 50px;
  上下边距为25px
  左右边距为50px
• margin:25px;
  所有的4个边距都是25px

四.内边距属性

1.属性值

• length：定义一个固定值（如px，pt，em等）
• %：定义一个使用百分比的边框
• 不能为负值

2.单边外边距属性

• padding-top:
• padding-bottom:
• padding-right:
• padding-left:

3.简写属性

• padding:25px 50px 75px 100px;
  上填充为25px
  右填充为50px
  下填充为75px
  左填充为100px
• padding:25px 50px 75px;
  上填充为25px
  左右填充为50px
  下填充为75px
• padding:25px 50px;
  上下填充为25px
  左右填充为50px
• padding:25px;
  所有的填充都是25px

五.背景颜色

属性	值
background-color：背景颜色	颜色值、十六进制颜色值、rgb函数
background-image：背景图像	url(图像路径)
background-repeat：背景图像的平铺属性	repeat：默认值，表示水平方向、垂直方向都平铺； no-repeat：不平铺； repeat-x：水平方向平铺； repeat-y：垂直方向平铺
background-attachment：背景图像固定	scroll 背景图片随着页面的滚动而滚动，这是默认的； fixed 背景图片不会随着页面的滚动而滚动； local 背景图片会随着元素内容的滚动而滚动； initial 设置该属性的默认值； inherit 指定 background-attachment 的设置应该从父元素继承
background-position：背景图像的位置	length :百分数；由浮点数字和单位标识符组成的长度值 position :top ,center , bottom , left , center , right

六.盒子模型的新增属性

• 颜色透明度：rgba(r,g,b,alpha)
  alpha表示透明度取值在0.0~1.0(0表示完全透明，1表示完全不透明、0.5是半透明)
• 圆角：border-radius
• 阴影：box-shadow