table布局
布局:是一个页面的整体结构。
结构特点:从上往下,从左往右。一般每一行的高度是一致的。
<table width="100%">
<tr>
<td colspan="3" style="height: 150px;background-color: red"></td>
</tr>
<tr>
<td style="width:150px;height: 300px;background-color: aqua"></td>
<td style="width:200px;background-color: blue"></td>
<td style="width:250px;background-color: orange"></td>
</tr>
<tr>
<td colspan="3" style="height: 150px;background-color: bisque"></td>
</tr>
</table>
页面的布局可以通过table来实现,一个单元格就是一个布局区域单位。该区域的大小可以通过height和width属性来设置,位置是通过单元格的相对位置来体现的。同事借个rowspan和colspan两个属性来完成单元格的合并。
当布局比较复杂的时候,可以使用table的嵌套来实现,既在某个单元格中在嵌入一个table进行划分。
div
<div>标签定义一个分块(divisivon)
写法:
<div style="width: 200px;height: 100px;border: 2px;background-color:chocolate"></div>
显示特点:在新的下一行进行显示。(块标签)
块级元素和内联元素的区别:
块级元素占满行。而内联元素会按照顺序从左至右依次排列
标签
块状元素:一般是其他元素的容器,可容纳内联元素和其他块状元素。
内联元素:内联元素只能容纳文本或者其他内联元素,它允许其他内联元素与其位于同一行,但宽度(width)高度(height)不起作用。
块级标签:在新的下一行进行显示。
div \ h1~h6 \ p \ hr \ table \ ul \ ol \ dl \ tr \ option \ caption \ dd \ dt \ form
内联标签:不会在新的下一行进行显示。
img \ input \ a \ td \ textarea \ span \ label \ select \ th \ button
1、块状元素可包含内联元素或某些块元素,但内联元素不可包含块元素,只能包含内联元素。
<div><h1></h1><p></p></div> 正确
<a href="#"><span></span></a> 正确
2、块级元素不能放在<p>里面,放在里面它的结构就错误了
<p><ol><li></li></ol></p> X
<p><div></div></p> X
3、有几个特殊块级元素只能包含内联元素,不能包含块级元素: h1~h6、p、dt
4、li标签可包含div标签
<li><div></div></li> 正确
5、块级元素与块级元素并列、内联元素与内联元素并列
<div><h2></h2><p></p></div> 正确
<div><a href="#"></a><span></span></div> 正确
<div><h2></h2><span></span></div> X