## 图示 
![盒子模型](https://dev.dwxzbz.com/blogphoto/HTMLCSS/CSS/%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B.png) 

## 图示参数说明 
- Margin(外边距)-清除边框外的区域，外边距是透明的 
- Border(边框) - 围绕在内边距和内容外的边框 
- Padding(内边距)-清除内容周围的区域，内边距是透明的 
- Content(内容) - 盒子的内容，显示文本和图像




## 元素空间宽高度计算 
- 最终元素的总宽度计算公式是这样的： 
总元素的宽度=内容宽度+左填充+右填充+左边框+右边框+左边距+右边距 

- 元素的总高度最终计算公式是这样的： 
总元素的高度=内容高度+顶部填充+底部填充+上边框+下边框+上边距+下边距 


## 实际元素尺寸宽高度 
- 宽度
宽度=宽度+左右内边距+左右边框
- 高度
高度=高度+上下内边距+上下边框 

 
# 外边距 margin 
## 理解 
盒子与盒子之间的距离 

## 参数 
```css
div {
 /*上外边距*/
 margin-top: 20px;
 /*下外边距*/
 margin-bottom: 20px;
 /*左外边距*/
 margin-left: 20px;
 /*右外边距*/
 margin-right: 20px;
}
```
## 简写 
- 采用两个数值时，第一个数值表示上下外边距、第二个数值表示左右外边距 
```css
div {
 margin: 20px 10px;
}
```
- 采用四个数值表示时，依次以逆时针顺序表示上外边距、右外边距、下外边距、左外边距 
```css
div {
 margin: 20px 20px 10px 10px;
}
```

# 外边距问题 
## 外边距合并
### 场景 
同级垂直方向上的元素，设置相邻margin时会取最大值 

### 示例 
box1和box2分别设置下外边距10px、上外边距10px；按常规理解box1和box2中间应该隔开20px，但是实际上只有10px。 
代码 
![[盒子模型-间距合并.jpg]]

## Result
![[盒子模型-间距合并-result.jpg]]

当box1的下外边距取值较大时，二者之间的距离按照较大者合并 
代码 
![[盒子模型-间距合并2.jpg]]

Result 
![[盒子模型-间距合并-result2.jpg]]


由此验证了 
同级垂直方向上的元素，设置相邻margin时会取最大值 


## 外边距塌陷 
### 场景 
父子级关系中，对子级添加margin-top依次实现隔开距离效果时，会发生magrin塌陷问题。造成margin值施加到父级上，造成元素整体下移 

### 注意 
若元素（父级或子级）添加浮动则不会发生外边距塌陷 

### 示例 
box2设置上外边距，按理应该和父级box1隔开，但是没有隔开而是施加到父级，导致元素整体向下偏移 

代码 
![[margin塌陷.jpg]] 

Result
![[margin塌陷Result.jpg]]

# border边框 
border会影响盒子的可见框大小 
不指定宽度会有一个默认宽度，一般为3px 

## 分别指定四边的宽度 
可以通过该属性分别指定四个边框的大小
```css
.div {
/*以顺时针顺序指定，上右下左*/
 border-width: 10px 20px 10px 20px;
/*三个值，上 左右 下*/
 border-width: 10px 20px 10px;
/*两个字，上下 左右*/
 border-width: 10px 20px;
}

```

## 分别指定四边的颜色 
border-color: 边框颜色 
不指定颜色会默认使用字体颜色 
可以通过该属性分别指定四个边框的颜色 border-color在简写中特殊值可为：transparent 	边框颜色为透明

```css
.div {
/*以顺时针顺序指定，上右下左*/
 border-color: blue gray blue gray;
/*三个值，上 左右 下*/
 border-color: red blue red;
/*两个字，上下 左右*/
 border-color: blue gray;
}


```
## 边框样式 
border-style: 边框样式
- solid：实线 
- none：无
- dotted：点状虚线 
- dashed: 长方形虚线 
- double：双线 

### 语法 
```css
.div {
/*以顺时针顺序指定，上右下左*/
 border-style:solid none dotted solid;
/*三个值，上 左右 下*/
 border-style: solid none solid;
/*两个字，上下 左右*/
 border-style: solid none;
}
```

### 单独指定某一边边框 

- border-top 
- border-left 
- border-right 
- border-bottom 

### border简写 
```
div{border: border-weigth border-style border-color 
```


# 内边距-padding 

边框到内容区域之间的距离 

设置padding后会改变盒子可见大小 

## 语法 

```css
.div {
/*以顺时针顺序指定，上右下左*/
 padding: 10px 20px 10px 20px;
/*三个值，上 左右 下*/
 padding: 10px 20px 10px;
/*两个字，上下 左右*/
 padding: 10px 20px;
/*一个值，四边*/
 padding: 10px;
}
```

## 注意 

padding会导致元素宽高发生变化，需要减去对应的宽高 



# 水平方向布局规则 

## 父子级水平方向布局 

子元素在父元素的水平布局，必须满足：
```
margin-left+bodder-left+padding-left+width++padding-right+border-right+margin-right=父元素的width
```

若七个值相加之和不等于父元素的宽度，则属于过度约束，则浏览器会自动调整相应的外边距的值 

尽量避免margin-right为负值 


# 垂直方向布局规则 
## 等式 
```
margin-top+border-top+padding-top+width+padding-top+border-top+margin-bottom=父元素高度 
```

可以不等于，用来参考 


# 盒子尺寸计算大写 
可以使用box-sizing属性来改变盒子大小的计算方式，默认为content-box即width应用到内容区 

## 对应属性 
border-box：则width和height值包括内边距和边框

CSS-盒子模型

## 链接属性 
链接标签自带字体颜色属性、下划线 



### 设置下划线为无 
```css
a {
 text-decoration: none;
}
```

### 也可用来为其他文本添加下划线 
```html
文本
```
#### 参数 
text-dercoration: 文本装饰 
underlinne：下划线 
line-through：中划线 
overline：上划线 
none: 无 



### 新建跳转页 
```html
<a href="" target="_blank"></a> 
```
#### 参数 
_self: 本窗口刷新 
_blank：新窗口中打开 


## 列表标记 
```css
list-style-type: disc
/*
disc-圆点、circle圆圈、square-方块、none-无标记
*/
```

### 使用定制的列表标记 
1. 使用list-style-type:none取消常规标记 

2. 设置margin-left、padding-left属性为0删除列表项的缩进效果 

3. 在目标列表的li元素的样式规则中输入
```css
background:url() repeat-type horizontal vertical
/*
url指定自定义图标位置
repeat-type：重复效果，值为no-repeat、repeat-x、repeat-y中的一种（通常设为no-repeat）
horizontal vertical表示列表项目中背景图像的位置 
*/
```

### 设置有序列表编号 
```css
/*在li列表项开始标签中输入start="n"*/
<ol start="2">is 2 bulb</ol>
/*修改指定li列表项的编号，在其li列表项开始标签输入value="n"*/
<li value="5"> me</li>
```

### 控制列表标记位置 
在目标列表或列表项目的样式表规则中，输入list-style-position. 该属性可用于ul、ol、li 

#### 属性值 
inside-是标记缩在文本块内、outside-外部，默认选项 

### 设置嵌套列表的样式 
#### 设置嵌套列表的样式的方法 
1. 对单个列表项目使用class类名 
2. 使用后代选择器或子元素选择器套用样式
```css
/*后代选择器*/
ul li {
 list-style-position: inside;
}
/*子元素选择器*/
ul>li {
 list-style-position: inside;
}
```

CSS-链接与列表

## 说明 
web开发者编写的样式规则与浏览器的默认规则冲突时，均以开发者编写的样式为准 




## CSS层叠原则 
1. 特殊性 
- 特殊性规则指定选择亲的具体程度；选择器越特殊，规则就越强；遇到冲突时，优先应用特殊性强的原则 

2. 顺序 
- CSS样式表中晚出现的优先级更高 
- 直接应用在HMTL元素上的规则(不推荐使用该做法)被认为比外联样式表中或插在HTML文档顶部的特殊性相同的规则出现的更晚，因此优先级更高 

3. 重要性 
- 当以上规则无法满足需要时，可以在某一条规则末尾加上"!important" 
- Eg
```css
p {
 color: red !important;
}
```
注意其添加前有空格，且后加分号 

4. 补充 
建议在样式表中多使用类选择器，避免使用ID选择器 



# 理解继承 
## 继承 
当对某个元素应用CSS属性时，这些属性不仅会影响该元素，还会影响其下的分支元素。即这些下层的元素继承了其祖先元素的属性 
## 作用 
继承可以简化CSS样式表 

## 可被继承的属性 

### 文本

| 属性 | 说明 |
| :------------: | :------------------: |
| color | 颜色，a元素除外 |
| directon | 方向 |
| font | 字体 |
| font-fanily | 字体系列 |
| font-size | 字体大小 |
| font-style | 用于设置斜体 |
| font-variant | 用于设置小型大写字母 |
| font-weight | 用于设置粗体 |
| letter-spacing | 字母间距 |
| line-height | 行高 |
| text-align | 用于设置对齐方式 |
| text-indent | 用于设置首行缩进 |
| text-transform | 用于修改大小写 |
| visibility | 可见性 |
| white-space | 用于指定如何处理空格 |
| word-spacing | 字间距 |

### 列表 
| 属性 | 说明 |
| :-----------------: | :----------------------: |
| list-style | 列表样式 |
| list-style-image | 用于为列表指定定制的标记 |
| list-style-position | 用于确定列表标记的位置 |
| list-style-type | 用于设置列表的标记 |

### 表格 
| 属性 | 说明 |
| :-------------: | :--------------------------------------------: |
| border-collapse | 用于控制表格相邻单元格的边框是否合并为单一边框 |
| border-spacing | 用于指定表格边框之间的空隙大小 |
| caption-side | 用于设置表格标题的位置 |
| empty-cells | 用于设置是否显示表格中的空单元格 |

### 页面设置(对于印刷物) 
| 属性 | 说明 |
| :---------------: | :------------------------------------------------------: |
| orphans | 用于设置当元素内部发生分页时在页面底部需要保留的最少行数 |
| page-break-inside | 用于设置元素内部的分页方式 |
| widows | 用于设置当元素内部发生分页时在页面顶部需要保留的最少行数 |

### 注意 
1. 继承不具有任何特殊性，而通配符的特殊性为0，需要注意是否被覆盖 
2. a标签自身设置了颜色，h标签自身设置了字号。因此，继承的颜色、字号将被覆盖

CSS-层叠与继承

## CSS书写的三种方法
### 外部样式表(External style sheet) 
#### 说明 
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。且方便后期维护 



#### 语法 
```html

<head>
 <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
```

### 内部样式表(Internal style sheet) 
#### 说明 
当单个文档需要特殊的样式时，就应该使用内部样式表 

#### 语法 
```html

<head>
 <style>
 hr {color:sienna;}
 p {margin-left:20px;}
 body {background-image:url("images/back40.gif");}
 </style>
</head>
```

### 内联样式(Inline style) 
#### 说明 
由于将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。【慎用此方法】 
#### 语法 
```html

这是一个段落。
```

## CSS样式规则 
### 说明 
CSS【cascanding(层叠) style(样式) sheet(表)】即层叠样式表
样式表中包含了定义网页外观的规则 

### 样式表中的规则包含 
- 选择器 
- 声明块 

#### 语法 
```html
选择器 {
 属性:属性值
 属性:属性值
}
```




## 为CSS样式规则添加注释 
### 语法 
```html
/* 
注释内容 
*/

选择器 {
 属性:属性值
 属性:属性值
}
```

## CSS变量 
### 语法 
```css
--change-name: value;
/*change-name:变量名 
value：属性值*/
```

### 引用 
```css
background: var(--change-name)
```

### 添加回退值 

```css
var(--pengiun-skin,black)
```

## 颜色相关基本概念 
### 三原色 
三原色即红-red、绿-Green、蓝-Blue在web等电子器件上多数使用的是三原色使用加色法不断混合形成的颜色效果，三原色中每个颜色取值为0（十六进制00)-255（十六进制FF)、总计255*255*255约等于1600多万种颜色 

