2020-01-15（内联元素，内联块元素，块元素）

块元素

1.特点：

• 独自占有一行
• 支持所有样式的设置不设置宽度
• 默认撑满父级

例如：

<h1></h1>  <h2></h2>  <h3></h3>  <h4></h4>  <h5></h5>  <h6></h6>
<header></header>  <footer></footer>  <nav></nav>  <section></section> 
<article>  </article>  <aside></aside>  <div></div>
<ul></ul>  <ol></ol>  <li></li>
<dl></dl>  <dt></dt>  <dd></dd>
<p></p>   <figure></figure>   <figcaption></figcaption>

内联元素

1.特点：

• 一行可以显示多个
• 不支持宽高的设置，宽高由内容撑开
• 代码换行会解析空格
• 上下margin、上下padding、上下border会受到影响
  例如：

<span></span>  <strong></strong>  
<b></b>  <em></em>  <i></i> 	
<mark></mark>  <cite></cite>  <sub></sub>  <sup></sup> 	
<del></del>  <a href="#"></a>

内联块元素

1.特点：

• 一行可以显示多个
• 支持宽高的设置
• 代码换行会解析空格
• 需要设置对齐方式为顶部 vertical-align:top

例如：<img src="" alt="">

标签嵌套规则：

1.ul下只能用li
2.ol下只能用li
3.dl下只能用dt、dd
4.figcaption只能写在figure内
5.a标签里面不能套a标签
6.p、h1~h6、dt 标签中 不用块标签
7.内嵌标签中 不用块标签

标签转换：

display

• block 块
• list-item （列表项，在块的基础上多了列表样式）
• inline 内联
• inline-block 内联块
• none 无（该元素会隐藏起来，经常可以用来做下拉菜单）

本身是内联，通过display转为块的标签，是可以放在内联标签里面的

标签默认样式清除：

body

body{
margin: 0;
font: 14px "微软雅黑";
}

Δ margin 是默认样式

Δ font 以设计图出现次数最多的 字体大小 和 字体进行设置（字体样式可 以继承）

p、h1~h6、dl、dd、figure

h1,h2,h3,h4,h5,h6,p,dl,dd,figure{
margin: 0;
}

Δ h1、h2、h3、h4、h5、h6、p、dl 都是上下margin
Δ dd 左margin

h1~h6、strong、b
h1,h2,h3,h4,h5,h6,strong,b{
font-weight: normal;
}

Δ 字体在默认情况下都有加粗

em、i、cite
em,i,cite{
font-style: normal;
}

Δ 字体在默认情况下倾斜

ul、ol
ul,ol{
margin: 0;
padding: 0;
list-style: none;
}

Δ ul、ol有margin值，同时去除list默认列表样式

mark
mark{
background: none;
}

Δ 去除高亮背景色

a

a{
text-decoration: none;
color: black;
}

Δ 链接默认有下划线
Δ 文字默认颜色鲜艳，可把颜色默认设置页面出现最多的颜色

img

img{
vertical-align: top;
border: none;
}

Δ 内联块标签默认对齐：基线，将其修改为顶部
Δ img放在a标签内的时候，部分浏览器会加上边框，如：IE

所有转为inline-block的元素，记得最好也加上vertical-align:top

reset文件
在实际工作中，经常会有一个文件来专门处理默认样式，一般叫做reset
可以通过外部引入的方式，这样不需要重复写。

垂直居中
第一种方式：

vertical-align: top;
vertical-align: middle;
vertical-align: bottom;
vertical-align: baseline;

(默认情况下是这个，基于基线对齐)


通过设置 vertical-align: middle;可以达到基于中线进行对齐的效果

最简单的记忆方式：
居中对齐的时候，根据页面中，最高的元素的中心点作为中线，进行对齐
第二种方式：
display: table-cell; 转换为单元格
在单元格中，给父级设置vertical-align，内容会根据设置进行垂直排列

cursor鼠标指针设置

default

• point (手指)
• move（移动）
• text（文字光标）
• auto（自动）
  更多指针设置： https://developer.mozilla.org/zh-CN/docs/Web/CSS/cursor
  自定义鼠标指针：
  https://convertio.co/zh/cur-converter/