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 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...
随机推荐
- OAuth in One Picture
近年来,OAuth在各种开放平台的引领下变得非常流行,上图是OAuth协议认证的全过程,图本身已经比较详细,这里不再赘述. 从上图中可以看出,OAuth协议中有三个角色: User, Consumer ...
- JVM垃圾收集器介绍
垃圾回收算法是GC的方法论,垃圾收集器就是内存回收的具体实现. 一.Serial 收集器 单线程收集器,在进行GC时,必须暂停所有的工作线程(Stop The World),直到GC收集结束. 缺点: ...
- 【BZOJ 1857】【SCOI 2010】传送带
三分套三分,虽然简单,但是也得掌握,,, 时间复杂度$O(log_{1.5}^2 n)$ 一开始WA好几次发现是快速读入里没有return,这样也能过样例?_(:3J∠)_ #include<c ...
- poj2631 树的直径
设s-t是这棵树的直径,那么对于任意给予的一点,它能够到达的最远的点是s或者t. 这样我们可以通过2次bfs找到树的直径了. #include<cstdio> #include<qu ...
- redis 可视化工具
Redis Desktop Manager 下载 phpRedisAdmin 是一个用php管理redis的工具 下载
- 【BZOJ-3697&3127】采药人的路径&YinandYang 点分治 + 乱搞
3697: 采药人的路径 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 681 Solved: 246[Submit][Status][Discus ...
- nginx添加proxy_cache模块做缓存服务器
业务需求nginx对后端tomcat(静态文件)做缓存 减轻后端服务器的压力 # nginx-1.6.2.tar.gz ngx_cache_purge-2.3.tar.gz #编译安装 ./conf ...
- POJ 3662 Telephone Lines(二分+最短路)
查看题目 最小化第K大值. 让我怀疑人生的一题目,我有这么笨? #include <cstdio> #include <queue> #include <cstring& ...
- 让AutoMapper更好用
AutoMapper Dto与EF实体之间的转换用AutoMapper会变的很方便.很高效,是大多数项目的选择.博主本人的项目也在使用AutoMapper这个组件 好用归好用,但是想要把它用好又是另一 ...
- linux安装Mac的默认Monaco字体
Monaco字体是我最喜欢的编程字体,如果你想在linux上面安装,只需要在terminal中执行: curl -kL https://raw.github.com/cstrap/monaco-fon ...