CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式...

CSS 框模型概述

术语翻译
element : 元素。
padding : 内边距，也有资料将其翻译为填充。
border : 边框。
margin : 外边距，也有资料将其翻译为空白或空白边。
在 w3school，我们把 padding 和 margin 统一地称为内边距和外边距。边框内的空白是内边距，边框外的空白是外边距，很容易记吧：）

1 CSS 内边距
1.1
CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。
例如，如果您希望所有 h1 元素的各边都有 10 像素的内边距，只需要这样：
h1 {padding: 10px;}
您还可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值：
h1 {padding: 10px 0.25em 2ex 20%;}
1.2 单边内边距属性
也通过使用下面四个单独的属性，分别设置上、右、下、左内边距：
padding-top
padding-right
padding-bottom
padding-left
您也许已经想到了，下面的规则实现的效果与上面的简写规则是完全相同的：
h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}

<html><head><style type="text/css">td {padding-bottom: 2cm}</style></head>

<body><table border="1"><tr><td>这个表格单元拥有下内边距。</td></tr></table></body>

</html>

2 CSS 边框
元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。 CSS border 属性允许你规定元素边框的样式、宽度和颜色。
p.dotted {border-style: dotted}

2.1 边框的样式
值描述
none 定义无边框。
hidden 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted 定义点状边框。在大多数浏览器中呈现为实线。
dashed 定义虚线。在大多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。双线的宽度等于 border-width 的值。
groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。
inset 定义 3D inset 边框。其效果取决于 border-color 的值。
outset 定义 3D outset 边框。其效果取决于 border-color 的值。
inherit 规定应该从父元素继承边框样式。
2.2 定义单边样式
如果您希望为元素框的某一个边设置边框样式，而不是设置所有 4 个边的边框样式，可以使用下面的单边边框样式属性：
border-top-style border-right-style border-bottom-style border-left-style
2.3 定义多种样式
您可以为一个边框定义多个样式，例如： p.aside {border-style: solid dotted dashed double;} 上面这条规则为类名为 aside 的段落定义了四种边框样式：实线上边框、点线右边框、虚线下边框和一个双线左边框。

2.3 边框的宽度
您可以通过 border-width 属性为边框指定宽度。

p {border-style: solid; border-width: 5px;}
或者：
p {border-style: solid; border-width: thick;}

定义单边宽度
您可以按照 top-right-bottom-left 的顺序设置元素的各边边框：
p {border-style: solid; border-width: 15px 5px 15px 5px;}
上面的例子也可以简写为（这样写法称为值复制）：
p {border-style: solid; border-width: 15px 5px;} （第一个15表示上下，第二个15表示左右）
您也可以通过下列属性分别设置边框各边的宽度：
border-top-width
border-right-width
border-bottom-width
border-left-width

2.3 边框的颜色
2.3.1设置边框颜色非常简单。CSS 使用一个简单的 border-color 属性，它一次可以接受最多 4 个颜色值。
可以使用任何类型的颜色值，例如可以是命名颜色，也可以是十六进制和 RGB 值：

p {
border-style: solid;
border-color: blue rgb(25%,35%,45%) #909090 red;
}
值描述
color_name 规定颜色值为颜色名称的边框颜色（比如 red）。
hex_number 规定颜色值为十六进制值的边框颜色（比如 #ff0000）。
rgb_number 规定颜色值为 rgb 代码的边框颜色（比如 rgb(255,0,0)）。
transparent 默认值。边框颜色为透明。
inherit 规定应该从父元素继承边框颜色。

2.3.2 定义单边颜色
还有一些单边边框颜色属性。它们的原理与单边样式和宽度属性相同：
border-top-color
border-right-color
border-bottom-color
border-left-color

3 CSS 外边距
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。
3.1
设置外边距的最简单的方法就是使用 margin 属性。
margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em。下面的声明在 h1 元素的各个边上设置了 1/4 英寸宽的空白： h1 {margin : 0.25in;}
下面的例子为 h1 元素的四个边分别定义了不同的外边距，所使用的长度单位是像素 (px)：
h1 {margin : 10px 0px 15px 5px;}
与内边距的设置相同，这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的：
margin: top right bottom left
另外，还可以为 margin 设置一个百分比数值：
p {margin : 10%;}

3.2 单边外边距属性
您可以使用下列任何一个属性来只设置相应上的外边距，而不会直接影响所有其他外边距：
margin-top
margin-right
margin-bottom
margin-left

CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式...相关推荐

1、CSS 框模型概述（盒模型）
CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框和外边距的方式. CSS 框模型概述不同部分的说明: Margin(外边距) - 清除边框外的区域,外边距是透明的 ...
CSS 框模型——规定了元素框处理元素内容、内边距、边框和外边距的方式
转自:http://www.w3school.com.cn/css/css_boxmodel.asp 要知道在父元素:float, rel, abs位置情况下,box模型的变换情况,请见:http:/ ...
CSS 框模型元素框处理元素内容、内边距、边框和外边距的方式
CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框和外边距的方式元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的 ...
CSS边框、边距、轮廓（边框宽度/颜色/各边/简写属性/圆角边框/内外边距/高度宽度/框模型/轮廓宽度/颜色/属性/偏移）——万字长文|一文搞懂
目录 CSS边框 CSS 边框属性 CSS 边框样式实例 CSS 边框宽度实例特定边的宽度实例 CSS 边框颜色实例特定边框的颜色实例 HEX 值实例 RGB 值实例 HSL 值实 ...
[04-05]box框模型(Box Model)定义了元素框处理元素内容、内边距、边框和外边距的方式...
实际占有的宽 = width + 2padding(内边距) + 2border(边框) + 2margin(外边距) 实际占有的高 = height + 2padding + 2border + 2 ...
记录--有关CSS盒模型之内边距、边框、外边距的十九问题
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助本篇文章主要探讨盒模型,以及内边距.边框.外边距的面试题与思考,也希望您能把您的思考和遇到的问题以评论的方式补充下,后期,我将会补充到文章 ...
CSS盒模型之内边距、边框、外边距十九问（持续更新）
第一问:什么是盒模型? 第二问:两者的区别是什么? 第三问:怎么设置这两种模型呢? 第四问JS怎么获取和设置盒模型的宽高呢,你能想到几种方法第五问:描述一下下面盒子的大小,颜色什么的(content ...
Css中内边距、边框和外边距的关系
CSS 框模型元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素. 内边距.边框和外边 ...
div默认外边距是多少_CSS盒模型之内边距、边框、外边距十九问（持续更新）...
第一问:什么是盒模型? 第二问:两者的区别是什么? 第三问:怎么设置这两种模型呢? 第四问JS怎么获取和设置盒模型的宽高呢,你能想到几种方法第五问:描述一下下面盒子的大小,颜色什么的(content ...

CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式...

CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式...相关推荐

最新文章

热门文章

CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式...

CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式...相关推荐

最新文章

热门文章

CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式...

CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式...相关推荐