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 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...
随机推荐
- Java发送邮件代码
MailSenderInfo.java package com.nihaorz.mail.util; import java.util.Properties; public class MailSen ...
- hdu3416 判断最短路是否唯一（每条边只能走一次）
Marriage Match IV Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others ...
- java.net.URL请求远程文件下载
1:浏览器请求下载 public void listStockcodeUplaod(HttpServletRequest req, HttpServletResponse res) throws Ex ...
- Jquery-下拉列表设置默认选择
$('#select option:eq(2)').attr('selected','selected');
- C#-WinForm-打开其他窗体的三种方式-Show()、设置Owner()、ShowDialog()
打开其他窗体的三种方式 Show - 例如登入界面进入主页面,直接将主页面展示出来,两个窗体互不影响 public partial class Form1 : Form { public Form1( ...
- ASP.NET MVC 4 异步加载控制器
ASP.NET 4 Developer preview中的异步操纵器 在放弃了对.NET 3的支持之后, ASP.NET MVC 4 彻底拥抱了Task类库, 你不需求再蛋疼的给每个Action写两个 ...
- 【POJ 2826】An Easy Problem?!（几何、线段）
两个木条装雨水能装多少. 两线段相交,且不遮盖的情况下才可能装到水. 求出交点,再取两线段的较高端点的较小值h,(h-交点的y)为三角形的高. 三角形的宽即为(h带入两条线段所在直线得到的横坐标的差值 ...
- iOS获取流量参考
通过读取系统网络接口信息,获取当前iphone设备的流量相关信息,统计的是上次开机至今的流量信息. 2 倒入库: SystemConfiguration.framework 加入头文件: #inclu ...
- matplotlib 柱状图、饼图；直方图、盒图
#-*- coding: utf-8 -*- import matplotlib.pyplot as plt import numpy as np import matplotlib as mpl m ...
- ng-if else的使用
<!DOCTYPE html> <html> <head> <script src="http://code.angularjs.org/1.2.0 ...