css细节复习笔记——内边距、边框和外边距
一个元素的内边距、边框和外边距属性会影响着整个文档如何布局,更重要的是,它们会严重影响给定元素的外观。
高度和宽度
这两个属性不能应用到行内非替换元素,其高度和宽度由链接的内容确定,而不是由创作人员确定。正常流中的元素很少有设定的高度。
外边距和内边距
如果元素有背景,则会影响使用内边距和外边距,因为背景会延伸到内边距中,但不会延伸到外边距。为元素指定的内边距和外边距会影响元素的背景何时结束。
为内容区的个边增加10像素空白,margin:10px,类似于html的hspace和vspace,设置一个图像周围的额外空间。margin遵循一下模式:
margin:top right bottom left。这些值自上而下围着元素顺时针旋转,如果想呈现你想要的效果,就必须正确安排值的顺序。当其中一个值缺省的时候,将会按照以下规则:
1)如果缺少左外边距的值,则使用右外边距的值。
2)如果缺少下外边距的值,则使用上外边距的值。
3)如果缺少右外边距的值,则使用上外边距的值。
换句话说,如果为外边距指定3个值,则第4个值将会从第2个复制得到。如果给定两个值,第4个值会从第2个值复制得到,第3个值会从第1个值得到。
单边外距属性,对于margin:auto auto auto 3em;等同于margin-left:3em;可以使用单一的margin-top、margin-right、margin-bottom和margin-left单一设置外边距。
上小节讨论过”负外边距和合并外边距“的规则:正常流中垂直相邻块级元素外边距会合并。但是当外边距应用到行内非替换元素,她对行高没有任何影响。由于外边距实际上是透明的,所以这个声明没有任何视觉效果,原因在于行内非替换元素的外边距不会改变一个元素的行高。
但是注意,行内非替换元素之前的字的结尾与行内元素背景的边界之间有额外的一个空间。如果愿意可以在行内元素的两端都增加这个额外的空间:
<p style="font-size:12px;line-height:14px;">
This is text<em>some of which emphasized</em>,plus other text<br>which id <strong style ="margin:25px;background:silver">strongly emphasized</strong>and which is<br>larger than the surrounding text.
</p>
效果如下:
如果向行内非替换元素应用负外边距,情况会更有意思。元素的上下外边距不受影响,行高也不会受影响,不过元素的左右两端可能与其他内容重叠。
替换元素有所不同:为替换元素设置的外边距确实会影响行高,可能会使行高增加或减少,这取决于上下外边距的值。行内替换元素的左右外边距与替换元素的左右外边距的作用一样。
边框
每个边框都有3个方面:其宽度或粗细、其样式或外观,以及其颜色。边框的默认样式是none,不一定能看到边框。默认的边框颜色是元素本身的前景色,如果没有为边框声明颜色,它将与元素文本颜色相同。
边框的样式
如果一个边框没有样式,就要没有宽度,不过有些情况下你可能向创建一个不可见的边框。这就引入了边框颜色transparent,这个值用于创建有宽度的不可见边框。这种透明边框相当于内边距,因此元素的背景会延伸到边框区(假设有可见的背景)。
百分数值和内边距
可以为元素的内边距设置百分数值。向外边距一样,百分数值要相对于其父元素的width计算,所以如果父元素的width改变,它们也会改变。
注意,上下内边距与左右内边距一直;也就是说,上下内边距会相对于父元素的宽度计算,而不是相对于高度。
css细节复习笔记——内边距、边框和外边距的更多相关文章
- CSS权威指南 - 内边距 边框 和 外边距
九十年代的完全用表格布局,简单的段落边框都需要用表格.CSS让布局更方便. 基本元素框 basic element boxes 如同第七章基本视觉格式化那一章讲到,每个文档元素会生成一个元素框,这个框 ...
- css细节复习笔记——基本视觉格式化
css包含如此开放.如此强大的一个模型,对于这样一个模型,可以有无数种方法结合应用各种属性,可以得到的效果数不胜数. 基本框 css假定每个元素都会生成一个或多个矩形框,这称为元素框.各元素中心有一个 ...
- css细节复习笔记——结构与层叠
每个合法的文档都会生成一个结构树,有了结构树元素的祖先.属性兄弟元素等等创建选择器来选择元素,这是CSS继承的核心.继承是从一个元素向后代元素传递属性值所采用的机制.面向一个元素使用哪些值时,用户代理 ...
- css细节复习笔记——浮动
CSS除了能够改变字体.背景和所有其他属性,还能够完成基本布局任务. div+css通过浮动和定位.盒子模型等技术应用,是最常用的布局方式. 定位的基本思想很简单,它允许定义元素框相对于其正常位置应该 ...
- CSS 框模型——规定了元素框处理元素内容、内边距、边框和外边距的方式
转自:http://www.w3school.com.cn/css/css_boxmodel.asp 要知道在父元素:float, rel, abs位置情况下,box模型的变换情况,请见:http:/ ...
- CSS框模型(框模型概述、内边距、边框、外边距、外边距合并)
CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景. ...
- [04-05]box框模型(Box Model)定义了元素框处理元素内容、内边距、边框和外边距的方式
实际占有的宽 = width + 2padding(内边距) + 2border(边框) + 2margin(外边距) 实际占有的高 = height + 2padding + 2border + 2 ...
- 2 CSS盒子模型&边框&轮廓&外边距&填充&分组嵌套&尺寸&display与visibility
盒子模型 Box Model 所有HTML元素可以看做盒子,CSS模型本质上是一个盒子,封装周围的HTML元素 包括:边距,边框,填充和实际内容 盒子模型允许我们在其他元素和周围元素边框之间的空间放 ...
- padding(内边距)、margin(外边距)、border(边框)
元素的 padding 控制元素内容 content和元素边框 border 之间的距离. 元素的外边距 margin 控制元素边框 border 和元素实际所占空间的距离,如果你将一个元素的 mar ...
随机推荐
- ES6系列_8之函数和数组
1.对象的函数解构 ES6为我们提供了这样的解构赋值使在前后端分离时,后端返回来JSON格式的数据,前端可以直接把这个JSON格式数据当作参数,传递到函数内部进行处理.比如: let json = { ...
- Linux TCP/IP 连接查看和问题解决
netstat -nat|awk '{print awk $NF}'|sort|uniq -c|sort -n 上面的 命令可以帮助分析哪种Tcp状态数量异常 netstat -nat|gr ...
- Git----时光穿梭机之工作区和暂存区03
Git和其他版本控制系统SVN的一个不同之处就是有暂存区的概念 先来看看名词解释 工作区(Working Directory) 就是你在我电脑里能看到的目录,比如我的learngittest文件夹就是 ...
- sqlserver: 使用While 示例
declare @i intset @i = 1999while(@i<2009)begin declare @sql varchar(8000) set @sql = 'update d ...
- 01-E-1: 迭代与递归
- 39. Combination Sum (Back-Track)
Given a set of candidate numbers (C) and a target number (T), find all unique combinations in C wher ...
- pthread_t描述说明
在posix线程api中,通过pthread_self(void) 函数获取当前线程的id 线程id的类型为pthread_t pthread.h 第267行声明了pthread_self (void ...
- Android 实现在Activity中操作刷新另外一个Activity数据列表
做android项目中遇到这样一个问题:有两个acticity,一个显示好友列表,另外一个显示会话列表,现在问题是在会话界面增加一个添加好友功能,添加好友后要求实时的刷新好友列表. 想了想,找了两种方 ...
- Android布局属性说明
Android布局LinearLayout注意设置属性android:orientation属性,否则有的组件可能无法显示. 该属性不设置时默认为horizontal.此时第一个控件的宽度若设置成“f ...
- JavaScript 对象笔记
1. JS 将对象看成是属性的无序集合, 每个属性是一个key/value, 属性名是字符串, 值为任意类型; 对象除了键值对, 还从一个称为 "原型" 的 对象 继承属性(为啥是 ...