HTML5 CSS盒模型

元素分类

html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。

• 常用的块状元素有：

<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%

如果想把内联元素转换为块级元素，可以用以下代码：

a{display:block;}

内联元素特点：

1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

如果想把块级元素转换为内联元素，可以用以下代码：

div{display:inline;}

• 内联块状元素特点：
  1、和其他元素都在一行上；
  2、元素的高度、宽度、行高以及顶和底边距都可设置。
  就是同时具备块级元素特点和内联元素特点

通过以下代码可以设置为内联块状元素

div a{display:inline-block;}

---

盒模型

如上图，每个绿色框我们可以看作一个盒子，每个盒子内部可以放元素，如文字，图片等，盒子可以设置padding，就是内部元素距离盒子的距离；可以设置border，就是盒子的边框；可以设置margin，就是盒子距离其他盒子的间距；padding，border和margin都有四个方向，如padding-left。。。块级标签都具有盒模型的特点

• 盒模型-边框

下面代码为 div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框：

div{
    border:2px  solid  red;
}

这是简写，也可以分开写：

div{
    border-width:2px;
    border-style:solid;
    border-color:red;
}

注意：
1、border-style（边框样式）常见样式有：
dashed（虚线）| dotted（点线）| solid（实线）
2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:#000000，#00ff00
3、border-width（边框宽度）中的宽度也可以设置为：
thin | medium | thick（但不是很常用），最常还是用象素（px）。

如果只设置下边框，可以：

div{border-bottom:1px solid red;}

• 盒模型-宽度和高度

css内定义的宽度和高度和平时我们理解的不同，css定义的宽高是内容的宽高

如上图，比如我们定义：

div{
    width:150px;
    height:130px
    padding:20px;
    border:10px solid red;
    margin:15px;    
}

那么元素实际宽度为：
150+20+10+15=195
高度为：
130+20+10+15=175

• 盒模型--填充

填充就是设置内容与块状元素边框的间距，也就是上图中的padding

div{padding-top:20px;}/*设置上边距*/
div{padding:10px;}/*同时设置上下左右边距*/

• 盒模型--边界
  上图中的margin，代码与padding类似，可以设置上下左右

div{margin:20px 10px 15px 30px;}