背景/内外边距

背景
1.背景颜色background-color
2.背景图片
img是内容,背景图是装饰作用
background-image:url(图片路径);
3.背景图的重复--默认水平垂直方向都平铺
background-repeat:no-repeat不重复/repeat-x水平平铺/repeat-y垂直平铺
4.背景定位
background-position:水平位置 垂直位置;
水平方向给正值向右移动--x轴正方向
垂直方向给正值向下移动--y轴正方向
例如background-position: 100px(向右移动100px) 100px(向下移动100px);
指定具体方向：
top上、bottom下、left左、right右、center居中
5.背景图固定
background-attachment:fixed固定;（适合做广告）

雪碧图/精灵图--CSS sprite （简单理解就是一个有很多图标的照片，只要上传一张即可，通过定位来实现模块图片的实现）
--减少请求次数,减轻服务器压力

6.**背景的简写属性
background:背景颜色 背景图片 背景重复 背景定位;
例如
background-color:#ddd;
background-image: url(img/dog.png);
background-repeat:no-repeat ;
background-position:-100px 30px;（负号是相反方向走）
简写成：
background:#ddd url(img/dog.png) no-repeat -100px 30px;
####**框模型 --盒子模型--标准盒子模型
包含：内容、内边距、边框、外边距
元素宽度=
###外边距margin
1.元素外边距的设置
单方向设置：
margin-top上外边距
margin-bottom下外边距
margin-left左外边距
margin-right右外边距
四个方向一起设置外边距
margin:20px;上下左右都是20px
margin:10px 20px;上下10px,左右20px
margin:10px 20px 30px;上10px,左右20px,下30px
margin:10px 20px 30px 40px;上10px右20px下30px左40px
2.使用外边距遇到的问题
行内元素(a,span,b...)垂直方向外边距不起作用
内外嵌套(没有浮动)如果给内层元素设置上外边距会默认作用于父元素
解决：父元素设置透明边框/不给子元素设置上外边距改为给父元素设置上内边距
垂直方向外边距重合(非浮动)--以大值为准
3.块级元素水平居中--非浮动元素
只要设置水平方向值为auto
例如margin:0 auto;
margin:10px auto 20px;上10px左右居中下20px
###内边距
内边距设置方法--同上
padding-top上内边距
padding:10px 20px;上下内边距是10px左右内边距是20px
注意：内边距会把元素撑大
解决办法:将元素宽高减去padding
开发常见问题及注意事项；
见到结构布局都一样，用列表来布局，不一样用div
先清除默认样式及内外边距，
*{margin:0;
padding:0;
}
ul，li{
list-style:none;
}
a{
text-decoration:none;
}
有浮动一定要量范围
#999偏灰

1.通屏元素，， 2. 有效范围
不用hr标签，用边框来实现隔行，border-bottom：
新闻列表，商品列表，导航列表，都用列表
img外面最好包个div

common共同 界面 元素样式的通用
1.@charset “utf-8”
/***清除默认样式***/（注意这里是小项目这么写简单，真的大项目不要这么写，后面会详细介绍）
*{
margin：0；
padding：0；

}
ul，ol，li{
list-style:none;
}
a{
text-decoration:none;

}
<!--分割线标签 width：宽度 500px:像素 color:颜色 align:位置（默认center） size:垂直方向的大小 -->
<hr width="500px" color="red" align="left" size="20px"/>