样式表基础，盒子模型

学习目标

1. div和span学习
2. CSS整体感知
3. 基本选择器
4. 高级选择器
5. 文字相关属性
6. 盒子模型

补充知识点：

• vscode快速生成表格
• 表格标题
  cation
• 单元格合并
  列合并单元格：colspan
  行合并单元格：rowspan
• 带语义的表格结构
  thead:表头 tbody:表主体 tfoot:表尾

1,div和span学习

div 本身不产生任何样式，division（分割）,将页面上分割很多区域，这些区域就是容器。将相同语义的内容放在一个容器里。将层次和结构划分得非常清楚。div+css
div 划分网页结构
css 描述页面样式
span 本身也不会产生任何样式，作用和div类似，也是用来分割，分割的对象是文本

2,css整体感知

CSS全称叫 层叠样式表 Cascading Style Sheet

网页分为三层结构：

1. HTML 结构层从语义的角度描述页面的结构。
2. CSS 样式层从审美的角度来装饰页面。
3. JS 行为层从交互的角度增加动态效果。
   CSS最新的版本是CSS3，本次课学习的是CSS2

CSS核心的两件事：

1. 选择谁 通过选择器来选择
2. 设置成什么样 通过样式属性来设置.

3,基本选择器

1. 标记选择器
2. id选择器
3. 类选择

（1）, 标记选择器

写法：标记名{}
rgb :r表示red g表示green b表示blue
其中每一种颜色的取值范围是从00到FF,完整的取值范围就是000000到FFFFFF，注意在要前面加一个“#”。
另一种颜色表示方法，是使用 rgb(red, green, blue)，其中red,green,blue这三个颜色的取值范围是按照10进制来的0~255
是对当前页中的所有的该标记进行同样的样式设置。 　
局限性：给所有的该标记进行样式设置
####　（2），id选择器　　
仅控制具有这个id的元素的样式
写法：#id{}
局限性：只能对一个元素进行样式设置

（3），类选择器

写法：.类名{}
在标记中设置class属性

4,高级选择器

（1）分组选择器(并集选择器)

选择器1，选择器2，选择器3，…{}

（2）后代选择器

选择器1 选择器2 …{}

（3）交集选择器

标记.类名{}
这里的类的权重要大于直接的类选择器

（4）通配符

格式：*{}

基本选择器的权重：id选择器>类选择器>标记选择
标记中可以使用多个类，用空格隔开即可

<div class="box1 box2">div中的内容<div>

如果两个类或多个类中出现样式矛盾的情况，则按照样式表定义的顺序的最后那个为准

• 重叠 控制一个元素样式的样式表是多个，就是重叠了起来。
• 继承 如果一个元素的样式继承他的祖先元素的样式，这种现象就叫继承。
  以下属性有继承关系：
  color
  text-系列 ： 比如text-decoration:underline;
  font-系列： 比如font-size:30px;
  line-系列

5，文字相关属性

一般都是以font-开头
font-family: 字体名称1,字体名称2,…；字体（备用字体）
font-size:像素; 字体大小
font-weight:bold/normal/数字; 加粗
font-style:italic; 倾斜
text-decoration:underline/none; 下划线/取消下划线
font: 50px/100px 字体 …（其它跟文字相关的属性）

• 光写font: 字号/行高 无效

6，盒子模型

一个盒子应该有哪些属性：边框，外边距，内边距，content,width,height。
注意：

1. width和height属性设置的不是边框的宽和高，而是content的宽和高。
2. margin的合并：如果挨着的两个盒子都设置了margin，则他们之间的间距将取其中设置最大的盒子的margin。

• 边框总体：border:颜色 边框宽度 边框样式
  左边框：border-left:颜色 边框宽度 边框样式
  上边框：border-top:颜色 边框宽度 边框样式
  右边框：border-right:颜色 边框宽度 边框样式
  下边框：border-bottom:颜色 边框宽度 边框样式
• 外边距总体：margin: 宽度
  左边距：margin-left:宽度
  上边距：margin-top:宽度
  右边距：margin-right:宽度
  下边距：margin-bottom:宽度
• 内间距总体：padding: 宽度
  左间距：padding-left:宽度
  上间距：padding-top:宽度
  右间距：padding-right:宽度
  下间距：padding-bottom:宽度
• 盒子居中的方法：上下固定，左右auto，就可以让该元素在父级元素中居中。

margin属性的4种写法：

1. 一个数字：表示所有的外边距都使用这个数字，如:margin:20px;
2. 两个数字：前面的数字表示上下外边距，后面数字表示左右的外边距。如：margin: 10px auto;
3. 三个数字： 三个数字表示上，右（左），下方向。如：
   margin:10px 20px 30px;
4. 四个数字： 四个数字分别表示上，右，下，左方向。如：
   margin: 20px 30px 40px 50px;

• 如果设置了左右的外边距，但是左右的距离要大于左右外边距之和时，将优先设置为左边距。同样，如果上下的距离大于你设置的上下外边距之和，则先设置为上面的外边距。

某个方向的border具体设置举例：

左：
border-left-color: cyan;
border-left-width: 10px;
border-left-style: dashed;
右：
border-right-color: cyan;
border-right-width: 10px;
border-right-style: dashed;
上：
border-top-color: cyan;
border-top-width: 10px;
border-top-style: dashed;
下：
border-bottom-color: cyan;
border-bottom-width: 10px;
border-bottom-style: dashed;

• 注意，如果出现冲突的情况，按照最后优先原则来进行样式设置，如：
  .box{
  border-left-color: cyan;
  border-left-width: 10px;
  border-left-style: dashed;
  border: 2px red sol
  }
  左边框的样式将按照最后那条border的设置

padding属性值的四种写法

1. 一个数字：表示所有的内间距都使用这个数字，如:padding:20px;
2. 两个数字：前面的数字表示上下内间距，后面数字表示左右的内间距。如：padding: 10px 20px;
3. 三个数字： 三个数字表示上，右（左），下方向。如：
   padding:10px 20px 30px;
4. 四个数字： 四个数字分别表示上，右，下，左方向。如：
   padding: 20px 30px 40px 50px;

补充知识：怪异盒模型

设置容器的box-sizing属性值为 border-box，则width和height从border开始计算