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的更多相关文章

  1. Hadoop学习笔记—22.Hadoop2.x环境搭建与配置

    自从2015年花了2个多月时间把Hadoop1.x的学习教程学习了一遍,对Hadoop这个神奇的小象有了一个初步的了解,还对每次学习的内容进行了总结,也形成了我的一个博文系列<Hadoop学习笔 ...

  2. Sass学习笔记之入门篇

    Sass又名SCSS,是CSS预处理器之一,,它能用来清晰地.结构化地描述文件样式,有着比普通 CSS 更加强大的功能. Sass 能够提供更简洁.更优雅的语法,同时提供多种功能来创建可维护和管理的样 ...

  3. PyQt4入门学习笔记（一）

    PyQt4入门学习笔记(一) 一直没有找到什么好的pyqt4的教程,偶然在google上搜到一篇不错的入门文档,翻译过来,留以后再复习. 原始链接如下: http://zetcode.com/gui/ ...

  4. CSS3与页面布局学习笔记（八）——浏览器兼容性问题与前端性能优化方案

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  5. android cocos2d-x for Android安装和学习笔记（请用adt-bundle21.1或以上导入）

    引用:http://weimingtom.iteye.com/blog/1483566 (20121108)注意:这篇文章用cdt编译ndk工程的内容已过时(现在可以用adt-bundle,避免配置繁 ...

  6. [读书笔记]C#学习笔记三: C#类型详解..

    前言 这次分享的主要内容有五个, 分别是值类型和引用类型, 装箱与拆箱,常量与变量,运算符重载,static字段和static构造函数. 后期的分享会针对于C#2.0 3.0 4.0 等新特性进行. ...

  7. <老友记>学习笔记

    这是六个人的故事,从不服输而又有强烈控制欲的monica,未经世事的千金大小姐rachel,正直又专情的ross,幽默风趣的chandle,古怪迷人的phoebe,花心天真的joey——六个好友之间的 ...

  8. C#学习笔记二: C#类型详解

    前言 这次分享的主要内容有五个, 分别是值类型和引用类型, 装箱与拆箱,常量与变量,运算符重载,static字段和static构造函数. 后期的分享会针对于C#2.0 3.0 4.0 等新特性进行. ...

  9. JS 学习笔记--9---变量-作用域-内存相关

    JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...

随机推荐

  1. lineNumber: 1; columnNumber: 1; 前言中不允许有内容

    周六项目还能运行,也没修改什么,周一来了启动项目,竟然报错了~~~ 这是遇到的错误提示: Cause: org.xml.sax.SAXParseException; lineNumber: 1; co ...

  2. OAuth in One Picture

    近年来,OAuth在各种开放平台的引领下变得非常流行,上图是OAuth协议认证的全过程,图本身已经比较详细,这里不再赘述. 从上图中可以看出,OAuth协议中有三个角色: User, Consumer ...

  3. Andriod ADB开启Activity、Service以及BroadCast（包括参数的传递）

    /*****************开启Activity  并传递参数*******************/ 使用am命令启动Activity并传递参数的方法,也能用作C层与Java进行数据传递的一 ...

  4. 我的第一个jsp程序-实现注册登录留言功能

    1,注册功能,包括两个页面 zhuce.jsp注册页面 <%@ page language="java" contentType="text/html; chars ...

  5. 【UOJ #150】【NOIP 2015】运输计划

    http://uoj.ac/problem/150 用树链剖分求lca,二分答案树上差分判断. 时间复杂度$O(nlogn)$,n,m同阶. #include<cstdio> #inclu ...

  6. 【Tyvj 1060】【NOIP 2005】等价表达式

    设a为一个质数,模数为另一个质数,然后暴力算多项式的答案,如果答案相等就认为两个多项式相等. 这种hash有出错概率的题为什么还是要用hash呢?因为出错的概率实在太小了,a和模数的值取得好出题人根本 ...

  7. Maven-pom.xml详解

    (看的比较累,可以直接看最后面有针对整个pom.xml的注解) pom的作用 pom作为项目对象模型.通过xml表示maven项目,使用pom.xml来实现.主要描述了项目:包括配置文件:开发者需要遵 ...

  8. 简进祥===AFNetWorking 下载视频文件

    获取沙盒中的Documents地址的代码. NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUs ...

  9. Java线程与并发库高级应用-线程范围内共享数据ThreadLocal类

    1.线程范围内共享变量 1.1 前奏: 使用一个Map来实现线程范围内共享变量 public class ThreadScopeShareData { static Map<Thread, In ...

  10. [bzoj3670][2014湖北省队互测week2]似乎在梦中见过的样子

    Description 已知一个字符串S,求它有多少个形如A+B+A的子串(len(A)>=k,len(B)>=1 ). Input 第一行一个字符串,第二行一个数 k. Output 仅 ...