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


CSS框模型概述

可以用下面的模型图概述

aaarticlea/png;base64,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" alt="" />

元素框的最内部分是实际的内容 直接包围内容的是内边距 内边距呈现了元素的背景 内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此 不会遮挡其后的任何元素。

提示:背景应用于由内容和内边距 边框组成的区域。

内边距 和 外边距都是可以选的 默认值是0 但是许多元素将由用户代理样式表设置外边距和内边距  可以通过将元素的margin 和 padding 设置为零来覆盖这些浏览器的样式 这可以分别进行 也可以使用通用选择器对所有的元素进行设置。

*{

    padding:0;
margin:0;
}

在CSS中 width 和 height 指的是内容区域的宽度和高度。增加内边距 边框 和 外边距 不会影响内容区域的尺寸。但是会增加元素框的总尺寸。

假设框的每个边上有10个像素的外边距和5个像素的内边距 如果希望这个元素框达到00个像素 就需要将内容的宽度设置为70像素。如下图所示。

#box {
width: 70px;
margin: 10px;
padding: 5px;
}

提示:内边距、边框和外边距可以应用于一个元素的所有边,也可以应用于单独的边。
提示:外边距可以是负值,而且在很多情况下都要使用负值的外边距。

CSS内边距

元素的内边距在边框和内容区之间。控制该区域最简单的属性就是padding属性

CSS padding属性定义元素边框与元素内容之间的空白区域。


CSS padding 属性

CSS padding 属性定义元素的内边距  padding属性接受长度值或者 百分比 但不允许出现负值

例如 你希望所有h1元素的各边都有10像素的内边距 只需要这样

h1 {padding: 10px;}

你还可以按照 上 右 下 左的顺序分别设置各边的内边距 各边均可以使用不同的单位或百分比值:

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

单边内边距属性:

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

padding-top //上内边距

padding-right //右边的内边距

padding-bottom//下边的内边距

padding-left// 左边的内边距

内边距的百分比数值

百分比数值是相对于其父元素的width计算的 这一点与外边距一样 所以 如果父元素的width改变 他们也会跟着改变。

CSS内边距实例:

1:所有内边距属性在一个声明中

