html基础：(三) 结构-body

“body”（主体）部分提供网页的具体内容。
技巧：为了兼容ie低版本浏览器，可以为body设置一个class=‘ie’，可以通过该class针对ie设置样式属性。

HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。首先需要说明的是，这三者是可以互相转换的，使用display属性能够将三者任意转换。

一、行内元素

1、设置宽高无效
2、对margin仅设置左右方向有效，上下无效；padding设置左右有效，即会撑大左右的空间，上下的padding会撑大上下的空间但是不占位置。
3、不会自动进行换行

常用的行内元素包括：
<a href=""></a>
<span></span>
<b></b>
<strong></strong>
<i></i>
<em></em>
<s></s>
<del></del>
<u></u>
<label for="id"></label>
<small></small>
<sub></sub>
<sup></sup>

二、块级元素

1、可以设置宽高
2、margin和padding都有效，但是上下两个块级元素的margin会合并，以margin大的为准。
3、会自动进行换行

常用的块级元素包括：
<div></div>
<p></p>
<h1></h1>
<ul>
    <li>li</li><!--li的display是list-item-->
</ul>
<ol>
    <li>ol</li><!--li的display是list-item-->
</ol>
<dl>
    <dt>dt</dt>
    <dd>dd</dd>
</dl>
<header></header>
<nav></nav>
<section></section>
<article></article>
<aside></aside>
<footer></footer>

注意：
select是行内块元素，但是option是块级元素且option不占位置（不会影响其它元素）

三、行内块元素

1、可以设置宽高
2、不会自动进行换行
3、设置margin和padding有效，且和块级元素的margin不合并。

常用的行内块元素包括：
<button>button</button>
<select name="" id="">
    <option value="option">option</option>
</select>
<input type="text" value="input" width="20px">
<input type="imgae" value="input" width="20px">
<textarea name="" id="textarea" cols="30" rows="10"></textarea>
注意：
<img src="" alt="">
img 属于行内元素，但在表现上更倾向于 inline-block，这种内容可替换的元素虽然属于 inline，但又能自由设置 height、width 等值

input 属于行内块元素可以直接用css控制宽高，直接设置属性width height不生效；但是如果input的type=‘image’直接设置属性width height又可以生效。