HTML学习笔记——box
1> HTML写法
<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#box{
width: 300px;
border: 5px solid blue;
margin: 0 auto;
/*内边距*/
/*padding: 0px;*/
/*padding-top: 20px;
padding-right: 40px;
padding-bottom: 30px;
padding-left: 50px;*/ /*一个参数代表四个方向*/
/*两个参数，第一个代表上下，第二个代表左右*/
/*三个参数，第一个代表上面，第二个代表左右，第三个代表下面*/
/*四个参数，代表上右下左*/
padding: 20px 30px 100px;
}
</style>
</head> <body> <div id="box">
盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型
</div>
</body>
</html>
2>CSS写法
<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{
/*内边距/外边距*/
padding: 0px;
margin: 0px;
} #title{
width: 500px;
height: 200px;
border: 4px solid blue;
padding: 100px;
background: #ccc;
/*margin-bottom: 50px;*/
float: left;
/*margin-right: 100px;*/
} #box{
/*左右外边距和累加/上下外边距和合并*/
width: 400px;
height: 200px;
border: 4px solid orange;
background: #ccc;
/*margin-top: 50px;*/
float: left;
/*margin-left: */
} </style>
</head> <body>
<h1 id="title">今天是星期一 </h1> <div id="box"></div>
</body>
</html>
HTML学习笔记——box的更多相关文章
- Hadoop学习笔记—22.Hadoop2.x环境搭建与配置
自从2015年花了2个多月时间把Hadoop1.x的学习教程学习了一遍,对Hadoop这个神奇的小象有了一个初步的了解,还对每次学习的内容进行了总结,也形成了我的一个博文系列<Hadoop学习笔 ...
- Sass学习笔记之入门篇
Sass又名SCSS,是CSS预处理器之一,,它能用来清晰地.结构化地描述文件样式,有着比普通 CSS 更加强大的功能. Sass 能够提供更简洁.更优雅的语法,同时提供多种功能来创建可维护和管理的样 ...
- PyQt4入门学习笔记（一）
PyQt4入门学习笔记(一) 一直没有找到什么好的pyqt4的教程,偶然在google上搜到一篇不错的入门文档,翻译过来,留以后再复习. 原始链接如下: http://zetcode.com/gui/ ...
- CSS3与页面布局学习笔记（八）——浏览器兼容性问题与前端性能优化方案
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
- android cocos2d-x for Android安装和学习笔记（请用adt-bundle21.1或以上导入）
引用:http://weimingtom.iteye.com/blog/1483566 (20121108)注意:这篇文章用cdt编译ndk工程的内容已过时(现在可以用adt-bundle,避免配置繁 ...
- [读书笔记]C#学习笔记三: C#类型详解..
前言 这次分享的主要内容有五个, 分别是值类型和引用类型, 装箱与拆箱,常量与变量,运算符重载,static字段和static构造函数. 后期的分享会针对于C#2.0 3.0 4.0 等新特性进行. ...
- <老友记>学习笔记
这是六个人的故事,从不服输而又有强烈控制欲的monica,未经世事的千金大小姐rachel,正直又专情的ross,幽默风趣的chandle,古怪迷人的phoebe,花心天真的joey——六个好友之间的 ...
- C#学习笔记二: C#类型详解
前言 这次分享的主要内容有五个, 分别是值类型和引用类型, 装箱与拆箱,常量与变量,运算符重载,static字段和static构造函数. 后期的分享会针对于C#2.0 3.0 4.0 等新特性进行. ...
- JS 学习笔记--9---变量-作用域-内存相关
JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...
随机推荐
- Beta项目冲刺–第四天
考试太多,做项目的时间太少-- 队伍:F4 成员:031302301 毕容甲 031302302 蔡逸轩 031302430 肖阳 031302418 黄彦宁 会议内容: 1.站立式会议照片: 2.项 ...
- hibernate的Criteria条件查询
项目中用到了criteria的查询方式,觉得挺好用的,下班后找了一下资料,一边测试,一边在博客上面记录下来 1.初解 快速浏览了资料,大致了解了以下的内容: 1. Hibernate 定义了Crite ...
- Oracle空串与null的处理
来源于:http://blog.itpub.net/24870090/viewspace-1057853/ Oracle空串与null的处理[@more@] Oracle中的空字符串基本上是被当成空N ...
- js 技巧和细节
1. if中的各种变量返回值 一个值为 true 或者 false 的表达式.如果需要,非 Boolean 表达式也可以被转换为 Boolean 值,但是要遵循下列规则: 所有的对象都被当作 true ...
- (转)ElasticSearch学习
ElasticSearch是一个基于Lucene构建的开源,分布式,RESTful搜索引擎.设计用于云计算中,能够达到实时搜索,稳定,可靠,快速,安装使用方便.支持通过HTTP使用JSON进行数据索引 ...
- RequireJS实例分析【转】
转自http://www.cnblogs.com/xing901022/p/4658548.html 随着JS越来越庞大,已经不仅仅是以前复制粘贴做特效的时代了,JS越来越偏向于业务逻辑与应用.恰逢N ...
- Python 从零学起（纯基础） 笔记 （二）
Day02 自学笔记 1. 对于Python,一切事物都是对象,对象基于类创建,对象具有的功能去类里找 name = ‘Young’ - 对象 Li1 = [11,22,33] ...
- linux 误删文件恢复
文档太给力了!误删了几个重要文件,抖抖嗦嗦偷偷恢复了,救了我!!! http://jingyan.baidu.com/article/2f9b480d6c2bcd41cb6cc223.html 注意: ...
- 63.Android面试题精选 (转)
1.Android dvm 的进程和Linux的进程,应用程序的进程是否为同一个概念: 答:dvm是dalivk虚拟机.每一个android应用程序都在自己的进程中运行,都拥有一个dalivk虚拟机实 ...
- xcoj 1208 矩阵
赛场上一开始以为是递推,交了一发希望以为能卡着线过(毕竟是O(5N)的),结果WA了. 又以为是dp,最后半小时尝试各种YY...各种WA 实际上取每次transfer中最大的概率然后递推是不对的.. ...