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 边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 一．设置背景 盒模型的尺寸可以通过两种方式实现可见性, ...
随机推荐
- Flask构建微电影（一）
第一章.项目介绍 1.1.前言 本教程我将带领大家如何使用flask框架开发微电影网站.Flask是python中最受欢迎的轻量级web框架,flask扩展丰富,冗余度小,可自由选择组合各种插 ...
- IBM x3850 RAID5数据恢复过程
[raid数据恢复故障描述] 需要进行数据恢复的是北京一家公司的IBM X3850服务器,服务器挂载了5块73G SAS硬盘组成raid5磁盘阵列,4号盘为热备盘(Hot-Spare),由于未知 ...
- jmeter接口测试报java.net.SocketException: Socket closed错误。
如题,jmeter报出java.net.SocketException: Socket closed,我查询了下,服务器是正常的,可以返回数据,基本确定问题出在我这边jmeter.查询原因,看到有人说 ...
- Maven项目打包为jar的几种方式
这里收集整理下以往打包MAVEN项目为JAR包的各种方式 直接打包,不打包依赖包 直接打包,不打包依赖包,仅打包出项目中的代码到JAR包中.在POM中添加如下plugin即可,随后执行maven in ...
- SSM-SpringMVC-05：SpringMVC视图解析器InternalResourceViewResolver配置
------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 视图解析器------默认就有配置,但是默认的在实际使用过程中有很多不方便的地方,所以我们配置一道视图解析器 ...
- vue项目如何刷新当前页面
1.场景 在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求. 2.遇到的问题 1. 用vue-router重新路由到当前页面,页面是不进行刷新的 2.采用window.rel ...
- ansj构造最短路径
一.前言 上节介绍了ansj的原子切分和全切分.切分完成之后,就要构建最短路径,得到分词结果. 以"商品和服务"为例,调用ansj的标准分词: String str = " ...
- js算法初窥02（排序算法02-归并、快速以及堆排序）
上一篇,我们讲述了一些简单的排序算法,其实说到底,在前端的职业生涯中,不涉及node.不涉及后台的情况下,我目前还真的没想到有哪些地方可以用到这些数据结构和算法,但是我在前面的文章也说过了.或许你用不 ...
- MonolithFirst
As I hear stories about teams using a microservices architecture, I've noticed a common pattern. Alm ...
- RESTful API 设计
http://www.ruanyifeng.com/blog/2014/05/restful_api.html