一、CSS基础语法与盒模型

css选择器

1.css2.1

1. 标签选择器：直接使用元素的标签名当作选择器
2. id选择器
3. class选择器
4. 复合选择器
   • 后代选择器：.box .spec(选择类名为box的标签内部名为spec的标签)
   • 交集选择器：li.spec（选择即使li标签，也属于spec类的标签）
   • 并集选择器：ul,ol（选择所有ul和ol标签）

2.CSS3

1. 关系选择器
   1. 子选择器：div>p(dic的子标签p)
   2. 相邻兄的选择器：img+p（图片后面紧跟着的段落将被选中）
   3. 通用兄的选择器：p~span（p元素之后的所有同层级span元素
2. 序号选择器

• :first-child第一个子元素
• :last-child最后一个子元素
• nth-child(3)第三个子元素
• nth-of-type(3)第三个某类型的子元素
• nth-last-child(3)倒数第三个子元素
• nth-last-of-type(3)倒数第三个某类型子元素

3. 属性选择器

• img[alt]选择有alt属性的img标签
• img[alt="故宫"]选择有alt属性是故宫的img标签
• img[alt^="北京"]选择alt属性以北京开头的img标签
• img[alt$="故宫"]选择alt属性以故宫结尾的img标签
• img[alt*="故宫"]选择alt属性中含有故宫的img标签
• img[alt~="故宫"]选择alt属性有空格隔开的故宫字样的img标签
• img[alt|="故宫"]选择alt属性以“故宫-”开头的img标签

4. 伪类

• :empty选择空标签
• :focus选择获得焦点的表单元素
• :enabled选择当前有效的表单元素
• :disable选择当前无效的表单元素
• :checked选择当前已经勾选的单选按钮或复选框
• :root选择根元素，即html标签

5. 伪元素

• ::before其中content属性成为选中元素的开头
• :after其中content属性成为选中元素的结尾
• ::selection应用于文档中被用户高亮的地方
• ::first-letter选中某元素中第一行的第一个字母
• first-line选中某元素中第一行全部文字

3.类名的使用

4.层叠行和选择器权重计算

5.层叠性

• 多个选择器可以同时作用域同一个标签，效果叠加
• 如果多个选择器定义的属性有冲突：id属性>class属性>标签属性
• 复杂选择器可以通过（id属性，class属性，标签的个数）计算权重
• !important可以用来提升权重

CSS盒模型

1.什么是width和height？他们是元素的实际大小吗？

• width和height是指文字所占的控件
• 元素的实际大小的宽/高为：width/height + padding + border
• 元素空间尺寸的实际大小的宽高为：width/height + padding + border + margin

2.box-sizing属性的作用是什么

• 当设置为box-sizing:border-box时，所设的边距不再是外扩而是内缩

当div {width=400px;height=400px;border=6px;padding=10px;}，此时的宽高不再是元素所占的大小，而是所有元素一起所占的空间。

3.margin的塌陷

• margin的塌陷只存在上下塌陷，不存在左右塌陷
• 当上下元素都有margin时，以margin值大的为基准

4.用四个数值、三个数值、两个数值描述padding和margin

• 四个数值 padding:10px 20px 30px 40px;(上 右 下 左)
• 三个数值 padding:10px 20px 30px ;(上 左右 下)
• 两个数值 padding:10px 20px;(上下 左右)
• 

当设置这种样式时可以采用小属性层叠大属性方式padding:40px; padding-bottom:0px更加直观

5.实现盒子居中

• 将盒子左右两边的margin值都设置为auto实现水平居中margin: 0 auto ;
• 文本居中是text-align:center,和盒子居中是两个概念
• 盒子的垂直居中需要使用绝对定位技术来实现

6.行内元素和块级元素的相互转换

• 行内元素：a、span、em、b、u、i等可以并排显示的元素，他们不能设置宽高，当不设置width属性是，width自动收缩
• 块级元素：div、section、header、h系类、li、ul等不能并排显示的元素，他们可以设置宽高，当不设置width属性是，width自动撑满
• 行内块：img、表单元素既可以设置看睹高度，也能够并排显示
• 相互转换：
  • display:inline转换为行内元素（不常用）
  • display:block转换为块级元素
  • display:inline-lblock转换为行内块元素

7.元素的隐藏

• display:none将元素彻底隐藏，位置可以被占用加粗样式
• visibility:hidden元素看不见，留出他的位置