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 ...
随机推荐
- selenium+python自动化81-html报告优化(饼图+失败重跑+兼容python2&3)
优化html报告 为了满足小伙伴的各种变态需求,为了装逼提升逼格,为了让报告更加高大上,测试报告做了以下优化: 测试报告中文显示,优化一些断言失败正文乱码问题 新增错误和失败截图,展示到html报告里 ...
- django内置html模板的extends和include,模板标签{{ ex }}
base.html内容 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- windows下使用 ApiGen 生成php项目的开发文档
之前使用 PHPDocument 生成过开发文档,但是界面看着不爽,遂尝试了 ApiGen 生成,不得不说界面看着舒服多了,下面说说安装和使用的方法. ApiGen官网: http://www.api ...
- JVM 调优参数设置
先看Linux内存大小(假设为2G) cat /proc/meminfo |grep MemTotal 查看java初始配置 java -XX:+PrintFlagsInitial Tomcat配置 ...
- Installing Eclipse Plug-ins from an Update Site with a self-signed certificate
If you try and connect to a p2 repository on a server with a self-signed cert, you will more than li ...
- 使用opencv3+python实现视频运动目标检测
本文主要实现了伯乐在线上的一个实践小项目,原文链接,用以巩固opencv视频操作知识内容.整个项目均有代码注释,通俗易懂,短短几十行就可以达到还算不错的实现效果,做起来成就感满满哒.打开编辑器,一起来 ...
- linux 使用systemctl 启动服务报错: Error: No space left on device
By default, Linux only allocates 8192 watches for inotify, which is ridiculously low. And when it ru ...
- git的基础操作-入门
本文是根据廖雪峰的git教程写的笔记:https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b0 ...
- 107. Binary Tree Level Order Traversal II(Tree, WFS)
Given a binary tree, return the bottom-up level order traversal of its nodes' values. (ie, from left ...
- iOS App图标和启动画面尺寸
注意:iOS所有图标的圆角效果由系统生成,给到的图标本身不能是圆角的. 1. 桌面图标 (app icon) for iPhone6 plus(@3x) : 180 x 180 for iPhone ...