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. [转]MOSS通过此命令注册模板,web应用程序可以根据stp模块生成网站集

    注:C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\bin          stsadm –o add ...

  2. 如何更好的通过Inflate layout的方式来实现自定义view

    本篇文章讲的是如何用现有控件产生一个组合控件的方法,十分简单实用.现在开始! 一.需求 我们要实现一个有红点和文字的按钮控件,就像下面这样: 二.实现 我的思路是让一个button和一个textvie ...

  3. 动态改变actionbar上menu的图标

    工作中遇到了一个需求是,在滚动的时候让actionbar上的图标进行变色.实现后在这里总结下思路. 一.先在主题中定义好Actionbar的style <style name="App ...

  4. 【代码笔记】iOS-判断textField里面是否有空

    一,效果图. 二,工程图. 三,代码. ViewController.m - (void)viewDidLoad { [super viewDidLoad]; // Do any additional ...

  5. C++语言-09-多任务

    概述 概念 计算机同时运行多个程序的能力,多任务处理的方法是:运行第一个程序的一段代码,保存工作环境:再运行第二个程序的一段代码,保存工作环境:--恢复第一个程序的工作环境,执行第一个程序的下一段代码 ...

  6. 关于jquery跨域请求方法

    转载 http://www.cnblogs.com/benwu/archive/2012/12/25/2832981.html 项目中关于ajax jsonp的使用, 出现了问题:可以成功获得请求结果 ...

  7. samba服务配置

    使用yum或者apt-get安装 # yum install samba samba-client samba-swat Samba开发环境配置 Acl权限设置  [不是必须.只要保证web目录的所有 ...

  8. Java基础知识学习(八)

    IO操作 5个重要的类分别是:InputStream.OutStream.Reader.Writer和File类 面向字符的输入输出流 输入流都是Reader的子类, CharArrayReader ...

  9. yii2 输出xml格式数据

    作者:白狼 出处:http://www.manks.top/yii2_xml_response.html.html本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文 ...

  10. HTML基础(二)——表单,图片热点,网页划区和拼接

    一.表单 <form id="" name="" method="post/get" action="负责处理的服务端&qu ...