第二讲：行元素,块元素,行内块元素、定位方式、表格标签、伪类与伪元素

一、行元素、块元素、行内块元素

html默认是流式布局:元素可以分为行,块,行内块

1. 行元素的特点: 不能设置宽高,宽高只能取决于元素本身的内容；
   一行到最后显示不下时才会自动换行,不会主动换行,span,a,b…
2. div块元素:元素特点是独占一行,可以设置宽高,如果不设置宽高,显示的是默认宽高,如果默认宽高也没有则显示内容宽高；
   布局方式为块元素的有p,h1~~h6,div…
3. 行内块元素特点:既有行元素的特性也有块元素的特性，可以为元素设置宽高,但是不独占一行
   多个行内块元素会左右排列并且自动换行,常用的行内块元素有button,img,input…
4. 块元素可以通过设置自身的margin值0 auto来实现相对于父元素的水平居中,行元素通过设置父元素的text-align,实现内容的水平居中，任何的元素都不是绝对不变的,都可以通过display来改变布局的样式；
5. display是更改元素特性 block块 、inline行、 inline-block行内块；

二、定位方式（position）

1. position样式表示元素的定位方式,默认值为static，采用流式布局进行定位,不能通过top等样式来设置位置 ；
2. relative是相对定位,相对定位的元素还是在流式文档的位置上 ,且可以通过left 、top 、right、 bottom来设置位置,只是进行了微调；不会脱离文档流的；
3. absolute绝对定位,元素会脱离文档流,不在参与父元素的流失布局，不能撑开父元素。 absolute在定位之后,如果不去使用left等样式进行位置设置,那么会在它原有的位置上；
   **切记:**开发中一定杜绝这种行为
   absolute定位的元素，相对于离自己最近的position而非static,所以如果要进行绝对定位的元素相对与想要的父元素进行位置设置的话,只需要把父元素的position改成relative即可, (千万不要设置成absolute,父元素也会脱离文档流,对父元素对界面布局都会产程影响);

三、列表和表格

列表

1. 列表分为有序列表（ol）和无序列表（ul），子元素li，都是块元素；
   <ol><li></li></ol>、<ul><li></li></ul>
2. 设置列表项的前缀：list-style:none;
3. 自定义列表 define list
   <dl><dt></dt><dd></dd></dl>

表格

1. 表格基本结构
   表格标签,用于显示一个表格 块元素,配合着border外边框使用效果更好;
   <table>
   表头 用于显示表的头部内容
   <thead>
   tr代表表的一行
   <tr>
   th代表表中的一个单元格
   <th></th>
</tr>
</thead>
   表的主体
   <tbody>
   表的主体的单元格的行
   <tr>
   td代表主体的单元格
   <td></td>
<tr>
</tbody>
</table>
2. 表格的样式
   设置边框
   border: 1px solid black;
   设置边框的重叠,是重叠的边框在一起
   border-collapse: collapse;
   row行(高) column列
   <td rowspan="2"></td>
<td colspan="2"></td>

四、伪类和伪元素

伪类：通过一定条件才会触发的样式；

伪元素：添加一些选择器的特殊效果。

1. hover当鼠标指针放到元素上悬停的时候触发；
2. focus当元素成为焦点时候触发；
3. active当元素被鼠标按下时触发；
4. visited，a标签专属的伪类 表示访问过得 获取浏览器之前有没有访问过该网站；
5. link未访问的过的
6. first-letter访问到元素文本内容中的第一个字；
7. before文本前缀 前缀伪元素(前缀的内容鼠标没有办法选择)；
8. after后缀的伪元素，后缀内容；