首页 / CSS / CSS框模型

CSS框模型

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了CSS框模型，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4137字，纯文字阅读大概需要6分钟。

内容图文

CSS 框模型

  • CSS 框模型概述
  • CSS 内边距
  • CSS 边框
  • CSS 外边距
  • CSS 外边距合并

一，CSS 框模型 (Box Model)

规定元素框处理元素内容、内边距、边框 和 外边距 的方式。

如下图所示：

CSS框模型 - 文章图片

二，CSS padding属性

CSS padding 属性定义元素边框与元素内容之间的空白区域。padding 属性接受长度值或百分比值，但不允许使用负值。

可以直接设置四个方向（上，右，下，左）的内边距：

h1 {padding: 10px;}  
  
或者

h1 {padding: 10px 0.25em 2ex 20%;}

也可通过使用下面四个单独的属性，分别设置上、右、下、左内边距：

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

内边距的百分比数值

前面提到过，可以为元素的内边距设置百分数值。百分数值是相对于其父元素的 width 计算的，这一点与外边距一样。所以，如果父元素的 width 改变，它们也会改变。

下面这条规则把段落的内边距设置为父元素 width 的 10%：

p {padding: 10%;}

例如：如果一个段落的父元素是 div 元素，那么它的内边距要根据 div 的 width 计算。

<div style="width: 200px;">
<p>This paragragh is contained within a DIV that has a width of 200 pixels.</p>
</div>

注意：上下内边距与左右内边距一致；即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。

默认值： 0
继承性： no
版本： CSS1
JavaScript 语法： object.style.padding="10px 5px"

可能的值

值描述
auto 浏览器计算内边距。
length 规定以具体单位计的内边距值，比如像素、厘米等。默认值是 0px。
% 规定基于父元素的宽度的百分比的内边距。
inherit 规定应该从父元素继承内边距。

三，CSS 边框属性

CSS border 属性允许你规定元素边框的样式(border-style)、宽度(border-width)和颜色(border-color)。（如果有可见背景的话，元素的背景会延伸到边框区域，因为元素的背景是内容、内边距和边框区的背景）

既可以直接定义边框的样式、宽度、颜色，也可以定义单边样式、宽度、颜色。如下图所示：

属性描述
border 简写属性，用于把针对四个边的属性设置在一个声明。
border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。
border-left 简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color 设置元素的左边框的颜色。
border-left-style 设置元素的左边框的样式。
border-left-width 设置元素的左边框的宽度。
border-right 简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color 设置元素的右边框的颜色。
border-right-style 设置元素的右边框的样式。
border-right-width 设置元素的右边框的宽度。
border-top 简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color 设置元素的上边框的颜色。
border-top-style 设置元素的上边框的样式。
border-top-width 设置元素的上边框的宽度。

四，CSS margin属性

围绕在元素边框的空白区域是外边距（默认是空白的。设置外边距会在元素外创建额外的“空白”。

设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。

可以直接设置四个方向（上，右，下，左）的外边距：

h1 {margin: 10px;}  
  
或者

h1 {margin: 10px 0.25em 2ex 20%;}

也可以使用下列任何一个属性来只设置相应上的外边距，而不会直接影响所有其他外边距：

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

默认值： 0
继承性： no
版本： CSS1
JavaScript 语法： object.style.margin="10px 5px"

可能的值

值描述
auto 浏览器计算外边距。
length 规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。
% 规定基于父元素的宽度的百分比的外边距。
inherit 规定应该从父元素继承外边距。

下面介绍：外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。（ps:只有普通文档流中块框的垂直外边距才会放生外边距合并，行内框、浮动框或绝对定位框之间的外边距不会合并。）

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：

CSS框模型 - 文章图片

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：

CSS框模型 - 文章图片

尽管看上去有些奇怪，但是外边距甚至可以与自身发生合并。

假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：

CSS框模型 - 文章图片

如果这个外边距遇到另一个元素的外边距，它还会发生合并：

CSS框模型 - 文章图片

这就是一系列的段落元素占用空间非常小的原因，因为它们的所有外边距都合并到一起，形成了一个小的外边距：

CSS框模型 - 文章图片

内容总结

以上是互联网集市为您收集整理的CSS框模型全部内容，希望文章能够帮你解决CSS框模型所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/394787.html

来源：【匿名】