重学前端样式（text-align）详解表格table（重点：继承border-spaci。。。⽂章⽬录
样式css
CSS 是在 HTML 4 开始使⽤的，是为了更好的渲染HTML元素⽽引⼊的。
CSS 可以通过以下⽅式添加到HTML中：
内联样式：在HTML元素中使⽤"style" 属性（当特殊的样式需要应⽤到个别元素时，就可以使⽤内联样式）
内部样式表：在HTML⽂档头部 < head> 区域使⽤< style> 元素来包含CSS
外部引⽤：使⽤外部 CSS ⽂件
最好的⽅式是通过外部引⽤CSS⽂件。
更多css基础，详见：
强调⼀下 text-align ：
text-align属性仅对块元素的 ⽂本 有效。⾏内元素因为宽度由内容确定，所以根本没有⽂本居中这⼀说法。(当然，对于⾏内块元素，你可以设置宽度使text-align⽣效）
表格
表格由 < table> 标签来定义。每个表格均有若⼲⾏（由 < tr> 标签定义），每⾏被分割为若⼲单元格（由 < td> 标签定义），有些表格还有表头（由< th>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容，数据单元格可以包含⽂本、图⽚、列表、段落、表单、⽔平线、表格等等；th的默认font-weight是blod。
在div、flex布局未出现之前，⽹页的布局基本上是靠表格定义，现在很少。
随便写⼀个简单的表格：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<title>weekwork</title>
</head>
<body>
<div >
<table border="2px">
<tr>
<th >
星期
</th>
<th >
任务时间
</th>
<th >
任务名称
</th>
<th >
<th >
地点
</th>
<th >
重要程度（⾼中低）
</th>
<th >
备注
</th>
</tr>
<tr >
<td colspan="6"></td>
</tr>
<tr>
<td rowspan="4">星期⼀</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>div border属性
<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 colspan="6"></td>
</tr>
<tr >
<td>⼀周总结</td>
<td colspan="5"></td>
</tr>
</table>
</div>
</body>
</html>
按f12，定位到table，发现其源码如下：
table[Attributes Style]{
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
}
table{
display: table;
border-collapse: separate;
box-sizing: border-box;
border-spacing: 2px;
border-color: grey;
}
table[Attributes Style]的翻译——表格[属性样式]，也就是你定义的border。（你不定义border，则不会显⽰此项；即使你设置为0，其也会显⽰）
重点
这⾥菜鸟先说⼀下：
⼀般属性值为继承⽗元素样式（inherit），如果⽗元素没有该属性，则该属性值为默认属性值（initial）（由浏览器决定）！
不管你⾃⼰设置border：?px 颜⾊ 线型还是 < table border="?px">，都只会影响最外围的⼀圈，⾥⾯的依旧还是：1px ，实线，但颜⾊会改变！
边框分离的表格(border-collapse:separate) 的⾏，是不具有border的，因为每⼀个⼩格⼦都有border！（所以⽆法设置tr样式，只能设置颜⾊）
border-spacing
border-spacing 属性设置 相邻单元格的边框间的距离（仅⽤于“边框分离”模式[border-collapse:separate]）。
该属性指定分隔边框模型中单元格边界之间的距离。在指定的两个长度值中，第⼀个是⽔平间隔，第⼆个是垂直间隔，除⾮ border-collapse 被设置为 separate，否则将忽略这个属性。（尽管这个属性只应⽤于表，不过它可以由表中的所有元素继承，但是对别的元素没⽤）
注意：
如果border-spacing设置为0，那么两条线会合并到⼀起，线的粗细就是（2px），⽆论你的border设置的多粗(只会影响外⾯⼀圈)，中间合并的线都是2px。⽆法设置tr样式（上⾯重点讲了），只能设置颜⾊，但可以设置td样式。（会产⽣重叠加粗现象）
border-collapse（是否合并边框模型）
为表格设置 是否合并边框模型。border-collapse 属性设置表格的边框是否被合并为⼀个单⼀的边框。
注意：
如果border-collapse设置为collapse（边框合并），那么合并后的线就是1px，⽆论你的border设置的多粗(只会影响外⾯⼀圈)，合并的线都是1px。（不包括⾃⼰设置tr、td样式，⾃⼰设置tr、td不会产⽣重叠加粗现象）
border-collapase为separate（边框分离），⽆法设置tr样式，只能设置颜⾊，但可以设置td样式（会产⽣重叠加粗现象）。
注意：
当border-collapse设置为collapse时（边框合并），此时table最外围的边框太粗会产⽣颜⾊区分，并不好看，如下：
原因是因为，table的默认边框类型，应该是⼀种3d的类型，导致融合后，内外颜⾊产⽣差距！
解决⽅法也很简单，就是⾃⼰给table的外边框设置⼀个⾮3d的样式，eg：
table{
border-collapse: collapse;
border-style: solid;
}
重叠加粗如何解决？
1、使⽤margin属性的负值，设置元素的margin值为边框值的相反数，就可以把重叠的部分边框隐藏起来（被覆盖），让边框以单线的形式显⽰。
2、可以设置border-collapse: collapse（边框合并）来设置边框，它把重叠的边框合并在⼀起，成为⼀个边框，实现单线边框的效果。
3、还可以使⽤css将双数的 上边框 和 下边框 隐藏。（也可以⽤其它⽅式，隐藏不同的边框，但⼤致思路⼀样）
（菜鸟知道的只有这三种，望读者积极留⾔菜鸟会收录上来！）
empty-cells（不包含任何内容的表单元格如何表⽰（仅⽤于“边框分离”模式））
隐藏表格中空单元格上的边框和背景（仅⽤于“边框分离”模式）。
该属性定义了不包含任何内容的表单元格如何表⽰，如果显⽰，就会绘制出单元格的边框和背景，除⾮ border-collapse 设置为separate，否则将忽略这个属性。
box-sizing（⽤户应该如何计算⼀个元素的总宽度和总⾼度）
box-sizing 属性允许您以特定的⽅式定义匹配某个区域的特定元素。
例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 “border-box”，这可令浏览器呈现出带有指定宽度和⾼度的框，并把边框和内边距放⼊框中。
（这⾥菜鸟试了⼀下，没看出来什么变化，望读者积极留⾔）
2020/8/9补：
菜鸟复习到css，并发现边框的计算后，才算真的了解了这个是什么意思！
CSS 中的 box-sizing 属性定义了⽤户应该如何计算⼀个元素的总宽度和总⾼度。
box-sizing 属性可以被⽤来调整这些表现：
content-box 是默认值。如果你设置⼀个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将⼀个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。⼤多数情况下，这使得我们更容易地设定⼀个元素的宽⾼。
注意：
border-box不包含margin

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