元素
标签中元素分为块状元素，内联元素（又叫行内元素），内联块元素
常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有：
<img>、<input>
块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
内联元素转换为块状元素：在css样式中a{display:block;}
内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
内联元素转换为内联元素：在css中div{display:inline;}
内联元素会有间距，由制表符，空格，换行（内联元素换行，空格引起）等引起的，如果要消除的话，可以不换行，<span>33333</span><span>44444</span<em>555555</em>
可以在在css样式中float:left;或者设置html{-webkit-text-size-adjust:none;}
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>行内元素标签</title> 6 <style type="text/css"> 7 a,span,em{ 8 background:pink;/*设置a、span、em标签背景颜色都为粉色*/
float:left;
9 } 10 </style> 11 </head> 12 <body> 13 <a href="http://www.baidu.com">百度</a> 14 <a href="http://www.imooc.com">慕课网</a> 15 <span>33333</span> 16 <span>44444</span><em>555555</em> 17 </body> 18 </html>
内联块状元素（inline-block）
就是同时具备内联元素、块状元素的特点，也可在css设置代码a{display:inline-block;}就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。
inline-block 元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>内联块状元素</title> 6 <style type="text/css"> 7 a{ 8 display:inline-block; 9 width:20px;/*在默认情况下宽度不起作用*/ 10 height:70px;/*在默认情况下高度不起作用*/ 11 background:pink;/*设置背景颜色为粉色*/ 12 text-align:center; /*设置文本居中显示*/ 13 } 14 </style> 15 </head> 16 <body> 17 <a>1</a> 18 <a>2</a> 19 <a>3</a> 20 <a>4</a> 21 </body> 22 </html>
盒子模型:块级标签都具有盒子模型特征，如<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
一个网页可以看成一个盒子，里面的内容可以看成盒子的内容，可以把html或者body标签看作盒子模型的边缘。body里面可以放div ，如果div里面放span div又可以看作一个盒子
设置边框样式
p{border:2px dotted #ccc;}(宽度可以为thick厚，thin细，medium正常，但常用的是px，样式可以为solid实线 dotted点线 dashed虚线，颜色可以用十六进制表示，也可以用red之类表示)
只设置下边框，无其余三边，p{border-bottom:1px dotted #ccc;}
盒子模型
1 div{ 2 width:200px; 3 padding:20px; 4 border:1px solid red; 5 margin:10px; 6 }
显示出来的只是border+padding+content
元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码：div{padding:20px 10px 15px 30px;}
顺序一定不要搞混。
如果上、右、下、左的填充都为10px;可以这么写div{padding:10px;}(div里元素默认左上角对齐，要让内容居中，可在css样式中设置text-align:center)
如果上下填充一样为10px，左右一样为20px，可以这么写：
div{padding:10px 20px;}
