码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2019-05-07 21:31:34      阅读:218      评论:0      收藏:0      [点我收藏+]

标签:nbsp   距离   order   属性   bsp   width   单元格边框   边框   cell   

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     规定应该从父元素继承轮廓宽度的设置。

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

标签:nbsp   距离   order   属性   bsp   width   单元格边框   边框   cell   

原文地址:https://www.cnblogs.com/TS-Prime/p/10828069.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!