### 互补色 
### 常见背景颜色表示方法 
1. rgb 

 RGB（红，绿，蓝）；每个参数（红色，绿色和蓝色）定义颜色的亮度，可在0和255之间，或一个百分比值（从0％到100％）之间的整数 

 ```css
 rgb(0,0,255)
 ```

 

2. rgba 

 是RGB颜色值alpha通道的延伸 - 指定对象的透明度 

 ```css
 rgba(0,0,0,255,0.5)
 ```

3. HSL 

 HSL（色调，饱和度，明度）；色相是在色轮上的程度（从0到360）-0（或360）是红色的，120是绿色的，240是蓝色的。饱和度是一个百分比值;0％意味着灰色和100％的阴影，是全彩。亮度也是一个百分点;0％是黑色的，100％是白色的 


4. 十六进制表示 
 由#井号开头，A-F、0-9组成 

## 代码风格 
### 紧凑型风格 
```css
.picture { width:200px;height:400px;}
```
### 展开型风格 
```css
.picture { 
 width: 200px;
 height: 400px;
}
```

# 空格规范 
1. 选择器和花括号之间保留一个空格 
2. 属性冒号和属性值之间保留一个空格

CSS-代码书写风格

## 组织代码 
### 可维护性 
1. 网站元素位置移动尽量使用margin和padding属性，酌情使用position定位 



