CSS系列-盒模型

1.块级元素(block-level)

    常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

块级元素的特点：

（1）总是从新行开始

（2）高度，行高、外边距以及内边距都可以控制。

（3）宽度默认是容器的100%

（4）可以容纳内联元素和其他块元素。

2.行内元素(inline-level)

    常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，

    其中<span>标签最典型的行内元素。

行内元素的特点：

（1）和相邻行内元素在一行上。

（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。

（3）默认宽度就是它本身内容的宽度。

（4）行内元素只能容纳文本或则其他行内元素。（a特殊）

 

3.行内块元素（inline-block）

    在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，
    有些资料可能会称它们为行内块元素。

  行内块元素的特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。

 

4.CSS 三大特性
 

层叠 继承  优先级()CSS权重) 是我们学习CSS 必须掌握的三个特性。

 

5.css的盒模型
 

其实，CSS就三个大模块：  盒子模型 、 浮动 、 定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。  

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、

内边距（padding）、边框（border）和外边距（margin）组成。

看透网页布局的本质：<strong style="color: #f00;">把网页元素比如文字图片等等，放入盒子里面，然后利用CSS摆放盒子的过程，就是网页布局。</strong>

<strong style="color: #f00;">每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。</strong>

### 外边距实现盒子居中

1. 必须是块级元素。     
2. 盒子必须指定了宽度（width）

然后就给**左右的外边距都设置为auto**，就可使块级元素水平居中。

实际工作中常用这种方式进行网页布局，示例代码如下：

    .header{ width:960px; margin:0 auto;}

 

 清除元素的默认内外边距

为了更方便地控制网页中的元素，制作网页时，可使用如下代码清除元素的默认内外边距：

  * {
       padding:0;         /* 清除内边距 */
       margin:0;          /* 清除外边距 */
    }

注意：  行内元素是只有左右内外边距的，是没有上下内外边距的。

 

 嵌套块元素垂直外边距的合并

 

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，

合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并

解决方案：

1. 可以为父元素定义1像素的上边框或上内边距。

2. 可以为父元素添加overflow:hidden。

 盒子模型布局稳定性

 

开始学习盒子模型，同学们最大的困惑就是， 分不清内外边距的使用，什么情况下使用内边距，什么情况下使用外边距？

答案是：  其实他们大部分情况下是可以混用的。  就是说，你用内边距也可以，用外边距也可以。 你觉得哪个方便，就用哪个。

但是，总有一个最好用的吧，我们根据稳定性来分，建议如下：

按照 优先使用  宽度 （width）  其次 使用内边距（padding）    再次  外边距（margin）。   

      width >  padding  >   margin   

原因：

1. margin 会有外边距合并 还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。
2. padding  会影响盒子大小， 需要进行加减计算（麻烦） 其次使用。
3. width   没有问题（嗨皮）我们经常使用宽度剩余法 高度剩余法来做。(width可以搞定不用其他的)

 

 CSS3盒模型

 

CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况：

1、box-sizing: border-box  盒子大小为 width

2、box-sizing: content-box  盒子大小为 width + padding + border

    div {
      width: 100px;
      height: 100px;
      background: skyblue;
      margin: 0 auto;
      border: 1px solid gray;
    
     
      默认的设置 如果我们添加了 border属性 该容器的大小会发生改变
      因为他要优先保证内部的内容所占区域 不变
      
      box-sizing  如果不设置 默认的值 就是 
      content-box: 优先保证内容的大小 对盒子进行缩放;
      border-box: 让 盒子 优先保证自己所占区域的大小,对内容进行压缩;
      box-sizing: border-box;
    }