### 块级标签与行内标签的相互转化
#### display
#### inline 行内
#### inline-block 行内块
#### block 块级，显示
#### none 隐藏、消失
-
#### vertical-align 改变行内元素的对齐方式
- top所有同级或平级元素之间，去找高度最高的**顶部**进行对齐
- middle所有同级或平级元素之间，去找高度最高的**中部**进行对齐
- bottom所有同级或平级元素之间，去找高度最高的**底部**进行对齐
- 百分比%/像素px也是可以的
## CSS命名规范
- 不能以数字开头，也不能是数字
- 遵循行业规范，例如:header代表头部，nav代表导航，footer代表尾部
- 可以用驼峰命名法(第一个单词首字母是小写，第二个单词首字母是大写的)
- 例如:列表信息：listInfo、list-info、list_info
## 色值
- 英文单词 red、yellow、green...
- **16进制** 例如:#ffffff、#000000、#q1q1q1 ，缩写#fff
- rgb r 红色 g绿色 b蓝色
- rgb(255,24,30);
- rgba r 红色 g 绿色 b 蓝色 a 透明度（取值0-1）
- rgba(255,24,30,0)
## CSS盒子模型
html元素看成一个大的仓库，盒子与盒子之间的距离margin（外边距），盒子与商品之间有白色的填充物是padding（内边距），商品本身有宽度和高度（width/height），盒子本身有厚度border（边框）
###CSS盒子模型有5个属性组成的**
- 宽度 width
- 高度 height
- 外边距 margin
- 内边距 padding
- 边框 border
### 外边距margin
- 第一种写法
```
margin: 50px;
/* 一个值四边 */
margin: 10px 20px;
/* 两个值 上下、左右 */
margin: 10px 20px 30px;
/* 三个值 上、左右、下 */
margin: 10px 20px 30px 40px;
/* 四个值 上、右、下、左 */
```
- 第二种写法
```
margin-top: 10px;
/* 上 */
margin-right:10px ;
/* 右 */
margin-left:10px ;
左
margin-bottom:10px ;
/* 下 */
```
#### margin外边距的兼容问题**
- 两个元素同级时，给第一个元素设置margin-bottom，第二个元素设置margin-top时，两个元素之间是取margin的最大值，而不是两个元素的margin值相加
- 两个元素是包含关系时，给子元素设置margin-top值会出现值传递问题（值传递给了父元素）
- 解决办法
- 1、给父元素加一个CSS属性:overflow:hidden，溢出隐藏
- 2、讲子元素的margin-top值去掉，改成给父元素设置padding-top值 **常用**
#### margin外边距可以设置负值
### padding 内边距
- **第一种写法**
- 语法同margin相同
```
padding: 50px;
/* 一个值四边 */
padding: 10px 20px;
/* 两个值 上下、左右 */
padding: 10px 20px 30px;
/* 三个值 上、左右、下 */
padding: 10px 20px 30px 40px;
/* 四个值 上、右、下、左 */
```
- **第二种写法**
```
padding-top: 10px;
/* 上 */
padding-right:10px ;
/* 右 */
padding-left:10px ;
/* 左 */
padding-bottom:10px ;
/* 下 */
```
### 在什么情况下使用margin外边距/padding内边距？
- **什么情况下使用margin**
> 盒子与盒子之间的距离、块级标签与块级标签之间的距离，一般都设置外边距margin值
- **什么情况下使用padding内边距**
> 盒子内的边距（间距）、行内标签与行内标签之间的距离，一般都设置内边距padding
### border边框
- 语法同padding、margin
- border：1px solid red:
- border-widt:1px;边框的宽度
- border-style:solid;边框的样式
- border-color：边框的颜色
### 盒子模型的计算公式
allwidth=本身内容的宽度+左右padding+左右border
allheight=本身内容的高度+上下padding+上下border
## float 浮动的特点
会将元素改变为行内块，但不会像inline-block有基线对齐问题，没有间隙，margin-top将1不在出现值传递问题
在项目中，float浮动属性常用在块级元素中(div/li)，设置块级元素转成行内块（在一行显示，又可以设置宽高）
display：inline-block；一般用在背景图和文字相结合时（结构一般是:一行内某一个小模块中）
所有的标签都可以设置浮动属性，例如div、li、a、img等等，无论是块级元素还是行内元素
不设置宽高时，宽高是由内容决定的
行内元素与行内块级元素和文字会围绕浮动属性环绕（图文混编）
脱离文档流(父元素找不到子元素，父元素的高度不会被内容撑开)，相当于来到第二层级，不在同一个位面
### 清除浮动带来的影响（清除浮动）面试题
> 影响：当给子元素设置完浮动后，父元素高度会为0（子元素脱离文档流）
四种解决办法：
1、给父元素设置固定高度（不好用也不常用）
2、给父元素设置overflow:hidden;属性（不常用）
3、给所有设置浮动元素的后面加一句话clear:both清除浮动
4、利用伪元素来墙出浮动带来的影响（**常用**）
- 伪元素：用CSS代码给指定元素内添加假的(HTML中不存在的)内容
- 在html页面中，引入reset.css样式表（有清除浮动的CSS样式）
- 当给子元素设置浮动属性后，给父元素加一个class="clear"的类名
#### overflow 文本溢出的处理方式
- overflow:hidden;溢出隐藏，超出元素范围，就会把多余内容隐藏
- overflow:auto;浏览器会判断内容是否超出这个元素的范围，如果超出则出现滚动条
- overflow:scroll:不管内容是否超出元素范围，都会添加滚动条
## 定位
### 相对定位
- **特点**
- 相对定位的层级要比其他元素层级大（会盖在其他元素上面）
- 当发生位置改变时，原来的位置还被占用着
- 参照物是本身(自己)
- 给绝对定位当参照物来用
- 不脱离文档流
**什么情况下使用相对定位**
1、当自己想要改变位置时，又不影响其他元素，可以使用相对定位
2、给绝对定位当参照物来用
### 绝对定位
- **特点**
- 脱离文档流
- 当不知道谁是参照物时，参照物时body
- 人为设置参照物时，必须满足两个条件
- 1、这个认为参照物必须是绝对定位元素的父级元素（祖辈）
- 2、这个父级元素必须带有定位属性（相对、绝对、固定）
- 当绝对定位元素宽高属性设置为100%时。继承得是参照物得宽高
- 当这个定位元素不设置宽高的时候，宽高由内容决定得
- 当绝对定位这个元素不设置四个方向值时，这个绝对定位元素前面有其他同级和平级得元素时，会默认排在这个平级元素后面
- 定位得权重>浮动得权重>display:inline-block;
### 固定定位
- **特点**
- 参照物是浏览器得可视窗口
- 不设置宽高时，宽高由内容决定得
> 固定定位，一般用在网站得侧导航（辅到港），回到顶部得结构上
### 页面兼容问题处理
**以下写法不标准，在IE7下会出问题**
```
<h3>
我的购物车
<span class="fr">0门</span>
</h3>
```
**标准写法，在IE7下不会出问题**
```
<h3>
<span class="fl">我的购物车</span>
<span class="fr">0门</span>
</h3>
```
**CSS HACK 解决低版本浏览器的兼容处理**
> [CSS hack](https://baike.baidu.com/item/css%20hack/7026361?fr=aladdin)
- * IE7
- \0 IE8
- ...
- CSS3属性以及动画支持高版本浏览器(IE9以上)
- rgba 支持高版本浏览器(IE9以上)
