HTML的盒子模型
每个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的盒子模型的更多相关文章
- 谈谈一些有趣的CSS题目（二）-- 从条纹边框的实现谈盒子模型
开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...
- JS学习：第二周——NO.3盒子模型
1.CSS盒子模型包括四个部分组成:设定的宽高+padding+border+margin: 2.JS盒子模型:通过系统提供的属性和方法,来获取当前元素的样式值 JS提供的属性和方法: clien ...
- html学习第三天—— 第11章 盒子模型 div
盒模型--边框(一) 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细.样式和颜色(边框三个属性). 如下面代码为div来设置边框粗细为2px.样式为实心的.颜色为红色的边框: div ...
- css 大话盒子模型
什么是盒子模型? CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content).内边距(padding).边框(border) 和 ...
- padding标准盒模型和怪异盒子模型
我们都知道padding是为块级元素设置内边距 但是在使用过程中,我们却会遇到一些问题.padding的标准盒模型和怪异盒模型 padding盒子模型 我们通过demo来讲这个问题,用文字干讲第一没意 ...
- CSS系列：CSS中盒子模型
盒子模型是CSS控制页面时一个很重要的概念.所有页面中的元素都可以看成是一个盒子,占据着一定的页面空间.可以通过调整盒子的边框和距离等参数,来调节盒子的位置和大小. 1. 盒子的内部结构 在CSS中, ...
- 深入理解CSS盒子模型
在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...
- jQuery CSS操作及jQuery的盒子模型
jQuery CSS-jQuery CSS方法 jQuery CSS-jQuery盒子模型
- 盒子模型(W3C盒子模型、IE盒子模型)
盒子模型:一个物体在页面中所占据的位置 盒子模型包含以下几种元素: padding:margin:content:border 这是大家都知道的,也是书本上定义说明的,但是在ie的情况下是有点区别的; ...
- 标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型(转)
盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版.其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型.他们对盒子模型的解释各不相同,先来看看我们熟知的标准盒子模型: 从上 ...
随机推荐
- 小而美的js程序
1.获取数字数组最小值的索引 function _getMinKey(arr) { var a = arr[0]; var b = 0; for (var k in arr) { if (arr[k] ...
- js一些题目
假期在家,看到的,昨天看了下: 原文链接:http://wwwcqamin.duapp.com/?p=102#comment-7 请说出下面程序的输出结果 第一题: 1 2 3 4 5 6 7 8 9 ...
- hdu-----（1150）Machine Schedule（最小覆盖点）
Machine Schedule Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- HDUOJ------3336 Count the string(kmp)
D - Count the string Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64 ...
- springMvc配置编码过滤器
在web.xml中配置 <!-- 编码过滤器 --> <filter> <filter-name>characterEncodingFilter</filte ...
- 用Google Analytics跟踪JavaScript Errors （译）
通过custom events来实施 // Track basic JavaScript errors window.addEventListener('error', function(e) { _ ...
- 并发容器之CopyOnWriteArrayList
原文链接: http://ifeve.com/java-copy-on-write/ Copy-On-Write简称COW,是一种用于程序设计中的优化策略.其基本思路是,从一开始大家都在共享同一个内容 ...
- php 应用 cpu 100% 调试方法
找出进程占用cpu高的原因. 进程占用cpu高,一般是由于进程长时间占用cpu,又没有主动释放占用.如果想主动释放cpu,可以调用sleep.在写程序的时候,尤其要注意while 等循环的地方. 找出 ...
- Linux常用的一些命令
linux 关闭防火墙命令 servers iptables stop 关闭 servers iptables status 状态 servers iptables restart 重启 关闭 ...
- SPOJ 10628 求树上的某条路径上第k小的点
第k小,很容易会想到用主席树来解决 这里简单想一下树的转移过程 因为本身无向图形成一棵树,那么我们总以1为根,那么之后连下去的边对应的点建立的线段树总是在父亲节点对应的树上加上一个当前点对应位置出现的 ...