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 边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 一．设置背景 盒模型的尺寸可以通过两种方式实现可见性, ...
随机推荐
- 团队项目第二阶段个人进展——Day7
一.昨天工作总结 冲刺第七天,动手完成了一个demo来实现数据的上传与下载 二.遇到的问题 代码逻辑没看太懂 三.今日工作规划 对发布页面的数据进行处理,实现能够请求和响应,并学习如何实现图片的上传与 ...
- CSS层叠和继承
CSS具有两个核心的概念--继承和层叠.一般文本类的属性会被继承,即某个元素的CSS属性会传递给内部嵌套的元素.一个元素可能有一个或者多个样式的来源,当属性发生冲突时,就会根据加载顺序和权重大小决定层 ...
- 使用libpcap获取http报文
在上一篇博客中简单对libpcap库基本函数及基本工作流程做了些简单说明, 今天我们先了解一下pcap_loop()及pcap_dispatch()函数的功能及作用: (1)pcap_loop()循环 ...
- Java NIO SocketChannel套接字通道
原文链接:http://tutorials.jenkov.com/java-nio/socketchannel.html 在Java NIO体系中,SocketChannel是用于TCP网络连接的套接 ...
- MVP架构在xamarin android中的简单使用
好几个月没写文章了,使用xamarin android也快接近两年,还有一个月职业生涯就到两个年了,从刚出来啥也不会了,到现在回头看这个项目,真jb操蛋(真辛苦了实施的人了,无数次吐槽怎么这么丑),怪 ...
- 你不知道的JavaScript--Item14 使用prototype的几点注意事项
1.在prototype上保存方法 不使用prototype进行JavaScript的编码是完全可行的,例如: function User(name, passwordHash) { this.nam ...
- 玩转DWZ (一)---项目中怎么使用dwz
最近一直在找一个完全开源的web客户端框架,看到了dwz,虽然不知道到底怎么样,但还是支持国产,先学习一下.这篇文章先说一下怎么在项目里使用dwz框架. 首先先下载dwz:https://code.c ...
- 带BOM头文件解析
在java中apache提供了一个工具类BOMStream,在获取文件流时,将获取到的文件流转化成为BOM流: InputStreamReader is = new InputStreamReader ...
- Nodejs.调用Linux命令
当需要Node.js在后台帮忙运行Linux命令脚本时, 可以用上以下方法 上代码 var spawn = require('child_process').spawn; free = spawn(' ...
- 如何修改Tomcat默认端口？
修改的原因: 关于8080端口:8080端口同80端口,是被用于WWW代理服务的,可以实现网页浏览,经常在访问某个网站或使用代理服务器的时候,会加上":8080"端口号.另外Apa ...