每个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. HTML5自学笔记[ 1 ]新增标签

    新增语义化标签 <header></header>: 用于页面或板块头部. <footer></footer>:用于页面底部. <nav>& ...

  2. hduoj------2594 Simpsons’ Hidden Talents

    Simpsons’ Hidden Talents Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java ...

  3. (转)mysql的增删改查

    MySQL数据库的增删改查. 1,首先启动mysql数据库的服务,在运行的窗口中输入:net start mysql,这样,就可 以启动mysql数据库的服务,同理,输入net stop mysql, ...

  4. discuzx3.1中引用 Jquery报错的解决办法

    我们可以引用jQuery给JQ赋予一个变量var jq = jQuery.noConflict(); 修改成为:<script type="text/javascript"& ...

  5. 强大的Resharp插件

    使用VS有段时间了,一直深深的折服于其强大的功能.之前一直听说有Resharp这个工具,小猪一直也没有太在意.直到今天…… 下载安装: http://www.jetbrains.com/resharp ...

  6. JS桌面应用

    一.图片预加载 var oImg = new Image(); oImg.onload=function(){ //alert('success'); } oImg.onerror=function( ...

  7. 求x^0+x^1+x^2+.......x^n mod p； x，n，p<=10^9

    方法一:快速幂.但是肯定还是超时. 方法二:利用等比数列公式,但是有除法,做不下去了. 方法三:有点分治的味道.. n为偶数时,x^0+x^1+x^2+.......x^n=(x^0+x^1+x^2+ ...

  8. Windows8 10设置程序为 系统默认浏览器

    从win8 开始,MS修改了文件和协议的关联方式,普通的注册表修改是无效的. 必须使用组策略(group policy )对象GP才行. http://blogs.technet.com/b/mrml ...

  9. SharePoint 2013 Nintex Workflow 工作流帮助（十二）

    博客地址 http://blog.csdn.net/foxdave 工作流动作 31. Create task(User interaction分组,企业版才有) 该操作用于在Microsoft Ex ...

  10. Linear Predictors

    In this chapter we will study the family of linear predictors, one of the most useful families of hy ...