从CSS角度来看，页面上每个元素都是一个盒子，不管是块元素还是内敛元素等。而这个盒子由四个部分组成。内容区，补白，边框，边界，下面来介绍下这四种元素。

1 内容

每个元素都是以某些内容开始的，比如文本或图像，这部分内容被放置在一个大小正好能包含它的盒子里。

2 补白（padding）

任何盒子在内容区周围都能有一层补白。补白是可选的，所以不一定会有。可以用补白在盒子的内容和边框之间创建可视的空白，补白是透明的，本身没有颜色或修饰。

3  边框(border)

元素周围可以有边框，并且是可选的。边框包围着补白，因为他是围绕内容的一条线，所以视觉上将内容和同一页上的一起元素分隔开来。边框可以设置宽度，颜色和样式。

4 边界(margin)

边界也是可选的，包围着边框。有了边界，就可以在同一页上的元素之间添加空间。如果两个盒子相邻，边界就相当于他们之间的空间。跟补白一样，边界也是透明的，本身没有

颜色或修饰。

图示

CSS学习之盒子模式的更多相关文章

  1. 【CSS学习】--- 盒子模型

    一.前言:这篇只作为本人的笔记,以后慢慢再补充. 页面中的所有元素都可以被看作一个一个的“盒子”.这些盒子都包含了:内容(content).内边距(padding).边框(border)以及外边距(m ...

  2. CSS学习之盒子模型

    1. 前言 盒子模型,英文即box model.无论是div.span.还是a都是盒子. 但是,图片.表单元素一律看作是文本,它们并不是盒子.这个很好理解,比如说,一张图片里并不能放东西,它自己就是自 ...

  3. CSS学习摘要-盒子模型

    注:全文摘要自网络开发者网站,当然间隔也会整理一些思路和格式排版添加进去. CSS框模型(译者注:也被称为"盒模型")是网页布局的基础 --每个元素被表示为一个矩形的方框,框的内容 ...

  4. CSS学习笔记-盒子阴影及文字阴影

    盒子阴影:    1.格式:        box-shadow:h-shadow v-shadow blur spread color insert;        box-shadow:水平偏移 ...

  5. CSS学习系列1 - CSS中的盒子模型 box model

    css中有一个盒子模型的概念. 主要是用来告诉浏览器如何来计算页面元素的宽度和高度, 比如该元素的宽度/高度 是否包括内边距,边框,外边距.  盒子模型有一个属性box-sizing属性来说明是否包括 ...

  6. web前端学习（三）css学习笔记部分（7）-- 文字和字体相关样式、盒子相关样式、背景与边框相关样式

    12.  文字和字体相关样式 12.1  CSS3 给文字添加阴影 使用 text-shadow 属性给页面上的文字添加阴影效果,text-shadow 属性是在CSS2中定义的,在 CSS2.1 中 ...

  7. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  8. CSS：CSS学习总结

    CSS:CSS学习总结 背景 CSS是一种声明式的语言,学好CSS的难度甚至大于学好一门服务器语言(我个人的感觉),这周在学习CSS,就记录一下学习经验. 1.规则声明顺序 因为CSS的样式具备层叠性 ...

  9. HTML与CSS学习记录

    title: HTML与CSS学习记录 toc: true date: 2018-09-10 14:04:59 <HTML与CSS进阶教程读书笔记> HTML基础知识 HTML与XHTML ...

随机推荐

  1. “typedef int (init_fnc_t) (void);“的含义

    在读uboot的lib_arm/board.c中的start_armboot ()函数遇到了"init_fnc_t **init_fnc_ptr;”一句话,后来查看init_fnt_t数据类 ...

  2. 内网DMZ外网之间的访问规则

    当规划一个拥有DMZ的网络时候,我们可以明确各个网络之间的访问关系,可以确定以下六条访问控制策略. 1.内网可以访问外网 内网的用户显然需要自由地访问外网.在这一策略中,防火墙需要进行源地址转换. 2 ...

  3. UIImage拉伸显示

    下面张图片,是设计来做按钮背景的:  button.png,尺寸为:24x60 现在我们把它用作为按钮背景,按钮尺寸是150x50,以下是没有经过技术性拉伸处理的情况: // 得到view的尺寸   ...

  4. 关于Java（Hello World程序）

    详解 Hello World 应用程序 源码 class HelloWorldApp { public static void main(String[] args) { System.out.pri ...

  5. WebService调用http://www.webxml.com.cn中的一些服务示例

    1.打开http://www.webxml.com.cn网站下的“全部WebService”,会看到如下图的图片 2.点击打开WSDL连接,如下图,并保存为一个后缀名为wsdl文件,放在项目的根目录下 ...

  6. 2.6.2 Notification的功能与用法

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout ...

  7. java学习多线程之卖票示例

    这一节我们来说一个示例就是卖票示例: 需求: 我们现在有100张票,然后分四个窗口来卖,直到卖完为止. 思路: 1.先定一个一个票类,描述票的属性,还有打印卖出的票,并且实现Runnable中的run ...

  8. POJ_2739_Sum_of_Consecutive_Prime_Numbers_(尺取法+素数表)

    描述 http://poj.org/problem?id=2739 多次询问,对于一个给定的n,求有多少组连续的素数,满足连续素数之和为n. Sum of Consecutive Prime Numb ...

  9. Apache Commons IO 2.3 几点用法

    //直接将IO流转成字符串 InputStream in = new URL( "http://jakarta.apache.org" ).openStream(); try { ...

  10. 【转】win7 虚拟机virtualbox中ubuntu12.04安装samba实现文件共享

    原文网址:http://blog.csdn.net/watkinsong/article/details/8878786 昨天心血来潮,又装了个虚拟机,然后安装了ubuntu12.04,为了实现在虚拟 ...