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的值不能盖住其他元素 儿子的值大也无用

标准文档流的性质？

非标准文档流的性质？