### 关注点分离 
1. CSS与HTML分离 
2. 关注点分离：将页面划分为多个小块，考虑可否重用

### 渐进增强 
 平衡向后兼容性与最新的HTML和CSS特性；使用渐进增强意味着代码分层，每一层增强代码只会在响应特性被支持或被认为适当的情况下使用 

Eg: 
```css
/*有的浏览器支持rgba,有的不支持*/
.text {
 background-color: #08AF8F;
/*当浏览器支持rgba时，则rgba会覆盖前面的备用颜色*/
 baackground-color: rgba(0,0,0,0.8);
}
```
即： 声明合适的后备代码 

#### 厂商前缀 
前缀 | 作用
---|---
-webkit- | Safari、Chrome、Opera
-moz- |基于Mozilla浏览器，Firefox
-ms- | 适用于微软IE 

#### 条件规则与检测脚本 
 根据浏览器是否支持某个CSS特性来提供完全不同的样式，则需要使用条件规则 

```html
@supports (声明) {
 /*满足声明时应用的规则*/
}
```
 


## 创建结构化、语义化富HTML 
### id和class属性 
 使用正确符合规范命名方式 

### 结构化元素 
HTML5新增结构化元素 

元素 | 作用
---|---
section | 文档或应用的一个一般的区块，如网站的主页可以分成介绍、新闻条目、联系信息等区块
header | 一个网页可以有任意数量的页眉，通常页眉包括网站标志、主导航、和其他全站链接、甚至搜索框 
nav | 仅对文档中重要的链接群使用nav
main | 一个页面中只有一部分代表其主要内容,可以将这样的内容包含在main元素中 
article | 表示文档、页面、应用或网站中一个独立的容器，原则上是可独立分配或可再用的，就像聚合内容中的各部分
aside |附注栏
footer | 页脚 

建议 
建议使用结构化元素且在结构化元素开始标签添加class类名方便后续工作