CSS相关模型

CSS盒模型：
  元素分类：
    块状元素：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
    内联元素(行内元素)：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
    内联块状元素：<img>、<input>
  块状元素：
    概念：在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素
    设置display:block就是将元素显示为块级元素，从而使元素具有块状元素特点。
    特点：每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
          元素的高度、宽度、行高以及顶和底边距都可设置。
          元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
  内联元素：
    概念：在html中，<span>、<a>、<label>、<input>、 <img>、 <strong> 和<em>就是典型的内联元素（行内元素）（inline）元素。
    块状元素也可以通过代码display:inline将元素设置为内联元素，从页使用元素具有内联元素特点。
    特点：和其他元素都在一行上；
          元素的高度、宽度、行高及顶部和底部边距不可设置；
          元素的宽度就是它包含的文字或图片的宽度，不可改变。
  内联块状元素：
    概念：就是同时具备内联元素、块状元素的特点，<img>、<input>标签就是这种内联块状标签。
      代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)
    特点：和其他元素都在一行上；
          元素的高度、宽度、行高以及顶和底边距都可设置；
  盒模型：
    边框border：
      概念：边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。
      注意：border-style（边框样式）常见样式有：dashed（虚线）| dotted（点线）| solid（实线）。
            border-color（边框颜色）中的颜色可设置为十六进制颜色，如:border-color:#888;//前面的井号不要忘掉。
            border-width（边框宽度）中的宽度也可以设置为：thin | medium | thick（但不是很常用），最常还是用象素（px）。
    宽度和高度：
      概念：css内定义的宽（width）和高（height），指的是填充以里的内容范围
    填充padding：
      概念：元素内容与边框之间是可以设置距离的，称之为“填充”
      注意：填充也可分为上、右、下、左(顺时针)。如下代码：div{padding:20px 10px 15px 30px;}
            顺序不能搞混，也可以分开写：
    边界margin：
      概念：元素与其它元素之间的距离可以使用边界（margin）来设置。
      注意事项与padding相同；
      padding和margin的区别：padding在边框里，margin在边框外；




CSS布局模型：
  >流动模型(Flow)：默认的网页布局模式
     特征：块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。
     在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）；
  >浮动模型(Float)：
      设置元素浮动就可以实现让两个块状元素并排显示。任何元素在默认情况下是不能浮动的，但可以用CSS定义为浮动，如div、p、table、img等元素都可以被定义为浮动。
      语法：float：left； 左对齐
      类似的可以设置右对齐：float：right；
  >层模型(Layer)：
      概念：层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作。但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。
      绝对定位(position: absolute)：
          position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
          理解：绝对定位是相对于其前辈元素的相对位置定位，默认下就是body，也可以设置为对其父元素进行相对定位，见下面第5点；
  >相对定位(position: relative)：
      概念：如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。
      相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
       注意： 所谓的偏移前的位置是最开始定位的位置，每次设置后相对的都是同一个初始位置；
       理解：一定要注意相对定位所相对的是自己的初始位置，而非其前辈元素；
  >固定定位(position: fixed)：
       概念：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于 浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。
       即相当于钉在视图的某个位置，下拉页面也不会变化；
       理解：其固定的对象是视窗，比如很多页面的“返回顶部”按钮；
  >Relative与Absolute组合使用：
       概念：即让某个元素相对其前辈元素进行绝对定位(而直接的绝对定位是相对于body的)
       规范：参照定位的元素必须是相对定位元素的前辈元素：
             参照定位的元素必须加入position:relative;
             定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。
             即：参照定位元素必须先进行相对定位，而后定位元素再绝对定位；




CSS代码缩写，以占用更少的宽带：
  >盒模型代码简写，即外边距(margin)、内边距(padding)和边框(border)：
      默认顺序：顺时针，即上右下左
      如果top、right、bottom、left的值相同，可缩写为：margin:10px;
      如果top和bottom值相同、left和 right的值相同，如下面代码：margin:10px 20px 10px 20px;  可缩写为：margin:10px 20px;
      如果left和right的值相同，如下面代码：margin:10px 20px 30px 20px;  可缩写为：margin:10px 20px 30px;
padding、border的缩写方法和margin是一致的。
  >颜色值缩写：
      当你设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。
      eg：p{color: #336699;} 可以缩写为：p{color: #369;}
      注意：使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-varient、line-height)如未指定将自动使用默认值。
            在缩写时 font-size 与 line-height 中间要加入“/”斜扛。