每个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. Compound Interest Calculator2.0

    Compound Interest Calculator2.0 1.如果按照单利计算,本息又是多少呢? 2.假如30年之后要筹措到300万元的养老金,平均的年回报率是3%,那么,现在必须投入的本金是多 ...

  2. 初学java之StringBuffer类的常用方法

    import java.text.*; public class Gxjun { public static void main(String atgs[]) { StringBuffer str= ...

  3. Text Justification [LeetCode]

    Problem Description:http://oj.leetcode.com/problems/text-justification/ Note: Just be careful about ...

  4. C# 获取当前星期几三种实现方法（转）

    获取当前星期几实现这个功能有多种方法,接下来将列出3种供你参考,感兴趣的你可不要错过了哈,希望本文所提供的知识点对你有所帮助 第一种: string[] Day = new string[] { &q ...

  5. MVC 特殊字符的显示

    @(new HtmlString(HttpUtility.HtmlDecode(GPDetail.SimpleDescription)))

  6. 20145236 冯佳 《Java程序设计》第3周学习总结

    20145236 <Java程序设计>第3周学习总结 教材学习内容总结 第四章 认识对象 一.面向对象和面向过程 •面向对象是相对面向过程而言 •面向对象和面向过程都是一种思想 •面向过程 ...

  7. 今天同事给介绍了一个LINQ的工具，LINQPad

    今天刚知道LINQPad,详细信息参照http://www.linqpad.net/,免费下载,安装之后样子如下所示,根据向导,链接上本地数据库,比较熟悉的操作风格. 对LINQ的了解太浅,还没有更多 ...

  8. 5月4日课堂内容：for循环的穷举、迭代

    一.for循环拥有两类: 1.穷举: 把所有可能的情况都走一遍,使用if条件筛选出来满足条件的情况. 2.迭代: 从初始情况按照规律不断求解中间情况,最终推导出结果. 二.穷举练习 1.单位给发了一张 ...

  9. 尽量少用Include

    当我们使用EF写查询,尤其是关联到多个表的时候,我们一般习惯使用include关联,但是过多地使用include会带来性能问题.作为替代方法,可以使用多个toList来代替. 改造前:

  10. 谈谈CSS的布局，display、position、float

    前言 前端一直是我的一个很大的缺憾,这段时间痛顶思痛,决定好好的把前台的东西加强,这不,在学习了一段时间js之后,在做一些小练习,却发现最基本的一些css知识却还不了解,所以便有了这篇博文. 块级元素 ...