本文详细介绍了HTML表格的创建及CSS样式配置方法，包括表格标签、属性应用技巧、BFC的概念及其应用场景，如解决高度塌陷、margin重叠等问题。
一、表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
table{
width:400px;
height:300px;
/* border:1px solid #000; */
/* 边框合并 */
/* border-collapse:collapse; */
/* 边框的间距 */
/* border-spacing:10px; */
/* 单元格没内容是否显示 */
/* empty-cells:hide; */
/* table-layout:auto; */
}
td,th{
/* border:1px solid #000; */
}
/* .td1{
background:red;
}
.td2{
background:green;
}
caption{
caption-side: left;
} */
</style>
</head>
<body>
<table rules="groups">
<colgroup span="2" class="td1"></colgroup>
<colgroup span="1" class="td2"></colgroup>
<!-- <caption>我是标题</caption> -->
<tr>
<th>姓名111111111111111</th>
<th>数学</th>
<th>语</th>
<th>英语</th>
<th>自然科学</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
<!--
一、表格标签的补充
数据行分组：
thead 表头
tbody 表体
tfoot 表尾
一个表格中：只能有一个thead tfoot 可以有多个tbody
数据列分组：
<colgroup span="把几列分为一组"></colgroup>
表格的标题
<caption></caption>
css属性：caption-side:top/bottom/left/right
注意：left/right只有火狐支持
列标题
<th></th>
默认居中和加粗效果
二、表格css属性的补充
相邻边框合并：
border-collapse:collapse 合并 / separate 分开（默认）
相邻边框的间距：
border-spacing:
当单元格没有内容的时候是否显示
empty-cells:hide / show(默认值)
控制表格宽度算法的属性
table-layout：auto / fixed
auto:自动根据内容去分配宽度,优点：灵活 缺点：性能消耗
fixed:进行均分，是固定的，优点：性能消耗小， 缺点：布局不灵活
三、表格的分割线
rules=""
all
rows
cols
groups
-->二、常见的表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
/* 细线表格 */
/* table{
width:500px;
height:300px;
border:1px solid #000;
border-collapse:collapse;
}
td,th{
border:1px solid #000;
} */
/* 粗框细线表格 */
/* table{
width:500px;
height:300px;
border:4px solid #000;
border-collapse:collapse;
}
td,th{
border:1px solid #000;
} */
/* 宫子格 */
/* table{
width:500px;
height:300px;
border-spacing:10px;
}
td,th{
border:1px solid #000;
} */
/* 日历表格 */
table{
width:500px;
height:300px;
border:4px solid #ccc;
padding:20px;
empty-cells: hide;
}
td,th{
background:skyblue;
}
</style>
</head>
<body>
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td></td>
</tr>
</table>
</body>
</html>三、BFC（块级格式化上下文）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
div{
width:500px;
height:500px;
background:yellowgreen;
border:1px solid hotpink;
}
p{
width:100px;
height:100px;
background:tomato;
margin-left:10px;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
<!--
BFC(Block formatting context)直译为“块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box（块）参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
BFC布局规则：
一、内部的Box会在垂直方向，一个接一个地放置。
二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置）
三、每个元素的margin box的左边， 与包含块border box的左边相接触
**四、BFC的区域不会与float box重叠。
五、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
六、计算BFC的高度时，浮动元素也参与计算
如何触发BFC：
根元素(html)
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
-->四、用BFC解决高度塌陷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
div{
background:hotpink;
overflow:hidden;
}
p{
width:200px;
background:orange;
float:left;
}
</style>
</head>
<body>
<div>
<p>1212</p>
<p>afdafdafddd
ddddddddddddd ddddddddd dddddddd dddddddddd ddddddd ddddddd</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ratione est dolore non expedita nostrum porro perferendis, aut velit nisi, dolores aliquam accusantium alias sed. Quisquam quod incidunt necessitatibus dolore optio.</p>
</div>
</body>
</html>五、BFC解决margin上下重叠
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
.top{
width:200px;
height:200px;
background:hotpink;
margin-bottom:50px;
}
p{
width:100px;
height:100px;
background:orange;
margin-top:70px;
}
.bfc{
/* 形成bfc */
/* BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素 */
overflow:hidden;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="bfc">
<p></p>
</div>
</body>
</html>六、bfc两栏高度自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
html,body{
height:100%;
}
.left{
width:200px;
height:80%;
background:green;
float:left;
}
.right{
height:100%;
background:hotpink;
/* 触发bfc */
/* BFC的区域不会与float box重叠 */
overflow:hidden;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
</html>七、双飞翼布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
html,body{
height:100%;
}
.left{
width:200px;
height:80%;
background:hotpink;
float:left;
}
.right{
width:200px;
height:80%;
background:teal;
float:right;
}
.center{
height:100%;
background:yellow;
/* 触发bfc,浮动区域不会和bfc区域重叠 */
overflow:hidden;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<!-- 内容区域要放在最下面 -->
<div class="center"></div>
</body>
</html>
八、网页
网页制作时，使用ui做好的psd样式文件，然后我们使用ps插件工具进行快速截图，节约时间，不需要我们去一张一张的截取。
这时候我们需要使用到一个工具：蓝湖点击下载首先需要我们在网页端登录注册，然后到ps端登录，具体的步骤百度都可以找到..
蓝湖使用指南：点击直达
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
