1、HTML布局可以用table也可以用div,那么有了table为啥还要用div
写一个table:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="80">水果</td>
<td width="80">苹果</td>
<td width="80">香蕉</td>
</tr>
<tr>
<td width="80">单格</td>
<td width="80">2元/千克</td>
<td width="80">3元/千克</td>
</tr>
<tr>
<td width="80">数量</td>
<td width="80">2千克</td>
<td width="80">3千克</td>
</tr>
</table>
</body>
</html>
运行结果
写一个div:
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/sg.css"/>
</head>
<body>
<div class="fruit">
<dl >
<dt>水果</dt>
<dd>单价</dd>
<dd>数量</dd>
</dl>
</div>
<div class="apple">
<dl>
<dt>苹果</dt>
<dd>2元/千克</dd>
<dd>2千克</dd>
</dl>
</div>
<div class="banana">
<dl>
<dt>香蕉</dt>
<dd>3元/千克</dd>
<dd>3千克</dd>
</dl>
</body>
</html>
运行结果：
加上css代码：
dt{margin-left: 40px;}
.fruit{float: left;}
.apple{float: left;}
.banana{float: left;}
运行结果：
两者比较：
table相比较div来说没有div灵活多变，方便简洁。所以两者比较还是div好。
注意一点table中tr标签的width设置不起作用，height是起作用的。td标签中的width和height都是起作用的。
2.盒模型的宽度和高度的计算。
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link type="text/css" rel="stylesheet" href="css/hezi.css" />
</head>
<body>
<div class="box">盒子</div>
</body>
</html>
css代码
.box{width:200px; height:100px;background: blue;margin:10px;padding: 20px; border:2px solid #000;}
运行结果：
黄色部分是margin外边框，黑色是border边框，深蓝色部分是padding填充，浅蓝色部分是content内容
元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
元素实际宽度（盒子的高度）=上边界+上边框+上填充+内容高度+下填充+下边框+下边界。
所以上图的盒子的宽度=10+2+20+200+20+2+10=264
盒子的高度=10+2+20+100+20+2+10=164
3.绝对定位与相对定位的区别，定位与浮动的区别。
a.position属性的relative和absolute值
相对定位
代码
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link type="text/css" rel="stylesheet" href="css/dingwei.css" />
</head>
<body>
<div class="box1">盒子1
<div class="box2">盒子2</div>
<div class="box3">盒子3</div>
</div>
</body>
</html>
css代码：
body{margin: 20px;}
.box1{width:400px; height:300px;background-color: blue;margin: 10px;padding: 10px; border:2px solid #000;}
.box2{width:200px; height:100px;background-color:red ;margin: 10px;padding: 10px; border:2px solid #000;}
.box3{width:200px; height:100px;background-color:red ;margin: 10px;padding: 10px; border:2px solid #000;}
运行结果
在盒子2中加入position：relative
.box2{width:200px; height:100px;background-color:red ;margin: 10px;padding: 10px; border:2px solid #000;position:relative;bottom: 30px; right: 30px;}
运行结果
使用相对定位的盒子，会相对于它原来的位置，通过偏移指定的距离，到达新的位置。而该相对的盒子则仍然位于标准中，对它的父块盒子和兄弟盒子都没有影响。
绝对定位：
html代码和上面那个一样，
css代码
body{margin: 20px;}
.box1{width:400px; height:300px;background-color: blue;margin: 10px;padding: 10px; border:2px solid #000;}
.box2{width:200px; height:100px;background-color:red ;margin: 10px;padding: 10px; border:2px solid #000;position:absolute;bottom: 30px; right: 30px;}
.box3{width:200px; height:100px;background-color:red ;margin: 10px;padding: 10px; border:2px solid #000;}
同样是在盒子2中加入position:absolute;bottom: 30px; right: 30px;
运行结果
使用绝对定位的盒子以它的“最近”的一个“已经定位”的“祖先元素”为基准进行偏移。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位。再有，绝对定位的框从标准流中脱离，这意味着它们对其后的兄弟盒子的定位没有任何影响，其他的盒子就好像这个盒子不存在一样。
在盒子一种加入position: relative;
运行结果
如果设置了绝对定位，而没有设置偏移属性，那么它仍然保持原有的位置。
b.float属性：left|right|none（默认）
float：left；
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link type="text/css" rel="stylesheet" href="css/dingwei.css" />
</head>
<body>
<div class="box1">盒子1</div>
<div class="box2">盒子2</div>
<div class="box3">盒子3</div>
<div class="clear"></div>
</body>
</html>
css代码
body{margin:20px;}
.box1{float:left;width:200px; height:100px;background-color: blue;margin: 10px;padding: 10px; border:2px solid #000;}
.box2{float:left;width:200px; height:100px;background-color:red ;margin: 10px;padding: 10px; border:2px solid #000;}
.box3{float:left;width:200px; height:100px;background-color:red ;margin: 10px;padding: 10px; border:2px solid #000;}
.clear{clear: both;}
运行结果
float：right；
css代码
body{margin:20px;}
.box1{float:right;width:200px; height:100px;background-color: blue;margin: 10px;padding: 10px; border:2px solid #000;}
.box2{float:right;width:200px; height:100px;background-color:red ;margin: 10px;padding: 10px; border:2px solid #000;}
.box3{float:right;width:200px; height:100px;background-color:red ;margin: 10px;padding: 10px; border:2px solid #000;}
.clear{clear: both;}
float：none；
body{margin:20px;}
.box1{float:none;width:200px; height:100px;background-color: blue;margin: 10px;padding: 10px; border:2px solid #000;}
.box2{float:none;width:200px; height:100px;background-color:red ;margin: 10px;padding: 10px; border:2px solid #000;}
.box3{float:none;width:200px; height:100px;background-color:red ;margin: 10px;padding: 10px; border:2px solid #000;}
.clear{clear: both;}
四、使用css控制超链接，即：link、visited、hover、actived的先后顺序。
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link type="text/css" rel="stylesheet" href="css/wl.css" />
</head>
<body>
<a href="#">a标签</a>
</body>
</html>
css代码：
a标签的link，没有被访问过的样式
a标签的hover，鼠标滑过的样式
a标签的active，链接激活的样式
5.css中隐藏与显示的属性有display和hidden，两种的区别是啥？
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link type="text/css" rel="stylesheet" href="css/yc.css" />
</head>
<body>
<table id="table" style="border: 2px dashed red; padding: 5px;">
<tr >
<td>1</td>
<td>2</td>
</tr>
<tr class="table1">
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>
运行结果
第一种情况：css代码为：#table .table1{ display: none;}
运行结果：
第二种情况：css代码为:#table .table1{visibility: hidden;}
运行结果：
这两种区别在于：第一种情况宽和高各种属性值都隐藏了
第二种情况视觉上看不了，但它所占据的空间位置还在。
6.html中的标签分为块级标签与行内标签（也叫内联标签），这两种标签的区别是啥？html中哪些常用的标签是块级标签，哪些是行内标签
块级标签比如<dl><dt>
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<dl>
<dt>1</dt>
<dt>2</dt>
</dl>
</body>
</html>
运行结果：
行内标签比如<a>
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a>1</a>
<a>2</a>
</body>
</html>
运行结果：
两者最基本的区别是块级元素不会独占一行，行内元素会独占一行。注意一点：行内元素的水平方向的padding-left和padding-right都会产生边距效果，但是竖直方向上的padding-top和padding-bottom都不会产生边距效果。
原文：https://www.cnblogs.com/zp-frighting/p/10483871.html