css盒子模型

盒子模型主要有外边距margin，内边距padding，border形成
 
盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。
 
因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
 



 
<div><p> <table> <form> <h1> <ul>等块级标签都具有盒子模型的特征
 
块级元素特点(<div>、 <p>、<h1>、<form>、<ul> 和 <li>)：
 
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
 
2、元素的高度、宽度、行高以及顶和底边距都可设置。
 
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
 
内联元素特点(<span>、<a>、<label>、 <strong> 和<em>)：
 
1、和其他元素都在一行上；
 
2、元素的高度、宽度及顶部和底部边距不可设置；
 
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
 
内联块状模块inline-block 元素(<img>、<input>)特点：
 
1、和其他元素都在一行上；
 
2、元素的高度、宽度、行高以及顶和底边距都可设置。