边框《CSS权威指南》读书笔记

元素的外边距内就是元素的边框。即围绕元素内容和内边距的一条或多条线。由于元素的背景不会在元素外边距以内,所以背景在元素外边框边界处停止。

边框有三个方面:宽度或粗细,样式或外观,颜色。

宽度默认值为medium,通常为2px,默认none,所以不一定能看到边框。

颜色默认是元素的前景色,如果没有前景色则是元素文本颜色,如果也没有,那么将继承父元素的文本颜色。

边框和背景

大多数浏览器遵循CSS2.1的定义,元素的背景是内容、内边距和边框处的背景。

有样式的边框

样式控制着边框的显示,没有样式,就没有边框。

border-style定义了10个不同的非inherit样式,包括默认值none。

double定义为两条线的宽度再加上这两条线之间的空间等于border-width值。两条线的粗细以及线之间的空间的宽度由用户代理决定。

多种样式

可以为给定边框定义多个样式,例如:

p.aside{border-style:solid dashed dotted solid;}

结果是段落由一个实线上边框、虚线右边框、点线下边框和一个实线左边框。

单边样式

border-top/right/bottom/left-style

如果三边有边框,一边无边框,有两种写法,第一种在样式里一一声明,这里不多说,说说第二种,

h1{border-style:solid;border-left-style:none;}

注意:必须把单边属性放在简写属性之后,如果放在简写属性之前则会覆盖单边属性的值。

边框宽度

为边框指定宽度有4种方法:长度值、thin、medium、thick

边框的默认宽度为medium

根本没有边框

在设置边框的宽度之前一定要声明border-style(默认值是none),否则是没有边框的,也就是边框的宽度设置无效。

边框颜色

border-color一次可以设置四个值,也可值复制。

透明边框

主要是将边框的颜色设置成透明的,值为transparent,这个值用于创建有宽度的不可见边框。

IE7之前版本不支持

简写边框属性

border-top/right/bottom/left:width style color;

顺序不重要,打乱了还是一个效果。

也可省略一些值,未声明的将会应用默认值。

边框和行内元素

其规则很大程度上与外边距和行内元素的相应规则相同。

上下边,边框不影响行内元素的行高,边框可能会覆盖其它元素。

左右边,文本会在边框旁边显示,不会覆盖左右两边的元素。

换行时和行内元素和外边距的规则一样,可能会将航中某些部分向后移一点点,而这有可能改变位于行尾的词。

时间: 2024-10-21 09:54:57

边框《CSS权威指南》读书笔记的相关文章

css权威指南 读书笔记

网上看见推荐的书总是喜欢买回家,但是大多数时候都不会立即就看,都是在书橱里蒙上了一层灰尘.从毕业到现在,由于公司业务原因,写js多余css,所以就想系统地看看css,并且做一些练习,于是就开始看<css权威指南>,看到了第六章,初步感觉,对于工作一年的我来说,很简单,当然也有一些我不熟悉的知识点,于是整理了下来. 一.@import 1.放在style容器中,且在其他css规则之前 2.每个人@import指令的样式都会加载使用 二.选择器 1.:first-letter 用于选取指定选择器的

CSS权威指南读书笔记之值和单位

等价颜色表 什么叫Web安全色 所谓的“web安全”颜色是指在256色计算机系统上总能避免抖动的颜色. Web安全颜色可以表示为RGB值为20%和51(相应的十六进制值为33)的倍数. 如果使用RGB百分数,要让所有这3个分量都要么是0%,要么是一个能被20整数的数 同理,如果是使用0~255范围的RGB值,则各分量值要么是0要么是能被51整数的数. 如果是采用十六进制记法,,使用值00.33.66.99.CC和FF的三元组才是Web安全颜色. 绝对长度单位 有5种绝对长度单位.英寸(in).厘

CSS权威指南读书笔记之选择器

