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 盒子模型.他们对盒子模型的解释各不相同,先来看看我们熟知的标准盒子模型: 从上 ...
随机推荐
- hdu-------1081To The Max
To The Max Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total ...
- IE中JavaScript 的异常处理
错误类型 编程中我们会遇到四种错误:编译错误.逻辑错误.输入/验证错误.运行时错误,但是在JavaScript中我们只能最后两种错误. JavaScript 1.5定义了六种错误类型: EvalErr ...
- 实验一 Java开发环境的熟悉境的熟悉
- 运行结果: (一)命令行下Java程序开发 (二)Eclipse下Java程序开发.调试 设置断点和单步运行 单步运行:Step Into(快捷捷F5)和Step Over(快捷捷F5) 使程序直 ...
- HADOOP :: java.lang.ClassNotFoundException: WordCount
I am using eclipse to export the jar file of a map-reduce program. When i am run the jar using comma ...
- 如何创建一个客户端回调:js获得服务端的内容?
答案:表面上看去就是前端的js调用服务的C#方法,本质就是ajax,通过XMLHttpRequest对象和服务端进行交互.回调:就说回过头来调用,按理说js是一种脚本语言,怎么能用来调用服务端的呢?就 ...
- js 数组去除空值
for(var i = 0 ;i<wordarr.length;i++) { if(wordarr[i] == "& ...
- ios的 对象归档
IOS提供的数据持久化方式有:SQLite.CoreData.属性列表.NSUserDefault.对象归档. 这里来简单介绍下对象归档: 对象归档是将对象归档以文件的形式保存到磁盘中(也称为序列化, ...
- python错误集锦
1.lt与list等同,不能作为变量名 2.中文路径名:os.path.normcase(filepath) 如果遇到 ascii码在路径某处不能转换, 那么 filepath.encode('gbk ...
- 滑雪(dp好题)
题目描述:贝西去科罗拉多州去滑雪,不过还她不太会玩,只是个能力为 1 的渣渣.贝西从 0 时刻进入滑雪场,一到 T 时刻就必须离开.滑雪场里有 N 条斜坡,第 i 条斜坡滑行一次需要 Di 分钟,要求 ...
- C 记录
为什么调用 sqrt 函数报错显示未定义 一.调用此函数时,要先引用头文件:#include <math.h>二.linux gcc 编译时,如果用到了 math中的函数,要手工加入函数库 ...