CSS基础知识

选择器

标签选择器：选中所有标签（div,span,p等）

id选择器：#id（id区分大小写）

类选择器：.classname（同时属于多个类用空格隔开，如：

<p class="title0 title2">music</p>

）

后代选择器：用空格隔开（选中的是所有后代，不止儿子），语法：

.div1 p{ color: red; }

交集选择器：中间用.隔开，一般以标签开头，语法：p.yi{font-size: 50px;}

并集选择器：中间用,隔开

通配符*：所有

CSS层面尽量不要用id，id留给js用

CSS3选择器

儿子选择器：中间用>隔开，语法：div>p{color:blue;}

序选择器：冒号后面加first-child/last-child/nth-child(2n)，语法：ol li:first-child{color: red;}

兄弟选择器：中间用+号隔开，表示紧跟着的那个元素，没多大用

常见属性

字体颜色：color:red

字体大小：font-size:60px

背景颜色：background-color:

加粗：font-weight: bold

斜体：font-style: italic

下划线：text-decoration: underline

去除列表样式：list-style:none

继承性

不是所有的属性都能继承

能继承的属性：color,text,line,font开头的（和文字相关的）

层叠性

当多个样式作用到同一个标签时只有一个样式会生效

权重：id选择器>类选择器>标签选择器（255进位，即255个标签选择器等于1个类选择器）

如果权重一样，以后出现的为准

如果不能直接选中，继承的影响为0

如果没有一个样式能直接选中该标签，但有多个父标签有样式，则继承最近的父标签的样式

可以在单个属性（而不能是整个选择器）后面加上!important提供权重，提高后该属性的权重为无穷大，语法：

dd{color: blue !important;}

添加!important只对直接选中的元素有效，而对继承性和就近原则没有影响

盒模型

width,heigth,padding,border,margin的示例如下图：



背景颜色会填充border以内的区域

padding的顺序：上右下左，示例：padding:10px 20px 10px 100px: 后面的四个值的顺序为上右下左

border示例：div{border: 10px,dashed,red;}，3个属性可拆开成border-width/style/color，也可按上右下左的顺序拆开成bordet-top/right/bottom/left，还能拆成border-top-width的形式

第二个属性的所有样式参考：http://www.w3school.com.cn/tiy/t.asp?f=csse_border-style

标准文档流

空白折叠现象：多个空白折叠成一个

元素按顺序从头到尾显示

高矮不齐，底边对齐：多种高矮不同的图片显示时，都会向底边对齐

一行写不满，自动换行

标签分为两种等级：块级元素和行内元素

块级元素：霸占一行，不能与其它元素并列；能设置宽和高，不设置默认等于父亲的宽高

行内元素：与其它行内元素并排；不能设置宽高，宽度即为文字的宽度

所有文本级标签处理p以外都是行内元素，所有容器级标签都是块级元素

块级转为行内元素：div{ display: none; }

行内元素转为块级：span{ display: block; }

标准流中会出现margin塌陷的现象，即垂直方向的两个盒子同时设置了margin，两个盒子之间的margin以大的那个为准，水平方向不存在这个问题，不是标准流也不会有这个问题

margin的值为auto时表示根据情况尽可能设到最大，左右都设置则居中，左右居中上下0可简写为margin:0 auto，只在标准流中能用，且必须明确设置width

margin本质上是用来描述兄弟之间的距离，最好不要用来处理父子之间的距离，父子之间的距离用padding

首行空两个文字的格：text-indent:2em;

脱离标准流的三种方式

浮动

浮动让块级元素可以并排，让行内元素可以设置宽高，实际上设置了浮动以后元素就不分块级元素和行内元素了，即该元素脱离了标准流

浮动的元素会相互贴靠，浏览器装不下时会尝试贴靠上一个元素

浮动的元素挡住不浮动的元素中的字体时，会有字体环绕效果

浮动元素的宽高不能超过其父元素

语法：float:left/right

清除浮动：让浮动不影响其他盒子的浮动

清除浮动方法①：给祖先加高度。但实际工作中很少用高度width属性，因为盒子能够被内容自动撑高，但浮动的元素不会撑高盒子

清除浮动方法②：给盒子加上clear:both属性，表示自己盒子内的浮动不受其他盒子浮动的影响，但由于盒子没有高，使用margin属性会受影响

清除浮动方法③：隔墙法。在两个盒子中间放置一个空白的盒子作为墙，给墙设置clear:both属性清除浮动，设置width属性作为两个盒子的间距

清除浮动方法③的变种：内墙法。把墙放到盒子的最后一个元素中去，不仅可以清除浮动，还可以让浮动的元素把盒子的高撑起来

清除浮动方法④：使用overflow:hidden。给盒子添加overflow:hidden属性后盒子也可以被浮动的子元素撑高，这是浏览器的一种渲染机制，没有为什么，这种方法最好用

清除浮动总结：只要盒子有高，浮动就不会相互影响。但不用显示地设置盒子的高，可以利用以上几个方法让浮动的子元素把盒子的高撑起来

IE6兼容问题

加了下划线的属性只有IE6能识别，可用于针对IE6做兼容

IE6，7不支持小于12px的小盒子，小于12px的盒子都会有12px那么大，设置_font-size=0可以解决这个问题

IE6不支持用overflow:hidden来清除浮动,解决：添加_zoom:1

双倍margin：当出现连续浮动的元素时，margin的方向和浮动的方向相同时队首元素会出现双倍margin，解决：margin和浮动方向相反，然后用padding

文字属性

line-height：设置行高，文字在自己的行高中的居中的，但如果不能被2整除，则下面的空白会比上面的空白多1像素，所以行高，字号最好都设置为偶数，这样就能保证一定能被2整除，行高可以用百分比设置，表示为字号的百分之几，一般都大于100%

行高设置为盒子高时可以实现单行文字的居中效果，多行文字的居中只能用padding

font:12px/24px 宋体;等价于font-size:12px; line-height:24px; font-family:宋体;

系统默认会有的中文字体：微软雅黑(Microsoft YaHei)，宋体(SimSun)，黑体，英文一般用：Arial，Times New Roman

font-family:”Arial”,”宋体”;中间的逗号表示备选字体，一般把英文字体写在前面

其他

伪类：同一个标签，根据状态不同有不同的样式，伪类用:号隔开

a标签的4个伪类：link,visited,hover,active,并且必须按这个顺序书写

伪类用于设置文字的样式，背景

颜色的rgb表示法：rgb(58,58,58)，十六进制表示法：#223344，可简化为#234