16 ， CSS 边框与边界
1.CSS 中边框的使用
2.CSS 中边界的使用
16.1 CSS 中边框的使用
属性名称 属性值 说明
border-color 十六进制 可依序设置上，右，下，左线颜色
英文名称 border-color:red(四边均为红色)
三原色 border-color:red green
(上下为红色，左右为绿色)
border-color:red green blue
(上为红色、左右为绿色、下为蓝色)
border-color:red green blue yellow
(上右下左分别为红绿蓝黄)
border-style none 不显示边线
dotted 点线
dashed 虚线
solid 实线
double 双线
border-width 长度 border-width:0.2cm 0.3cm 0.4cm 0.5cm;
border-width:1 2 3 4;
简化方案：border:形态 长度 颜色
例如 border:1px solid black;
16.2 CSS 中边界的使用
padding 属性介绍
属性名称 属性值 说明
padding-bottom 长度/百分比 元件下端边线的空隙
padding-left 长度/百分比 元件左端边线的空隙
padding-right 长度/百分比 元件右端边线的空隙
padding-top 长度/百分比 元件上端边线的空隙
简易写法：padding:10px
padding:2px 4px
padding:2px 6px 10px
padding:1px 2px 3px 4px
margin 系列属性介绍
属性名称 属性值 说明
margin-bottom auto 自动调整空隙
长度/百分比 设置下端空隙
margin-left auto 自动调整空隙
长度/百分比 设置左端空隙
margin-right auto 自动调整空隙
长度/百分比 设置右端空隙
margin-top auto 自动调整空隙
长度/百分比 设置上端空隙
简化方案：margin:2px 4px
margin:2px 6px 10px
margin:1px 2px 3px 4px
常用网页顶格设置：margin:0;
CSS 1CSS 中边框的使用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>中边框的使用</title>
<style type="text/css">
img{
border-width: 6px;
border-color:red green blue yellow;
border-style: solid;/*必须要填，不填默认为不显示边线*/
}
</style>
</head> <body>
<img src="data:images/pic7.jpg">
<P><pre>
CSS 中边框的使用
属性名称 属性值 说明
border-color 十六进制 可依序设置上，右，下，左线颜色
英文名称 border-color:red(四边均为红色)
三原色 border-color:red green
(上下为红色，左右为绿色)
border-color:red green blue
(上为红色、左右为绿色、下为蓝色)
border-color:red green blue yellow
(上右下左分别为红绿蓝黄)
border-style none 不显示边线
dotted 点线
dashed 虚线
solid 实线
double 双线
border-width 长度 border-width:0.2cm 0.3cm 0.4cm 0.5cm;
border-width:1 2 3 4;
简化方案：border:形态 长度 颜色
例如 border:1px solid black;
</pre></P> </body>
</html>
CSS 2CSS 中边界的使用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>中边界的使用</title>
<style type="text/css">
td{
padding-top:20px;
padding-left:10px;
}
table{
margin-top: 80px;
}
</style>
</head> <body>
<table border="1" width="300" height="200" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">padding 属性介绍</td>
</tr>
</table>
<P><pre>
CSS 中边界的使用
padding 属性介绍
属性名称 属性值 说明
padding-bottom 长度/百分比 元件下端边线的空隙
padding-left 长度/百分比 元件左端边线的空隙
padding-right 长度/百分比 元件右端边线的空隙
padding-top 长度/百分比 元件上端边线的空隙
简易写法：padding:10px
padding:2px 4px
padding:2px 6px 10px
padding:1px 2px 3px 4px
margin 系列属性介绍
属性名称 属性值 说明
margin-bottom auto 自动调整空隙
长度/百分比 设置下端空隙
margin-left auto 自动调整空隙
长度/百分比 设置左端空隙
margin-right auto 自动调整空隙
长度/百分比 设置右端空隙
margin-top auto 自动调整空隙
长度/百分比 设置上端空隙
简化方案：margin:2px 4px
margin:2px 6px 10px
margin:1px 2px 3px 4px
常用网页顶格设置：margin:0;
</pre></P> </body>
</html>
16 ， CSS 边框与边界的更多相关文章
- CSS边框与边界
(上右下左依次体现)à边框的同一属性名称可以同时使用多个属性值 简化方案:border: 长度 形态 颜色 例如 border:1px solid black; 16.2 CSS中边界的使用 padd ...
- CSS 边框
CSS 边框属性 CSS边框属性允许你指定一个元素边框的样式和颜色. 边框样式 边框样式属性指定要显示什么样的边界. border-style属性用来定义边框的样式 border-style 值: ...
- CSS：CSS 边框
ylbtech-CSS:CSS 边框 1.返回顶部 1. CSS 边框 CSS 边框属性 边框样式 边框样式属性指定要显示什么样的边界. border-style属性用来定义边框的样式 border ...
- 理解CSS边框border
前面的话 边框是CSS盒模型属性中默默无闻的一个普通属性,CSS3的到来,但得边框属性重新焕发了光彩.本文将详细介绍CSS边框 基础样式 边框是一条以空格分隔的集合样式,包括边框粗细(边框宽度 ...
- CSS边框效果
前面的话 本文将详细介绍CSS边框效果 半透明边框 border:10px solid hsla(0, 0%, 100%,.5); background-clip:padding-box; 缝边效果 ...
- CSS中margin边界叠加问题及解决方案
你对CSS的margin边界叠加的概念是否了解,这里和大家分享一下,当一个元素出现在另一个元素上面时,第一个元素的底边界与第二个元素的顶边界发生叠加. CSS的margin边界叠加深度剖析 边界叠加简 ...
- CSS 边框(border)实例
CSS 边框(border)实例:元素的边框 (border) 是围绕元素内容和内边距的一条或多条线. CSS border 属性允许你规定元素边框的样式.宽度和颜色. CSS 边框属性属性 描述bo ...
- CSS中margin边界叠加问题及解决方案(转)
边界叠加简介 边界叠加是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆.简单地说,当两个垂直边界相遇时,它们将形成一个边界.这个边界的高度等于两个发生叠加的边界的高度中的较大者. ...
- 第 17 章 CSS 边框与背景[下]
学习要点: 1.设置背景 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 一．设置背景 盒模型的尺寸可以通过两种方式实现可见性, ...
随机推荐
- js相关
记录工作中用到的js实用方法: 1. 判断包含:indexOf "https".indexOf("http") 包含结果为0,不包含结果为-1: 通常用(&qu ...
- 杨老师课堂_VBA学习教程之根据部门列创建工作表
课件下载 : 方式1:本节课件下载地址:链接: https://pan.baidu.com/s/1rf5pRmZ95fjVbz70KYi6Aw 密码: q9yk 方式2:或点击此处下载 效果预览图: ...
- vue 单页应用拆分为多页应用
npm install glob --save-dev build.js---'./src/pages' 替换为自己实际的项目文件路径 utils.js--- webpack.base.conf.js ...
- PAT1007:Maximum Subsequence Sum
1007. Maximum Subsequence Sum (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Y ...
- apache2.4 虚拟主机配置
网上教程很多,仅记录我的配置,可供参考 一.修改httpd.conf 打开appserv的安装目录,找到httpd.conf文件,分别去掉下面两行文字前面的#号. #LoadModule vhost_ ...
- mysql中float类型使用总结
对于单精度浮点数Float: 当数据范围在±131072(65536×2)以内的时候,float数据精度是正确的,但是超出这个范围的数据就不稳定,没有发现有相关的参数设置建议:将float改成dou ...
- Spring加载xml配置文件的方式 ApplicationContext
大家都知道Java读普通文件是通过Basic I/O 中的InputStream.OutStream.Reader.Writer 等实现的.在spring 框架中,它是怎样识别xml这个配置文件的呢? ...
- CoreData的简单使用
一.基础知识: CoreData是对SQLite的封装,使用的时候比较方便,减少对SQL语句的使用. CoreData中的核心对象 NSManagedObjectModel:代表Core Data 的 ...
- java基础 lang包 详细介绍
Java.javax和org.其中以java开头的包名是JDK的基础语言包,以javax开头的属 (org是organization的简写).而在JDK API中还包含了一些以com.sun开头的包名 ...
- call()，apply()方法解析（一）
1.call()和apply()的作用是改变this指向,区别是传参列表不同(前者连续参数,后者为参数数组) 2.方法定义: function.apply(thisObj[, argArray]) f ...