css笔记

后代选择器（.div1 .li2 p） 交集选择器（h3.special） 并集选择器（h3,li） 
通配符 子选择器（div>p） 序号选择器（ul li:first-child） 下一个兄弟选择器（h3+p）


交集选择器（无空格）： I6不兼容
序号选择器（:first-child）：I8才开始兼容
*选择器：效率不高，如果页面上的标签越多，效率越低，所以页面上不能出现这个选择器。
儿子选择器>  ：IE7开始兼容，IE6不兼容。
下一个兄弟选择器：IE7开始兼容，IE6不兼容。




哪些属性能继承？
color、 text-开头的、line-开头的、font-开头的。
这些关于文字样式的，都能够继承； 所有关于盒子的、定位的、布局的属性都不能继承。


层叠性：就是css处理冲突的能力。 所有的权重计算，没有任何兼容问题！ 


!important提升的是一个属性，而不是一个选择器
!important无法提升继承的权重，该是0还是0
!important不影响就近原则


css 优先级理解：1.先比谁近谁近就是谁。2.如果一样近比权重谁的权重大就是谁。3如果权重也一样大就是比谁在下面就是谁


!important：在一样近的条件下才能有效提高优先级。


层叠的理解：多个样式作用于同一标签属性，谓之层叠。




css中的width和height的含义和android中View的width和height的含义不同：
css中标签的实际宽与高是其对应paddind+对应width/height+对应border.而android中width和height就是控件的实际宽度和高度。
css中的四个padding只以内容的左上边为起点计算。而android的四个padding对应内容的四边来计算。


border dotted 熟悉360浏览器显示为方形 火狐浏览器部分颜色显示比较浅


css的盒子模型：所有的标签都可以看做盒子：由内层的width,height 外层的padding ，再外层的 border，margin组成。




img 元素之间的空格的“默认空白”


块级元素：可以设置宽高，默认占一行，默认父标签宽度。容器标签都是块级元素
行级元素： 不能设置宽高。文本标签（除去P外都是行级标签）


块级标签和行内标签的转换:
转行内：display: inline; （又不能设置宽高）
转块级：display: block; （变成块级又不能并排）


标签脱离标准标签的样式限制：
1.浮动 float: left;使元素脱离标准限制成为非标准流元素：不分块级和行级。能并排，能设置宽高
根据是否非标准流元素：有不同体系的元素定位参照


  div 浮动 文字<P>不浮动 文字围绕效果 文字不会被浮动的div 遮挡


  浮动之间是相互影响的，如果浮动父标签的高度0，则不能约束其它浮动。


  浮动的子标签是非标准流标签，不能给父容器撑出高度，但是如果浮动父容器中又存在非浮动标签，则会重新给父容器撑出所有孩子总高度。（具体原因不明，但是所有浏览器都支持这一效果）


  清除其它浮动对自己的影响：clear: both  清除其它浮动对自己的影响 但是margin会失效（参照的浮动父高度为0）
  1.隔墙法：两个浮动父容器之间建一个中间标签 clear: both  中间标签有高度
 
  2.“内墙法” ：中间标签位于一个浮动父容器的内部（能重新撑出父容器高度，实用）
  
  overflow:hidden 溢出隐藏:1.隐藏超出边框的部分 2.给只有浮动孩子的父容器重新撑出高度（实用）。


浏览器兼容问题：
微型盒子Bug：IE6不支持小于12px的盒子（小于12会自动等于12）:加_font-size属性 解决
加上下划线的属性只有IE6能看到(后门),如：_background-color,_font-size, _zoom:1
双倍marginBug：IE6 当连续浮动的元素有和浮动方向相同的margin时候。其相反方向的最边会出现双倍margin:故为了兼容性margin与浮              动方向相反 不应该最边_margin使用hack 方式解决
IE6 3像素Bug：浮动的子元素 同方向margin 多margin出三个像素（只有一个子元素，上面是连续的子元素）


overflow:hidden清除浮动bug: IE6不支持其第二特性：撑出只有浮动孩子的父高度。 解决：追加_zoom:1;


伴生属性：追加如_zoom:1属性解决bug的_zoom:1


margin的塌陷：标准文档流中竖直方向的margin是不叠加的,以较大的为准。
如果不在标准流中，盒子都浮动，则没有塌陷现象，会叠加。水平不会有塌陷现象


margin-left: auto;
margin-right: auto;
==
marin:0 auto  居中自己效果（左右居中必须有明确的width，只有标准流的盒子 ）
text-align:center  父容器中使用，水平居中容器内部文本（图片也是文本）


text-indent:2em  缩进2个字符
line-height: 一行文本的高度 文本自动居中


子标签margin父标签是以父标签的border为参照 ：如果父标签border为0，则以在父标签外面找能找的参照。
margin本质描述是同级标签的距离 而不是父子标签的关系。父子距离应该用padding  因为margin的兼容问题 应该善用


font-family： 一般使用微软雅黑 宋体 黑体。如果要使用其他字体 为了兼容 需要切图。
font:14px/24px "宋体";  大小 行高 字体
英语：times new roman ,arial
英语字体必须放在中文字体之前
font: 字号/行高 字体,字体...
a:link  a:visited a:hover a:active  顺序不能变。。。
list-style:none 去除ul li 的小圆点
background-image: url("2.jpg");   
background-repeat: no-repeat/repeat-x/repeat-y; //大背景图片+background-position 共同使用 防止滚动出现
background-position: center center;
1background-attachment:fixed;背景就会被固定住，不会被滚动条滚走。


background:red url(1.jpg) no-repeat 100px 100px fixed;
等价于：
1background-color:red;
2background-image:url(1.jpg);
3background-repeat:no-repeat;
4background-position:100px 100px;
5background-attachment:fixed;




多行文本居中：标签的高度减去总行高/2 获取toppadding值  增加toppadding 再高度减 toppadding 
2.定位：相对定位 绝对定位，固定定位


相对定位：position: relative ; 相对自己的原来的位置，移动后 ，最初的位置的标签对周围的标签的作用不变。只是看起来移动了。留坑 微调元素位置 做绝对定位的参考


绝对定位：position: absolute;top 相对于有定位的父辈元素border的左上内边界/页面左上角 bottom 相对页面左下角
块级元素绝对定位后就就不是块级元素，原本默认的全屏宽度会变为0 ：margin 0 auto 会失效
绝对定位的盒子水平居中： 先left50% 在左移动盒子长度的一半    绝对定位的子元素无视参考元素的padding


子绝父相：就近原则。（实用）
子绝父绝：就近原则。（一般不用）




固定定位：脱标：并列的标准流元素会当其不存在。相对于浏览器窗口 左上角定位 IE6 不兼容






z-index：只对定位的元素有效 （一般加相对定位-不脱标）
从父现象：父元素的z-index的值不能盖住其他元素 儿子的值大也无用


标准文档流的性质？
非标准文档流的性质？