每个HTML元素都可以看作一个装了东西的盒子，盒子具有宽度（width）和高度（height），盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin）。

布局中的主要样式
font
line-height
color
margin
padding
border
text-align
background

 <!--
 每个HTML元素都可以看作一个装了东西的盒子，盒子具有宽度（width）和高度（height），盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin）。
 -->
 <!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>
     #bor{
         width:240px;
         border:1px dashed;
     }
     #main{
         height:200px;
         width:200px;
         margin:20px;
         padding:20px;
         border:1px solid $;
         background:#eaeaea;
     }
     span{
         width:%;
         height:%;
         border:1px dashed red;
         text-align:center;
         padding-top:%;
     }
 </style>
 </head>

 <body>
     <div id="bor">
         <div id="main">
             <span>内容元素</span>
         </div>
     </div>
 </body>
 </html>

HTML的盒子模型的更多相关文章

  1. 谈谈一些有趣的CSS题目（二）-- 从条纹边框的实现谈盒子模型

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  2. JS学习：第二周——NO.3盒子模型

    1.CSS盒子模型包括四个部分组成:设定的宽高+padding+border+margin: 2.JS盒子模型:通过系统提供的属性和方法,来获取当前元素的样式值   JS提供的属性和方法: clien ...

  3. html学习第三天—— 第11章 盒子模型 div

    盒模型--边框(一) 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细.样式和颜色(边框三个属性). 如下面代码为div来设置边框粗细为2px.样式为实心的.颜色为红色的边框: div ...

  4. css 大话盒子模型

    什么是盒子模型? CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content).内边距(padding).边框(border) 和 ...

  5. padding标准盒模型和怪异盒子模型

    我们都知道padding是为块级元素设置内边距 但是在使用过程中,我们却会遇到一些问题.padding的标准盒模型和怪异盒模型 padding盒子模型 我们通过demo来讲这个问题,用文字干讲第一没意 ...

  6. CSS系列：CSS中盒子模型

    盒子模型是CSS控制页面时一个很重要的概念.所有页面中的元素都可以看成是一个盒子,占据着一定的页面空间.可以通过调整盒子的边框和距离等参数,来调节盒子的位置和大小. 1. 盒子的内部结构 在CSS中, ...

  7. 深入理解CSS盒子模型

    在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...

  8. jQuery CSS操作及jQuery的盒子模型

    jQuery CSS-jQuery CSS方法 jQuery CSS-jQuery盒子模型

  9. 盒子模型(W3C盒子模型、IE盒子模型)

    盒子模型:一个物体在页面中所占据的位置 盒子模型包含以下几种元素: padding:margin:content:border 这是大家都知道的,也是书本上定义说明的,但是在ie的情况下是有点区别的; ...

  10. 标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型(转)

    盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版.其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型.他们对盒子模型的解释各不相同,先来看看我们熟知的标准盒子模型: 从上 ...

随机推荐

  1. DOM操作 append prependTo after before

    通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作.但实际上一般开发者都习惯性的先定义好HTML结构,但这样就非常不灵活了. 试想下这样的情况:如果我们通过AJAX获取到数 ...

  2. Java 集合系列 16 HashSet

    java 集合系列目录: Java 集合系列 01 总体框架 Java 集合系列 02 Collection架构 Java 集合系列 03 ArrayList详细介绍(源码解析)和使用示例 Java ...

  3. Java 集合系列 06 Stack详细介绍(源码解析)和使用示例

    java 集合系列目录: Java 集合系列 01 总体框架 Java 集合系列 02 Collection架构 Java 集合系列 03 ArrayList详细介绍(源码解析)和使用示例 Java ...

  4. Hibernate缓存机制

    缓存是介于应用程序和物理数据源之间,其作用是为了降低应用程序对物理数据源访问的频次,从而提高了应用的运行性能.缓存内的数据是对物理数据源中的数据的复制,应用程序在运行时从缓存读写数据,在特定的时刻或事 ...

  5. IE9中Media queries在iframe无效的解决方法

    在css中有5个media querie @media screen and(min-width:0px)and(max-width:319px){ body {background-color:re ...

  6. PHP换行符详解 PHP_EOL，<br />

    1.PHP_EOL:用于文本的换行符,经常用于日志文件记录.可以解决: 在windows中\r\n是换行在Mac中\r是换行在Liunx中\n是换行 不统一的问题. 2. <br /> : ...

  7. Split的应用

    public string qu(string ss) { string s1 = "" ; string[] s = ss.Split(); for (int i = 0; i ...

  8. ros与下位机通信常用的c++ boost串口应用

    一.首先移植c++ boost 库: 1. 先去 Boost官网 下载最新的Boost版本, 我下载的是boost_1_6_0版本, 解压. 2. 进入解压后目录: cd boost_1_6_0, 执 ...

  9. arm-linux-gcc-4.3.2安装步骤

        安装交叉编译工具链: 1.首先以root用户登入 2.复制arm-linux-gcc-4.3.2.tgz到根目录下tmp文件夹里 3.解压命令tar xvzf arm-linux-gcc-4. ...

  10. wp8.1 Study13：在WP8.1中分享文件和数据

    绪论:不同于windows, 在wp8.1中,如果不止一个程序可以接受其Uri或者文件,shell会提供一个界面让用户选择用哪个程序.而在windows中,用户可以在设置那里设置各种文件和Uri的默认 ...