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 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...
随机推荐
- 1010每次备份我的MySQL数据库
转自http://bbs.csdn.net/topics/320136534 在windows平台下面 /*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/* ...
- 第八章：Java集合
1.Java集合 A:对象的容器. B:实现数据结构(栈.队列) 2. Set:无序不重复 List: 有序可重复,长度可变. Map: 存放键值对. 3. Iterator foreach
- jQuery自定义插件
jQuery自定义插件 jQuery自定义插件按照功能分类,可以分为三类, 1>封装对象方法的插件,(也就是基于某个DOM元素的jQuery对象,局部的) 2>封装全局函数的插件, ( ...
- tttttabs
<div id="fil-page" class="fil-page"> <div class="fil-container&quo ...
- Linux14.04安装Mysql Linux公社
今天在Ubuntu 14.04下安装MySQL,本来是去官网下载安装包来安装的,可是安装之后却不能用,估计是要配置吧,在网上搜了很多的资料,结果还是失败.所以只好在软件源中安装,这样就省去很多不必要的 ...
- Linux_Shell_输出重定向
创建两个文件:touch 1 touch2 命令 > 文件 以覆盖的方式输出正确信息到文件或设备ls > 1 命令 >> 文件 以追加的方式输出正确信息到文件或设备l ...
- 【BZOJ 3242】【UOJ #126】【CodeVS 3047】【NOI 2013】快餐店
http://www.lydsy.com/JudgeOnline/problem.php?id=3242 http://uoj.ac/problem/126 http://codevs.cn/prob ...
- 莫比乌斯函数筛法 & 莫比乌斯反演
模板: int p[MAXN],pcnt=0,mu[MAXN]; bool notp[MAXN]; void shai(int n){ mu[1]=1; for(int i=2;i<=n;++i ...
- ES6新特性：利用解构赋值 (destructuring assignment)， 简化代码
本文的Demo的运行环境为nodeJS, 参考:让nodeJS支持ES6的词法----babel的安装和使用 : 解构赋值是一种表达式, 利用这种新语法, 可以直接从数组或者对象中快速提取值 赋值给不 ...
- 我的防Q+
Q+链接: http://onemore.web-45.com/index1.html: 兼容IE8: __页面被主机屋收回去了,现在又在弄自己的服务器,稍等呗