基础
在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。
######块状元素
每一个块状元素都会新起一行开始，并且其下一个元素也会新起一行开始。常见块状元素有<div>、<p>、<h1>、 <h2>、<form>、<ul>、<ol>、<li>等。
######内联元素(行内元素)
行内元素会在一条直线上排列,都是同一行的,水平方向排列，但是其不能设置上下外边距、上下内边距、width
和height值。可以设置line-height的值来改变大小。常见的行内元素<em>、<strong>、<span>、<td>、<label>、<a>等。
######内联块状元素
内联块状元素会在一条直线上排列,都是同一行的,水平方向排列，但是其能设置上下外边距、上下内边距、width
和height值。常见的内联块状元素有<input>、<img>、<button>、<select>等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
div,
span,
label,
a,
select {
background-color: red;
margin: 10px;
padding: 30px;
/* line-height: 100px; */
}
div+span,
input+span,
span+label,
a[href="javascript:void(0)"] {
background-color: blue;
}
</style>
</head>
<body>
<div>我是div1我是div1我是div1我是div1我是div1</div>
<span>我是span</span>
<input type="text" value="1234567">
<span>我是span</span>
<label>234234</label>
<button>2342</button>
<a href="javascript:void(0)">234234</a>
<select>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
</select>
<div>我是div2我是div2我是div2我是div2我是div2</div>
</body>
</html>
元素类型转换
转换为块状元素：selector{display:block;}
转换为行内元素：selector{display: inline;}
装换为内联块状元素: selector{display: inline-block;}
盒模型
css盒子模型 又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。盒模型是有两种标准的，一个是标准模型，一个是IE模型。
IE模型
标准模型
从上面两张图中可以看出：
IE模型中元素的width=content+padding+border。
标准模型中元素的width=content。
个人认为IE定义的比较合理，元素的宽度应该包含border（边框）和padding（填充），这个和我们现实生活的盒子是一样的，W3C也认识到自己的问题了，所以在CSS3中新增了一个样式box-sizing，包含两个属性content-box 和 border-box。
总结
所有的html元素都有一个盒模型，是CSS样式设计和布局的基本单元。
8755
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
