CSS那些事儿 html+css

css选择器
基本选择器：id，class，tag，*
属性选择器：

E[attribute]匹配所有具有attribute属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如“[cheacked]”。以下同。） E[attribute=value]匹配所有attribute属性等于“value”的E元素 E[attribute~=value]匹配所有attribute属性具有多个空格分隔的值、其中一个值等于“value”的E元素 E[attribute^=value] 匹配任何E标签之后的同级F标签 E[attribute$=value]匹配所有attribute属性值包含有“value”的E元素 E[attribute*=value] 匹配所有attribute属性值是以"value"结束的E元素

组合选择器：（标签选择器[群组选择器]、后代选择器、子元素选择器、相邻选择器）

E，F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号隔开 E F 包含选择符，匹配所有被E元素包含的F元素
E>F 子元素选择器，匹配所有E元素的儿子元素F E+F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F
E~F 匹配任何E标签之后的同级F标签

结构选择器：E:nth-child(n/odd/even/2n)
E:nth-last-child(n)
E:nth-of-type(n)
E:empty
伪类和伪元素:E:target/disable/enable/checked/first-line/first-letter/
E::before/after
E:first-child
E:first-of-type
E:not(s)

浏览器读取你的选择器，遵循的原则是从选择器的右边到左边读取。换句话说，浏览器读取选择器的顺序是由右到左进行”。选择器的最后一部分，也就是选择器的最右边（在这个例子中就是a[title]部分）部分被称为“关键选择器”，它将决定你的选择器的效率如何？是高还是低。主要把握一点“越具体的关键选择器，其性能越高”，所谓的优先级，指的就是哪条样式规则会最后作用域指定的元素，指定的越具体优先级越高。 #myId span span #myId 下面的效率要比上面的高。因为最右边的关键选择器是最具体的，也符合上述的选择器优先级顺序。

2. 关于盒子模型
为了给文档树中的各个元素排版定位（布局），浏览器会根据渲染模型为每个元素生成四个嵌套的矩形框，分别称作 content box、padding box、border box 和 margin box，它们是不可分割的，并可能会重合，这就是 CSS 规范中描述的“盒模型”（box model）。

box-sizing是css3的box属性之一，也遵循CSS的Box model原理。box-sizing现代浏览器都支持，但IE家族只有IE8版本以上才支持，虽然现代浏览器支持box-sizing，但有些浏览器还是需要加上自己的前缀，Mozilla需要加上-moz-，Webkit内核需要加上-webkit-，Presto内核-o-,IE8-ms-，所以box-sizing兼容浏览器时需要加上各自的前缀。 box-sizing：content-box||border-box||inherit content-box:此值为其默认值，其让元素维持W3C的标准Box Model，content-box盒模型是大多数浏览器厂商都会采取的一种渲染方式。box的总宽度为content-area+padding+border，而box的实际宽度为content-area，也就是你在写css代码时的width宽度。

【CSS那些事儿】W3C 的盒子模型中，盒子的尺寸只包含内容区，padding，border 和 margin 被排除在盒子尺寸之外。
border-box:此值让元素维持IE传统的Box Model（IE6以下版本），IE盒模型是与W3C盒模型不同的是，IE浏览器渲染的总width包括了border || padding的宽度，也就是说，想要求得content-area的宽度，必须减去border 和 padding的宽度才行。早期的IE（5.5版本）用的是IE盒模型，而从IE6开始，只要在文档中添加!DOCTYPE，那么就兼容使用W3C盒模型。
如果IE678未添加doctype，即怪异模式，那么也是用IE模型。从IE9以后，则不用填写声名也用的是W3C模型。所有的盒模型，只要没有添加!DOCTYPE声明，都处于怪异模式。但此时，只有ie678使用IE盒模型，其他的虽然处于怪异模式，但仍旧使用标准模型。
结构组成width,height,padding,border，margin
分类：IE的传统盒子模型和W3C的标准模型
区别：两者对content的width和height计算方式不同，IE把元素内容的宽高，边框宽高，和内边距宽高计算在内。
3. 当有多个不同的css样式，整合进网站的最好方式是？
如果仅需要引入一个CSS文件，则使用连接方式，如果需要引入多个CSS文件，则首先用连接方式引入一个“目录”CSS文件，这个“目录”CSS文件中再使用导入式引入其他CSS文件。
如果希望用javascript来动态决定引入哪个css文件，则必须使用连接式才能实现。

链接方式
最能体现CSS特点的方法；最能体现DIV+CSS中的内容与显示分离的思想，也最易改版维护，代码看起来也是最美观的一种。会在装载页面主体部分之前装载css文件，这样显示出来的网页从一开始就是带有样式效果的
内嵌样式
一般应用在访问量比较大的页面减少对服务器的http请求而减少对服务器的负担
缺点是，如果需要修改，就只能对页面进行修改
行间样式
最常见的就是访问量大的门户网站。或者访问量较大的企业网站的首页。与第一种方法比起来，优点突出，弊端也明显。优点：速度快，所有的CSS控制都是针对本页面标签的，没有多余的ＣＳＳ命令；再者不用外链ＣＳＳ文件。直接在ＨＴＭＬ文档中读取样式。缺点就是改版麻烦些，单个页面显得臃肿，ＣＳＳ不能被其他ＨＴＭＬ引用造成代码量相对较多，维护也麻烦些。
导入式
会在整个页面装载完成后再装载CSS文件，对于有的浏览器来说，在一些情况下，如果网页文件的体积比较大，则会出现先显示无样式的页面，闪烁一下之后再出现设置样式后的效果，从浏览者的感受来说，这是导入式的一个缺陷。

问题1.到底link和@import有什么区别？
我们先来看看他们的定义
Quote link元素
HTML和XHTML都有一个结构，它使网页作者可以增加于HTML文档相关的额外信息。这些额外资源可以是样式化信息（CSS）、导航助手、属于另外形式的信息（RSS）、联系信息等等。Quote @import
指定导入的外部样式表及目标设备类型。其实link和@import的最根本区别就是，link是一个html的一个标签，而@import是css的一个标签,
link除了调用css外还可以有其他作用譬如声明页面链接属性，声明目录，rss等等，而@import就只能
调用css。如果单独从外部引用css来说，他们的作用是基本一样，只不过上面的老大不一样而已。：）
问题2.link和import到底那个更好？
只能说具体情况具体分析。
1）我要用javascript进行样式选择；
这个时候就要用link,因为link是html元素，可用javascript去控制dom元素最后达到改变样式的效果。
2）应用打印样式；
打印样式顾名思义就是打印页面时候的样式。
这个样式在普通浏览下是没有效果的，只有在打印的时候生效。
如果要为页面单独引用打印样式的话，link和@import都可以的。
3）引用多个样式；
如果要在一个页面上引用多个样式组合产生效果的话，link和@import也是都可以的。