css基础
1.继承性
<!--继承性，给父级设置属性子集受益-->
<!--只有以color/font/text/line开头的属性才可以继承-->
<!--CSS继承，只要是后代都可以继承-->
<!--特殊性：a标签继承无效；label标签继承无效-->
2.层叠性/优先级
<!--多个选择器控制一个属性，根据权重判断渲染哪个-->
<!---->
<!--优先级判断-->
<!--1.是否是直接选中,直接选中优先（间接选中就近原则）-->
<!--2.相同选择器，就近原则-->
<!--3.不同选择器比权重，ID>类>标签>通配符>继承>浏览器默认-->
!importent可以将这个选择器优先级提最高，但必须是直接选中标签
p{
color: red !important;
font-size:40px
}
只有字体颜色提升两位优先级，跟字号没关系
权重值
只有选择器直接选中元素，才需要计算权重
3.块级（DIV）与行内（SPAN）
div是容器级块级元素，可以嵌套任何标签
span是文本级的内联元素，只可以嵌套文字/图片/超链，
块级元素独占一行，如果没有设置宽，那么和父元素一样；
如果设置了宽，就按照设置的显示
行内元素不独占一行
没有设置宽度，那么就和内容一样宽（行内不可以设置宽度）
4.行内块元素（IMG）
既不独占一行，又可以设置宽度和高度
5.显示模式转换
转换行内：display:inline
转换块级：display:block
转换行内块:display:inlin-block
6.背景属性：
1)color
background-color:#fff (十六进制)
background-color:rgb(255,255,255)(通过rgb设置)
background-color:rgba(255,255,255,.7)(最后一位是透明度)
background-color:"red"(根据颜色单词)
2)image
background-img:url(img/1.png)相对定位
background-img:url(http://www.img.com/img/1.png)绝对定位
如果图片没有标签大，会平铺
3）repeat
background-repeat: no-repeat; //取消平铺
background-repeat: repeat-x; //X轴平铺
background-repeat:repeat-y; //Y轴平铺
background-repeat:repeat //（默认平铺）
应用场景：背景最好用有规律的小图片，利用平复，平铺整个网页，省资源
4）背景图片的偏移
width: 500px;
height: 500px;
background-color:red;
background-image: url(img/intel.web.368.207.2.jpg) ;
background-repeat: no-repeat;
background-position: left top;
值可以是left center right top bottom
也可以是10px 30px
应用场景：background-position: center top;大图片设置背景不惯浏览器宽怎么变，都是从两边缩小到中间；
5）合体
background: red url() no-repeat left left;
6）背景与插入图片区别
1.背景图片是装饰，不占空间，插入图片占空间
2.背景图片有定位属性，好控制位置，插入图片控制不方便
3.插入图片语义强与背景图片
7）精灵图
是图像的合成技术，可以减少请求次数，减轻服务器压力
7盒子模型：
1)内边距（padding）
padding:10px; //四个边是10
padding:10px 20px; //上下10，左右20
padding:10px 20px 30px;//上10下30左右20
padding-left:10px; //左10
注意：1）给标签设置内边距，宽度，高度会发生变话；
2）内边距有背景颜色
2）外边距(margin)
margin:10px
.....同上
注意：外边距塌陷1.两个块左右边距相加+；上下边距取最大的那个；；；
3）边框属性：
border：1px solid black;
border-left:1px solid black;
border-width:4px 2px 1px 5px;
border-style:solid .. .. ..;
border-color:red .. .. .. 上右下左
border-width: 4px 2px 1px 左右一样2
border-width:4px 2px 上下4，左右2
盒子模型尺寸=2*(padding+border-width)
widnth=padding-left+border-width+padding-right
height=padding-top+border-width+padding-bottom
盒子空间的高度与宽度+margin就可以了
4）box-sizing
box-sizing:border-box; 不管你border或者padding是多少，原来设置的宽与高是不会变的；
没有边框的父元素（DIV）会随着子元素（div）的上外边距改变而改变，解决方法：父元素加边框
企业开发中父子盒子位置关系，首先考虑PADDING,其次考虑MARGIN,margin主要是用在兄弟当中；
9居中
盒子居中：margin: 0 auto;
文字居中：text-align:center;
文字垂直居中：line-height:盒子的高度；（文字在，行高中默认居中一行用）多行用padding
开发中先清空系统自带的margin和padding
*｛margin:0;padding:0｝性能差
YUI CSS RESET 复制过来
排版方式：
标准流
浮动流（fluid）
浮动特点：
可以设置宽高，水平排版，脱离标准流
规则：左浮动找左浮动，右浮动找右浮动；
