H5-表格的基本样式

1.选择器

类选择器：通过给标签元素起一个classname类名 的方式，在编写样式的时候，用类名来获取该元素

.div1{

width:200px;

height:200px;

background-color:blue;

}

id选择器： 给元素起一个id名，用来获取该元素，设置样式的时候使用一个元素即可以同时有id名和类名

#div2{

width:300px;

height:300px;

background-color:orange;

}

标签选择器： 可以获取当前html文件中所有的标签， 用来修改样式

div{

width:400px;

height:400px;

background-color:coral;

}

2.边框（border)

div有默认的边框

边框样式:

dashed 虚线

solid 实线

dotted 圆点虚线

综合写法:

border:3px orange dotted;

3.父子div

当父子div的时候,设置margin-top时,会把父级div扯下来，设置时，回去寻找父标签的border,解决方案，设置父级标签的border

边框透明属性transparent

4.内边距(padding)

内边距是真实存在的距离，会改变盒子的大小， 不影响布局的效果

宽度=内容的宽度+内边距的宽度+border的宽度

高度=内容的高度+内边距的高度+变宽的高度

5.外边距(margin)

body默认有一个外边距，默认是8px,外边距会影响页面布局

设置左右居中 参数1代表上下外边距，参数2代表左右外边距(margin:200px auto;)

设置外边距的方法，按顺时针上 下 左 右的顺序编写(margin:10px 10px 10px 10px;)

6.文字换行

左右居中（margin:100px auto)

自动换行(word-wrap:break-word)

到达长度后系统强制换行(word-break:break-all)

当长串超出div宽度的英文不会自动换行，系统认为空格是换行的标志

7.表格的初识(table)

表格的样式由如下基本格式组成

<table>

<!--默认居中-->

<caption>标题</caption>

<!--表头-->

<thead>

<tr>

<th>表头1</th>

<th>表头2</th>

<th>表头3</th>

</tr>

</thead>

<!--表内容-->

<tbody>

<tr>

<td>111</td>

<td>222</td>

<td>333</td>

</tr>

</tbody>

<tfoot>

<tr>

<td>表尾</td>

<td>表尾</td>

<td>表尾</td>

</tr>

</tfoot>

table表格的标签

td代表的是一行

tr代表的是一行中的列数

caption代表表格的标题

thead表格的开关

tbody表格的内容

tfoot表格的表尾

8.表格的操作(table)

当表格宽度不够内容的宽度时，内容将撑起表格的宽度，如果表格的宽度足够显示内容时，这时表格的宽度是你设置宽度，这个规则，高度一样适用

cellpadding单元格的内边距

cellspacing单元格间的距离

rules（其中有三个属性）显示内边框的分割线

rows显示行

cols显示列

all都显示

9.表格的合并

<td rowspan="2">内容</td>

<td colspan="2">内容</td>

rowspan代表合并的行

colspan代表合并的列

10.表格的嵌套

嵌套p标签 span img等，表格嵌套标签时，嵌套在td标签上

<td><img src="img/IMG_0009.jpg"></td>