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.边框（bo rder)
r der)
div有默认的边框
边框样式:
dashed 虚线
dotted 圆点虚线
综合写法:
border:3px orange dotted;
3.⽗⼦div
当⽗⼦div的时候，设置margin-top时，会把⽗级div扯下来，设置时，回去寻⽗标签的border，解决⽅案，设置⽗级标签的border
边框透明属性transparent
4.内边距(pa dding)
内边距是真实存在的距离，会改变盒⼦的⼤⼩， 不影响布局的效果
宽度=内容的宽度+内边距的宽度+border的宽度
⾼度=内容的⾼度+内边距的⾼度+变宽的⾼度
5.外边距(m a r gin)
5.外边距(ma
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.表格的初识(ta ble)
表格的样式由如下基本格式组成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.表格的操作(ta ble)
当表格宽度不够内容的宽度时，内容将撑起表格的宽度，如果表格的宽度⾜够显⽰内容时，这时表格的宽度是你设置宽度，这个规则，⾼度⼀样适⽤
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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。