有三个影响HTML元素布局的重要属性：padding(内边距)、margin(外边距)、border(边框)。
元素的 padding 控制元素内容 content和元素边框 border 之间的距离
在这儿，我们可以看到绿方块和红方块都位于黄方块之中，但是红方块比绿方块具有更大的 padding。
当你加大绿方块的 padding, 它将扩大元素内容和元素边框的距离。
<style>
.injected-text {
margin-bottom: -25px
text-align: center
}
.box {
border-style: solid
border-color: black
border-width: 5px
text-align: center
}
.yellow-box {
background-color: yellow
padding: 10px
}
.red-box {
background-color: red
padding: 20px
}
.green-box {
background-color: green
padding: 10px
}
</style>
<h5 class="injected-text">margin</h5>
<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box green-box">padding</h5>
</div>
2.元素的外边距 margin 控制元素边框 border 和元素实际所占空间的距离
3.如果你将一个元素的 margin 设置为负值，元素将会变大。
4.有时你想要自定义元素，使它的每一个边具有不同的 padding。
CSS 允许你使用 padding-top、padding-right、padding-bottom 和 padding-left来控制元素上右下左四个方向的 padding
<style>
.green-box {
background-color: green
padding-top: 40px
padding-right: 20px
padding-bottom: 20px
padding-left: 40px
}
</style>
<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box green-box">padding</h5>
</div>
5.有时你想要自定义元素，使它的每一个边具有不同的 margin。
CSS 允许你使用 margin-top、margin-right、margin-bottom 和 margin-left 来控制元素上右下左四个方向的 margin。
<style>
.green-box {
background-color: green
margin-top: 40px
margin-left: 40px
margin-right: 20px
margin-bottom: 20px
}
</style>
<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box green-box">padding</h5>
</div>
6.除了分别指定元素的 padding-top、padding-right、padding-bottom 和 padding-left 属性外，你还可以集中起来指定它们，举例如下：
padding: 10px 20px 10px 20px
这四个值以顺时针方式排列：顶部、右侧、底部、左侧，简称：上右下左
<style>
.red-box {
background-color: red
padding: 20px 40px 20px 40px
}
</style>
7.除了分别指定元素的 margin-top、margin-right、margin-bottom 和 margin-left 属性外，你还可以集中起来指定它们，举例如下：
margin: 10px 20px 10px 20px
这四个值以顺时针方式排列：顶部、右侧、底部、左侧，简称：上右下左
<style>
.red-box {
background-color: red
margin: 20px 40px 20px 40px
}
</style>
font-family:'Microsoft YaHei'。
1、网页字体样式华文黑体：STHeiti
2、网页字体样式华文楷体：STKaiti
3、网页字体样式华文宋体：STSong
4、网页字体样式华文仿宋：STFangsong
5、网页字体样式黑体：SimHei
6、网页字体样式宋体：SimSun
7、网页字体样式新宋体：NSimSun
8、网页字体样式仿宋：FangSong
9、网页字体样式楷体：KaiTi
10、网页字体样式仿宋_GB2312：FangSong_GB2312
11、网页字体样式楷体_GB2312：KaiTi_GB2312
12、网页字体样式微软正黑体：Microsoft JhengHei
13、网页字体样式微软雅黑体：Microsoft YaHei
14、网页字体样式隶书：LiSu
15、网页字体样式幼圆：YouYuan
16、网页字体样式华文细黑：STXihei
17、网页字体样式华文楷体：STKaiti
18、网页字体样式华文宋体：STSong
19、网页字体样式华文中宋：STZhongsong
20、网页字体样式华文仿宋：STFangsong
21、网页字体样式方正舒体：FZShuTi
22、网页字体样式方正姚体：FZYaoti
23、网页字体样式华文彩云：STCaiyun
24、网页字体样式华文琥珀：STHupo
25、网页字体样式华文隶书：STLiti
26、网页字体样式华文行楷：STXingkai
27、网页字体样式华文新魏：STXinwei
扩展资料
html内容描述
<h1></h1>最大的标题（一号标题）
<pre></pre>预先格式化文本 （英文全称：PREformatted）
<u></u>下划线（英文全称：Underline）
<b></b>黑体字 （英文全称：Bold）
<i></i>斜体字 （英文全称：Italics）
<tt></tt>打字机风格的字体
<cite></cite>引用，通常是斜体
<em></em>强调文本（通常是斜体加黑体、英文全称：EMphasize）
<strong></strong>加重文本（通常是斜体加黑体）
<font size="" color=""></font>设置字体大小从1到7，颜色使用名字或RGB（中文全称：红绿蓝）的十六进制值
<BASEFONT></BASEFONT>基准字体标记
<big></big>字体加大
<SMALL></SMALL>字体缩小
<DELECT></DELECT>加删除线
<CODE></CODE>程式码
<KBD></KBD>键盘字（英文全称：KeyBoarD）
<SAMP></SAMP>范例（英文全称：SAMPle）
<VAR></VAR>变量（英文全称：VARiable）
<BLOCKQUOTE></BLOCKQUOTE>向右缩排（向右缩进、块引用）
<DFN></DFN>述语定义（英文全称：DeFiNe）
<ADDRESS></ADDRESS>地址标记
<sup></SUP>上标字 （英文全称：SUPerscript）
<SUB></SUB>下标字（英文全称：SUBscript）
<xmp>...</xmp>；固定宽度字体（在文件中空白、换行、定位功能有效）
<plaintext>...</plaintext>；固定宽度字体（不执行标记符号）
<listing>...</listing>固定宽度小字体
<font color=00ff00>...</font>；字体 颜色
<font size=1>...</font>；字体 大小等于1（最小）。
<font style ='font-size:100 px'>...</font>；字体 样式等于无限增大（100像素）
参考资料：百度百科：HTML
CSS是样式层叠表，有三种引入方式。下面，我们来看看HTML样式CSS的三种写法吧。
01行内样式
CSS可以直接放到行内样式中引入即可，比如代码如下图：
<p style="color: bluebackground: red">
hello world！
</p>
02嵌入式
还可以采用潜入方式引入CSS，就是把CSS写到<style>标签中，这种方式比较实用，如下图所示：
<style type="text/css">
h1 {color: red}
</style>
<h1>hello world</h1>
03外部样式表
还有一种叫做外部样式，也就是把CSS写在另外一张页面上，然后再引用到指定页面就可以了，这种也很常见。
@import url(main.css)
