第四章 CSS盒子模型

1、每个矩形都由元素的内容（content），内边距（padding）,边框（border）,外边距（margin）组成。

2、<div>标记：是一个区块容器，<div></div>之间可以容纳段落，标题，图像等各种网页元素，大多数HTML标记都可以嵌套在<div>标记中，<div>中还可以嵌套多层<div>。

      <div>标记很强大，通过与id，class等属性配合，然后使用CSS设置样式，来替代大多数的文本标记。

3、设置边框样式（border-style）

      none（没有边框即忽略所有的边框的宽度，默认值）

      solid（单实线）   dashed（虚线）  dotted（点线）  double（双实线）

4、border：四边宽度  样式  颜色

5、background-position：（1）像素px  如20px 20px;

     （2）、left   center   right      top          center       bottom.

       （3）百分比

6、设置背景图像固定

      scroll：图像随页面元素一起滚动（默认值）

     fixed：图像固定在屏幕上，不随页面元素滚动。

     如：background-attachment：fixed；

7、综合设置元素的背景

      background:背景色  url（”图像“）  平铺  定位   固定；

8、块元素：每个元素通常都会独占一整行或多整行，可以对其设置高度，宽度，对齐等属性。

       <h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>

9、行内元素：不必再新的一行开始，也不强迫其他的元素在新的一行显示。仅仅靠自身的字体大小和图像尺寸来支撑结构。

      <strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<a>,<span>

10、行内元素可以嵌套在块元素中，而块元素不可以嵌套在行内元素中。

11、<img/><input/>，可以对它们设置宽高，对齐属性，有些资料会称他们为行内块元素。

12、<span></span>之间只能包含文本和各种行内标记，如加粗标记<strong>,倾斜标记<em>等，<span> 中还可以嵌套多层<span>.

13、元素的转换（display）

         inline：将显示为行内元素，默认

         block：块元素

         inline-block：行内块元素，可以设置宽高等，可是该元素不会独占一行。

        none：元素被隐藏