定义：每个盒子都有：边界、边框、填充、内容四个属性；
每个属性都包括四个部分：上、右、下、左；这四部分可同时设置，也可分别设置；里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。
案例代码：
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>盒子模型的演示</title>

    <style type="text/css">

    body{

    margin:0 0 0 0;

    font-family:宋体;

    font-size:12px;

    }

      ul {

        background: #ddd;

        margin: 15px 15px 15px 15px;

        padding: 5px 5px 5px 5px;

                                     /* 没有设置边框 */

      }

      li {

        color: black;                /* 黑色文本 */

        background: #aaa;            /* 浅灰色背景 */

        margin: 20px 20px 20px 20px; /* 左侧外边距为0，其余为20像素*/

        padding: 10px 0px 10px 10px; /* 右侧内边距为0，其余10像素 */

        list-style: none             /* 取消项目符号 */

                                     /* 未设置边框 */

      }

      li.withborder {

        border-style: dashed;

        border-width: 5px;           /* 设置边框为2像素 */

        border-color: black;

        margin-top:20px；

      }

    </style>

  </head>

  <body>

    <ul>

      <li>第1个列表的第1个项目内容</li>

      <li class="withborder">第1个列表的第2个项目内容，内容更长一些，目的是演示自动折行的效果。</li>

    </ul>

    <ul>

      <li>第2个列表的第1个项目内容</li>

      <li class="withborder">第2个列表的第2个项目内容，内容更长一些，目的是演示自动折行的效果。</li>

    </ul>

  </body>

</html>
说明：这里采用的是ul li布局。
内容（CONTENT）就是盒子里装的东西；
而填充(PADDING)就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；
边框(BORDER)就是盒子本身了；至于边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。

css案例学习之盒子模型的更多相关文章

  1. css的两种盒子模型

    css的两种盒子模型:W3C标准盒子模型.IE盒子模型 两者的相同之处:都包含margin.border.padding.content 两者的不同之处:W3C标准盒子模型的content部分不包含其 ...

  2. ArcGIS案例学习笔记2_2_模型构建器和山顶点提取批处理

    ArcGIS案例学习笔记2_2_模型构建器和山顶点提取批处理 计划时间:第二天下午 背景:数据量大,工程大 目的:自动化,批处理,定制业务流程,不写程序 教程:Pdf/343 数据:chap8/ex5 ...

  3. CSS Box Model（盒子模型）

    CSS Box Model(盒子模型) 一.简介 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封 ...

  4. [CSS属性设置，盒子模型，网页布局]

    [CSS属性设置,盒子模型,网页布局] CSS属性设置 1. 宽和高 width:属性可以为元素设置宽度. height:属性可以为元素设置高度. 块级标签的宽度不修改的情况下默认占浏览器的一整行,块 ...

  5. css笔记17：盒子模型加强版的案例

    1.先看看经典案例效果图,导出思路: 分析:思路 基本结构 <div> <ul> <li><img src=""/> </li ...

  6. css笔记16：盒子模型的入门案例

    1.案例一: 效果图如下: (1)box1.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...

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

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

  8. CSS学习之盒子模型

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

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

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

随机推荐

  1. iphone iOS7恢复到iOS6教程

    步骤一:首先根据您iOS设备型号,下载最新的iOS 6固件,您可以进入苹果官网下载,也可以以下网址下载. http://sj.zol.com.cn/ios613/

  2. 字符串水题（hdoj1049）

    Problem Description Password security is a tricky thing. Users prefer simple passwords that are easy ...

  3. Git学习01 －－git add, git commit , git log ,git status, git reset --hard, head

    Git官方提供的快速入门教程:https://try.github.io/levels/1/challenges/1 特点:Git极其强大的分支管理:分布式版本 集中式版本控制系统,版本库是集中存放在 ...

  4. jquery实现导航栏鼠标点击后实行背景高亮，点击离开恢复（超级简单！！！！），jquery导航栏

    1.header部分要引入Jquery <asp:Content ID="HeaderContent" runat="server" ContentPla ...

  5. ASP.NET 短路由配置

    1. 首先在项目新建文件叫App_Code或者App_Start 在文件中新建WebFromRouteHandler.cs 文件. WebFromRouteHandler中的代码如下, public  ...

  6. GDAL库学习笔记(1)：无缝拼接Google卫星图

    开工之前要先了解一下瓦片地图,瓦片地图金字塔模型是一种多分辨率层次模型,从瓦片金字塔的底层到顶层,分辨率越来越低,但表示的地理范围不变.实现原理就是,首先确定地图服务平台所要提供的缩放级别的数量N,把 ...

  7. 从HCE的各种问题 讨论未来趋势

    为了能让NFC手机支持NFC支付,维萨公司和万事达公司宣布了对HCE的研发,并且将很快推出最新的HCE规范.从2012年末,我一直在关注关于HCE的相关信息,其原因是由于我们公司参与了名为Simply ...

  8. Inno Setup：获取isl中的多国语言字串

    原文 http://zwkufo.blog.163.com/blog/static/25882512010101041626803/?suggestedreading&wumii 用InnoS ...

  9. COCI 2015/2016 Day 8 PROKLETNIK

    PROKLETNIK 题目描述:给出\(n\)个数,定义一段连续的数为魔法串是该区间的左右端点值正好是区间的最小值与最大值(最小值可以在左也可以在右,最大值也一样).\(Q\)个询问,每次询问一个区间 ...

  10. Android开发之自定义圆角矩形图片ImageView的实现 - Jamy Cai

    android中的ImageView只能显示矩形的图片,这样一来不能满足我们其他的需求,比如要显示圆角矩形的图片,这个时候,我们就需要自定义ImageView了,其原理就是首先获取到图片的Bitmap ...