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 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...
随机推荐
- 项目tomcat启动停在Initializing Spring root WebApplicationContext
来源于:http://ourteam.iteye.com/blog/1270699 某日,再次启动项目,spring一直停在这一句: Initializing Spring root WebAppli ...
- 云平台 为什么推荐使用小VM 而不是大VM独占宿主机的方式部署游戏服？
近期公司X游戏项目,提了一个游戏VM资源的需求,是 64GB RAM + 30Core CPU 的VM规格,而一个VM部署10个游戏服.而我们云平台推荐的VM规格为 4 Core CPU + 4GB ...
- Java文件拷贝
package com.lxm.demos; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io. ...
- 【转】如何建立一个样式新颖的CSS3搜索框
在线演示 搜索框大概是web开发中最常用的UI元素之一,我想基本没有必要去介绍如何使用它.无论是网站还是web应用,都会为了增强用户体验而添加它,那么你是不是也想过设计一个别致的搜索框? 在今天的文章 ...
- thinkphp全站静态页实现方法
1:在根目录下的全局index.php中加下面这行: define('HTML_PATH', './htm');//生成静态页面的文件位置 2:在项目的配置文件config.php中加下面这行: 'H ...
- jquery-通过js编写弹出窗口
本文转载 本文主要是通过js动态控制div的高度,css控制浮动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...
- HTTP协议学习---（九）cookie
Cookie是HTTP协议中非常重要的东西, 之前拜读了Fish Li 写的[细说Cookie], 让我学到了很多东西.Fish的这篇文章写得太经典了. 所以我这篇文章就没有太多内容了. 最近我打算写 ...
- TCP连接——爱的传声筒
TCP连接——爱的传声筒 TCP通信最重要的特征是:有序(ordering)和可靠(reliable).有序是通过将文本流分段并编号实现的.可靠是通过ACK回复和重复发送(retransmission ...
- perl 箭头操作符
箭头操作符有两种用法. 第一种用法是访问引用中的数据元素: #!/usr/bin/perl -w use strict; my @a = (5, 6, 7,9); my $aref = \@a; pr ...
- Windows Directory ACL Security Check By ACL Baseline
catalog . Windows NTFS ACL(MAC) Permission . How the System Uses ACLs . 服务器不安全ACL配置带来的攻击向量 . NTFS AC ...