CSS布局模型学习

转自：http://www.cnblogs.com/erliang/p/4092192.html

CSS布局模型学习

 

参考链接
慕课网：HTML+CSS基础课程

知识基础

1. 样式

• 内联
• 嵌入
• 外部

2. 选择器

• 类选择器（“.”）
• id选择器（“#”）
• 子选择器（“>”）
• 包含后代选择器（“ ”）
• 通用选择器（“*”）
• 伪类选择符（“：”为状态设置样式）
• 分组选择符（“，”）

3. 权值

• 继承的权值为0.1，标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100

• 重要性

  p{color:red!important;}

4. 元素分类

在CSS中，html中的标签元素大体被分为三种不同的类型：

1. 块状元素(display:block)

• 常用
  <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
• 特点

1. 每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2. 元素的高度、宽度、行高以及顶和底边距都可设置。
3. 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

2. 内联元素(display:inline)

• 常用
  <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
• 特点

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

3. 内联块状元素(display:inline-block)

• 常用
  <img>、<input>
• 特点
  同时具备内联元素、块状元素的特点

1. 和其他元素都在一行上；
2. 元素的高度、宽度、行高以及顶和底边距都可设置。

css布局模型

1. 流动模型（Flow）

默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。
第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。
第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）
右侧代码编辑器中内联元素标签a、span、em、strong都是内联元素。

2. 浮动模型 (Float)

块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示，怎么办呢？不要着急，设置元素浮动就可以实现这一愿望。任何元素在默认情况下是不能浮动的，但可以用CSS定义为浮动，如div、p、table、img等元素都可以被定义为浮动。如下代码可以实现两个div元素一行显示。

div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:left;
}
<div id="div1"></div>
<div id="div2"></div>

3. 层模型（Layer）

图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。
但是在网页上局部使用层布局还是有其方便之处的。
层模型有三种形式：

1. 绝对定位(position: absolute)

将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
如下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。

div{
    width:200px;
    height:200px;
    border:2px red solid;
    position:absolute;
    left:100px;
    top:50px;
}
<div id="div1"></div>

2. 相对定位(position: relative)

通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
如下代码实现相对于以前位置向下移动50px，向右移动100px。

#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:relative;
    left:100px;
    top:50px;
}
<div id="div1"></div>

3. 固定定位(position: fixed)

与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。
以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。

#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:fixed;
    left:100px;
    top:50px;
}
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
....

4. Relative与Absolute组合使用

相对于其它元素进行定位
1. 参照定位的元素必须是相对定位元素的前辈元素：

<div id="box1"><!--参照定位的元素-->
    <div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>

从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。
2. 参照定位的元素必须加入position:relative;

#box1{
    width:200px;
    height:200px;
    position:relative;
}

  3. 定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。

#box2{
    position:absolute;
    top:20px;
    left:30px;
}

这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。

代码简写

1. 盒模型代码简写

padding，border，margin
通常有下面三种缩写方法:

1. 如果top、right、bottom、left的值相同，如下面代码：

   margin:10px 10px 10px 10px;

   可缩写为：

   margin:10px;

2. 如果top和bottom值相同、left和 right的值相同，如下面代码：

   margin:10px 20px 10px 20px;

   可缩写为：

   margin:10px 20px;

3. 如果left和right的值相同，如下面代码：

   margin:10px 20px 30px 20px;

   可缩写为：

   margin:10px 20px 30px;

2. 颜色值缩写

关于颜色的css样式也是可以缩写的，当你设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。
例子1：

p{color:#000000;}

可以缩写为：

p{color: #000;}

例子2：

p{color: #336699;}

可以缩写为：

p{color: #369;}

3. 字体缩写

网页中的字体css样式代码也有他自己的缩写方式，下面是给网页设置字体的代码：

body{
    font-style:italic;
    font-variant:small-caps;
    font-weight:bold;
    font-size:12px;
    line-height:1.5em;
    font-family:"宋体",sans-serif;
}

这么多行的代码其实可以缩写为一句：

body{
    font:italic  small-caps  bold  12px/1.5em  "宋体",sans-serif;
}

注意：

1. 使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-varient、line-height)如未指定将自动使用默认值。

2. 在缩写时 font-size 与 line-height 中间要加入“/”斜扛。
   一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用：

   body{
       font:12px/1.5em  "宋体",sans-serif;
   }

   只是有字号、行间距、中文字体、英文字体设置。