选择器 选择器的规则结构包括:选择器和声明块,每个声明块是一个属性键值对(记住每个声明块最好加分号结尾) p.warning { font-weight:bold; /*其class属性包含词warning的所有段落*/ /*记住解释一般是从左到右读*/ } .warning.urgent { background:red; /*class同时包含warning和urgent的所有元素 其中warning和urgent class没有顺序之分*/ /*选择器当中是没有空格的,如果有空格就成了子元

CSS权威指南学习笔记系列(1)CSS和文档

题外话:HTML是一种结构化语言,而CSS是它的补充:这是一种样式语言.CSS是前端三板斧之一,因此学习CSS很重要.而我还是菜鸟,所以需要加强学习CSS.这个是我学习CSS权威指南的笔记,如有不对,请谅解和指出.谢谢大家.正文: 第一章 CSS和文档---------- 1.CSS,称为层叠样式表.使用CSS的理由有:a.易于使用,样式表能大大减少Web创作人员的工作量:b.在多个页面上使用样式,可以创建一个样式表,然后把这个样式表应用到多个页面:c.层叠,CSS还规定了冲突规则:这些规则统称

IDA.Pro权威指南 读书笔记

http://www.pediy.com/kssd/pediy12/142766.html 标 题:IDA.Pro权威指南 读书笔记[Made By C_lemon] 作 者:Dstlemoner 时 间:2011-11-14 11:56:17 链 接:http://bbs.pediy.com/showthread.php?t=142766    IDA为反汇编 和逆向破解的 静态分析利器 ! 虽然是利器,但是你不会用的话~那就另当别论了. →     唉.对于刚入门的新手来说,看前人走过的路程

Hadoop权威指南读书笔记

本书中提到的Hadoop项目简述 Common:一组分布式文件系统和通用I/O的组件与接口(序列化.javaRPC和持久化数据结构). Avro:一种支持高效.跨语言的RPC以及永久存储数据的序列化系统. MapReduce:分布式数据处理模型和执行环境,运行于大型商业集群. HDFS:分布式文件系统,运行于大型商用机集群. Pig:一种数据流语言和运行环境,用以检索非常大的数据集.Pig运行在MapReduce和HDFS的集群上. Hive:一个分布式.按列存储的数据仓库.Hive管理HDFS

Android编程权威指南-读书笔记(二)-第一个小程序

Android编程权威指南-读书笔记(二) -第一个小程序 第一个例子介绍 应用名为GeoQuiz.用户通过单击True或False按钮来回答屏幕上的问题,GeoQuiz可即时反馈答案正确与否. 这个例子为我们简单介绍了几个基本组件的使用,以及基本的事件监听.让我们对基本组件的使用和事件的监听有一个基本的了解. 这篇文章分为2个部分,第一部分就是创建简单的UI.第二个部分就是对这个UI增加代码来响应一些操作. (注:所有不明白或者不理解的东西其实都不重要,后面都会有更详细的介绍.) 本章的目标

css权威指南学习笔记--第七章

由于之前一直没有系统的看过css相关的书籍,导致自己css方面一直都是处于零散状态.知其然,不知其所以然.所以买了<css权威指南>.虽然比较老了,但是应该也会收获很大. 1 水平方向上 margin-left +border-left+padding-left+width+padding-right+border-right+margin-right 其中红色的是可以设置为auto,当设置为auto时,浏览器会自动计算该值.基于的原则就是 外层包裹容器的width=被包裹元素的width+p

css权威指南学习笔记--第6章

line-height:定义文本行基线之间的距离 <p style="line-height: 20px;"> these are test words<br /> these are test words </p> 说到line-height就不能不说到行框中各个高度是怎么计算的,这里引用css权威指南中的图 文本行中的每个元素都会生成一个内容区,这由字体的大小确定.如果不存在其他因素(如line-height)那么这个内容区的高度就是行内框的高度

CSS权威指南学习笔记 —— HTML元素分类

HTML文档由各种元素组成.比如,p.table.span等等.每个元素都会对文档的表现有所影响.CSS中,每个元素都会生成一个框(传说中的盒子),其中包含元素内容. 元素可以根据它的创建方式分为两种:替换元素和非替换元素.创建方式会对盒模型的表现有所影响,后续的笔记中会看到. 替换元素:这种元素的内容部分并非由文档直接显示,而是用其他内容来替换.最常见的替换元素img,它是由文档本身之外的一个图片文件来替换的.input也是替换元素,是根据类型的值来决定内容是什么,有时内容被替换成单选钮,有时