<html>
<head>
<meta charset="UTF-8">
<title>链接</title>
<style type="text/css">
table td.text1 {
padding: 1.5em;
}
table td.test2 {
padding: 0.5em 2.5em;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td class="text1">这个表格单元的每个边拥有相等的内边距</td>
</tr>
</table> <table border="1">
<tr>
<td class="test2">这个单元格的上和下边距是0.5em 左右边距是2.5em</td>
</tr>
</table>
</body>
</html>

如果想要保持一个盒子的占有宽度不变,那么加width就要减padding 加padding就要减width

padding的区域有背景颜色 也就是说background-color 将填充所有board以内的区域

HTML 学习笔记 CSS样式(框模型)的更多相关文章

  1. Html和Css学习笔记-css进阶-盒模型

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签 ...

  2. HTML 学习笔记 CSS样式(定位)

    CSS定位(Positioning)属性 允许你对元素进行定位. CSS定位和浮动 CSS为定位和浮动提供了一些属性,利用这些属性 可以建立列式布局,将布局的一部分与另一部分重叠.还可以完成多年来通常 ...

  3. HTML 学习笔记 CSS样式(相对定位 绝对定位)

    CSS相对定位 设置为相对定位(relative)的元素会偏移某个距离.元素仍保持其未定位前的形状,他原本所占的空间仍然保留 CSS相对定位 相对定位是一个非常容易掌握的概念,如果对一个元素进行相对定 ...

  4. HTML 学习笔记 CSS样式(边框)

    元素的边框(border)是围绕元素内容和内边距的一条或多条线 CSS border 属性允许你规定边框的样式 宽度和颜色 CSS 边框 在 HTML 中,我们使用表格来创建文本周围的边框,但是通过使 ...

  5. HTML 学习笔记 CSS样式(链接)

    我们能够以不同的方法为链接设置样式. 设置链接的样式 能够设置链接样式的 CSS 属性有很多种(例如 color, font-family, background 等等).链接的特殊性在于能够根据它们 ...

  6. HTML 学习笔记 CSS样式(字体)

    css字体属性定义文本的字体系列 大小 加粗 风格 和 变形(如小型大写字母(类似于大写字母字体变小了)) css字体系列 在css中 有两种不同类型的字体系列名称 1.通用字体系列 - 拥有相似外观 ...

  7. HTML 学习笔记 CSS样式(文本)

    CSS文本属性可以定义文本的外观 通过文本属性 您可以改变文本的颜色 字符间距 文本对齐装饰文本 对文本进行缩进等等. 缩进文本 把web页面上的段落的第一行缩进,这是最常用的文本格式化效果. css ...

  8. HTML 学习笔记 CSS样式(简介和语法)

    CSS概述 CSS指层叠样式表(Cascading Style Sheets) 样式定义如何显示HTML元素 样式通常存储在样式表中 把样式添加到HTML4.0中 是为了解决内容与表现分离的问题 外部 ...

  9. HTML 学习笔记 CSS样式(外边框 外边框合并)

    CSS外边距 围绕在元素边框的空白区域就是外边距  设置外边距会在元素外创建额外的空白 设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位.百分数值甚至负值. CSS ma ...

随机推荐

  1. UILabel用法

    // UILabel -> UIView // UILabel用来显示文字内容 //创建一个Label,一般都直接通过initWithFrame确定位置跟大小 UILabel *lb = [[U ...

  2. XMLA ODBO 以及OLAP服务提供者自定义的协议,我们如何选择

    参考 SAP给他的客户的帮助<ODBO, BAPI and XMLA - Sap>   SAP BW 提供的查询接口: 接口 查询语言 调用接口 OS平台 客户端开发 ODBO MDX C ...

  3. VS2015 Git 插件使用教程

    VS2015 中继承了 Git 插件,再也不用下载 Github for Windows了. 从 团队-管理连接  中打开 团队资源管理器 克隆Repository 在 本地 Git 存储库下面点击 ...

  4. HashMap常用方法

    当需要对元素进行计数时,HashMap非常有用,如下例子,统计一个字符串中每个字符出现的次数: package simplejava; import java.util.HashMap; import ...

  5. JavaSpring

    http://www.cnblogs.com/suoning/p/5656403.html   1.序列化 JSON.stringify(obj)   序列化 JSON.parse(str)     ...

  6. 每日Scrum(6)

    今天是小组正式冲刺的第六天,软件的各种结尾工作,还有一些模块就已经全部实现了: 遇到的问题主要是对于自己能力的担忧,以前总是想,如果自己努力,就会怎样成功,其实并不是那样,小小的距离就是很远的能力差距 ...

  7. VS 2013中的新特性browser link

    Browser Link是连接VS和浏览器之间的通道.有了这个特性,web程序就能够和VS交互传递数据.这个特性在VS2013中是默认开启的.当开启了Browser Link, web程序运行的时候, ...

  8. Java Se:自定义ClassLoader

    JVM是如何知道java.lang包中的类的?JVM又是如何知道我们应用中的类的?我们的应用中明明是有某个类, 但是JVM却抛出ClassNotFoundException,这是为什么?XxxImpl ...

  9. 烂泥:yum的使用及配置

    本文由秀依林枫提供友情赞助,首发于烂泥行天下. 最近由于服务器需求,需要在公司内网搭建内网yum源. 搭建内网yum源需要分以下几个步骤,如下: 1. yum是什么 2. repo文件是什么 3. r ...

  10. 在eclipse中使用maven创建springMVC项目

    一.在eclipse中创建maven-archetype-webapp项目: 1.新建项目选择maven项目 2.默认,下一步 3.选择maven-archetype-webapp,其他保持默认即可 ...