总结css表格，边框，轮廓，盒子模型，边距

Posted 2021-11-28 ts-prime

css表格:
border-collapse     是否把表格边框合并为单一边框 separate/collapse。
border-spacing     设置分隔单元格边框的距离 num。
caption-side     表格标题的位置 Top/bottom。
empty-cells     设置是否显示表格中的空单元格 hide/show。
table-layout     设置显示单元、行和列的算法。
automatic: 列宽度由单元格内容设定默认。
fixed: 列宽由表格宽度和列宽度设定。
inherit: 规定应该从父元素继承 table-layout 属性的值。

字体:
Fond-size：100px； 设置字体的大小

color：red；  设置字体的颜色

CSS盒子模型:所有的html元素都是一个四边形，即一个盒子。用CSS来设置盒子的内边距，边框，外边距的样式的方式，相当于设置盒子的样式，所以我们将其称为盒子模型

边框 border 内边距 padding 外边距 margin

上 top    下 bottom  左 left 由 right

盒子模型的边框：边框有四个属性(上下左右边框)可以设置

上边框 border-top

下边框 border-bottom

左边框 border-left

右边框 border-right

示例：<span style=”border-top: 1px solid red;”>内容体</span>

多个属性之间是用空格隔开

通用设置（设置四个边框）例如：设置上下左右边框都是1像素 实体 红色线

Border： 1px solid red；  就可以了

盒子模型的内边距: padding（也是有上下左右四个边距）：就是html内容体到html边框的距离

上内边距padding-top

下内边距padding-bottom

左内边距padding-left

右内边距padding-right

通用性设置：也是一次性设置上下左右边距距离 例如：padding:10px;

盒子模型外边距 margin （同样有上下左右）：html元素边框到其他html边框的元素的距离

上外边距margin-top

下外边距margin-bottom

左外边距margin-left

右外边距margin-right

通用性设置：一次性设置上下左右外边距距离都为10px

轮廓：

outline 轮廓
outline-color 规定边框的颜色。
outline-style 规定边框的样式。
none     定义无轮廓默认
dotted     定义点状的轮廓。
dashed     定义虚线轮廓。
solid     定义实线轮廓。
double     定义双线轮廓。双线的宽度等同于 outline-width 的值。
groove     定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
ridge     定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
inset     定义 3D 凹边轮廓。此效果取决于 outline-color 值。
outset     定义 3D 凸边轮廓。此效果取决于 outline-color 值。
inherit     规定应该从父元素继承轮廓样式的设置。
outline-width 规定边框的宽度。
thin     规定细轮廓。
medium     规定中等的轮廓.默认
thick     规定粗的轮廓。
length     允许您规定轮廓粗细的值。
inherit     规定应该从父元素继承轮廓宽度的设置。