菜鸟自学整理笔记的第一天 CSS盒子模型+CSS选择器

一、盒子模型（2种）
首先介绍模型范围：都是包括margin、border、padding、height、width
首先假设盒子的margin=10px，padding=10px，border=1px、width=100px、height=100px
W3C盒子：它的大小就是height、width，不包括margin、border、padding。
即W3C盒子计算的大小为：100px*100px
IE盒子：它的大小就是height、width、border、padding、不包括margin！！！。设置padding、border会挤占内容区，不会扩大盒子
即IE盒子计算的大小为：122px*122px
用box-sizing设置盒子模型
box-sizing：content-box 默认模型W3C盒子
box-sizing：border-box IE标准盒子
二、CSS选择器
1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）选中元素的下一个兄弟元素，不相邻元素无效
5.子选择器（ul > li）与父类元素直接相邻的第一个子元素
6.后代选择器（li a）父类低下的所有后代元素
7.通配符选择器（ * ）
8.属性选择器（a[rel = "external"]）
9.伪类选择器（a:hover, li:nth-child）
权重比较
id选择器（ # id）>类选择器（.myclassname）>标签选择器（div, h1, p）
权重值
!important 正无穷 !important用于提升指定样式规则的应用优先权。
内联样式 10000
id选择器 1000
类选择器 、属性选择器、 伪类选择器 100
标签选择器 1