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. The JSP specification requires that an attribute name is preceded by whitespace

    一个jsp页面在本地运行一点问题没有,发布到服务器就报错了: The JSP specification requires that an attribute name is preceded by ...

  2. 谈谈vertical-align的text-bottom和text-top - 韦奕

    学习资料 : http://www.tuicool.com/articles/uuYvMv 友情链接  行高   替换元素,非替换元素,内联元素,块元素

  3. MapReduce实例-NASA博客数据频度简单分析

    环境: Hadoop1.x,CentOS6.5,三台虚拟机搭建的模拟分布式环境,gnuplot, 数据:http://ita.ee.lbl.gov/html/contrib/NASA-HTTP.htm ...

  4. mysql metadata lock(二)

    上一篇<mysql metadata lock(一)>介绍了为什么引入MDL,MDL作用以及MDL锁导致阻塞的几种典型场景,文章的最后还留下了一个小小的疑问.本文将更详细的介绍MDL,主要 ...

  5. 用wget扒站时遇到电信劫持

    今天用wget扒下来一个html template的站. 挂在自己机器上后随便点什么,都出电信广告.仔细检查,我勒个去... 扒站过程中,刚好被电信打了劫,看看它给我下载下来的bootstrap.mi ...

  6. (转,有改动)测试网页响应时间的shell脚本[需要curl支持]

    用法及返回结果如下: [root@myserver01 tmp]# sh test_web.sh -n500 http://www.baidu.com Request url: http://www. ...

  7. 烂泥:CentOS命令学习之tar打包与解压

    本文由秀依林枫提供友情赞助,首发于烂泥行天下. tar命令一般是做打包和解压使用,有关tar命令的使用.我们可以通过帮助文档进行查看,如下: tar –help man tar tar有几个比较重要的 ...

  8. android xml 布局错误(黑掉了)Missing styles. Is the correct theme chosen for this layout?

    发现在调整页面的时候 ,老是报以下错误,导致无法静态显示ui效果. Missing styles. Is the correct theme chosen for this layout? Use t ...

  9. 使用Apache2配置多个站点

      六 27 pache2主配置文件: /etc/apache2/apache2.conf.其最后两行为: # Include the virtual host configurations:Incl ...

  10. linux shell 之 crontab(定时任务)详解

    1.定义: crontab命令常见于Unix和类Unix的操作系统之中,用于设置周期性被执行的指令.该命令从标准输入设备读取指令,并将其存放于“crontab”文件中,以供之后读取和执行.该词来源于希 ...