您现在的位置是：首页 > 技术学习 > CSS 网站首页 技术学习 CSS

 
个人CSDN博客
补充：脱离文档流的元素的样式display属性会变为block，不管是inline还是inline-block的都会变为block。

CSS布局模型和常见的单位值

在html样式布局中，有三种布局模型：

1. 流动模型(flow)
2. 浮动模型(float)
3. 层模型(layer)
   css中常见的单位值有px; em; rem; %; rgb(); rgba(); 十六进制颜色#ffffff; 英文颜色red;等

1. CSS布局模型

1-1 流动模型(flow)

网页的默认布局，具有以下特点：

1. 块状元素会在所包含的元素内自上而下按顺序垂直延伸。默认下块状元素宽为100%；以行的形式占据(各元素垂直单独分布)。
2. 内联元素在所包含元素内从左到右水平分布显示(不是独占一行，各元素水平一行分布)。

1-2 浮动模型(float)

具有以下特点:

1. 可将块元素并排显示。
2. 元素加了浮动会脱离文档流。
3. 浮动元素按指定方向移动到碰到父级边界或另一个浮动元素为止。(当第浮动元素前一个元素没浮动，那浮动元素不会影响前一个)

不浮动：

<div class="box" style="width:500px;border:3px solid red;border-bottom-color:blue;">
    <div class="d1" style="width:50px;height:50px;background: #f28e95;">div1</div>
    <div class="d2" style="width:200px;height:50px;background:#4aec61;">div2</div>
    <div class="d3" style="width:100px;height:100px;background:skyblue;">div3</div>
    <div class="d4" style="width:150px;height:50px;background:#f5d53e;">div4</div>
</div>

 
上述代码样子如下：

当没有浮动时是按流动模型展示，每个元素占一行。父元素没设高度，高度由里面内容撑开，即父元素的高等于四个div的高之和。

当我们给第二个div设置左浮动的时候：

<div class="box" style="width:500px;border:3px solid red;border-bottom-color:blue;">
    <div class="d1" style="width:50px;height:50px;background: #f28e95;">div1</div>
    <div class="d2" style="width:200px;height:50px;background:#4aec61;float:left;">div2</div>
    <div class="d3" style="width:100px;height:100px;background:skyblue;">div3</div>
    <div class="d4" style="width:150px;height:50px;background:#f5d53e;">div4</div>
</div>

 
样式如下：

当第二个div浮动时，它会脱离文档流，div3有一部分被div2挡住了，但是“div3”这几个字没被挡住，而是被挤下去了。由于div2脱离文档流，所以父元素的高度有1，3，4这三个div撑开，高度等于div1，div3，div4的高度和。div2浮动div1并没有浮动，但是，div2没影响div1，而是按流动模型来对待div1，紧跟在div1的底部。
 

如果div2和div3都左浮动：

<div class="box" style="width:500px;border:3px solid red;border-bottom-color:blue;">
    <div class="d1" style="width:50px;height:50px;background: #f28e95;">div1</div>
    <div class="d2" style="width:200px;height:50px;background:#4aec61;float:left;">div2</div>
    <div class="d3" style="width:100px;height:100px;background:skyblue;float:left;">div3</div>
    <div class="d4" style="width:150px;height:60px;background:#f5d53e;">div4</div>
</div>

 
显示如下(为了方便识别，将div4高改为60px):

div2、div3浮动，2、3都脱离文档流，3跟在2后面，遇见2停止。父元素由1、4撑开，所以父元素高度等于div1和div4的高度和。4被2挡住了一部分，但是里面内容“div4”这几个字会被挤出去，挤到浮动元素之外。
 

当四个都浮动的时候：

<div class="box" style="width:400px;border:3px solid red;border-bottom-color:blue;">
    <div class="d1" style="width:50px;height:50px;background: #f28e95;float:left;">div1</div>
    <div class="d2" style="width:200px;height:50px;background:#4aec61;float:left;">div2</div>
    <div class="d3" style="width:100px;height:100px;background:skyblue;float:left;">div3</div>
    <div class="d4" style="width:150px;height:60px;background:#f5d53e;float:left;">div4</div>
</div>

 
显示如下：

由图可以看出：四个都浮动的时候全部脱离文档流，父元素里面没内容撑开，所以高度为0；父元素的宽不足放下4个div，所以div4另起一行。而且没超多最高的div3的底边；
 

如果换一下位置，把div3放第一个：

<div class="box" style="width:400px;border:3px solid red;border-bottom-color:blue;">
    <div class="d3" style="width:100px;height:100px;background:skyblue;float:left;">div3</div>
    <div class="d1" style="width:50px;height:50px;background: #f28e95;float:left;">div1</div>
    <div class="d2" style="width:200px;height:50px;background:#4aec61;float:left;">div2</div>
    <div class="d4" style="width:150px;height:60px;background:#f5d53e;float:left;">div4</div>
</div>

 
显示如下：

这次div4是贴着div3的右边排列的。
 

如果是右浮动：

<div class="box" style="width:400px;border:3px solid red;border-bottom-color:blue;">
    <div class="d1" style="width:50px;height:50px;background: #f28e95;float:right;">div1</div>
    <div class="d2" style="width:200px;height:50px;background:#4aec61;float:right;">div2</div>
    <div class="d3" style="width:100px;height:100px;background:skyblue;float:right;">div3</div>
    <div class="d4" style="width:150px;height:60px;background:#f5d53e;float:right;">div4</div>
</div>

显示如下：

从右边开始排列，第一个div在最右边，其余规则和左浮动一样。
注：从上面例子可以看出，浮动会把周围文字挤开，所以浮动可以用来做文字环绕效果。

1-3 清浮动

浮动会让元素脱离文档流，但是会无法撑开父元素的高度。有时候浮动还会挡住后面的元素。这时候我们希望某些元素周围没有浮动，那么我们需要用到清浮动。clear:both;元素两边不能有浮动，还有left左边不能有浮动；right右边不能有浮动；none不清浮动；

<div class="box" style="width:400px;border:3px solid red;border-bottom-color:blue;">
    <div class="d1" style="width:100px;height:100px;background: #f28e95;">div1</div>
    <div class="d2" style="width:100px;height:100px;background:#4aec61;float:left;">div2</div>
    <div class="d3" style="width:100px;height:100px;background:skyblue;float:left;clear:left;">div3</div>
    <div class="d4" style="clear:both;"></div>
</div>

 
上述代码样式：

div2和div3分别设置了左浮动，但是div3设置了左清浮动，所以div3左边不能有浮动元素，所以div2不能再div3左边。所以div3另起了一行。同时div4虽然没有高度，但是设置了清浮动，由于2，3浮动，脱离文档流，父元素的高度有1，4决定，但是4清浮动，位置在2，3下面，所以看上去父元素高度由1，2，3，4撑开一样。（注:如果把div4变为span标签，那么清浮动无效。可见清浮动元素得为块元素）
 

清浮动是对清浮动元素之前的浮动元素起作用的：

<div class="box" style="width:400px;border:3px solid red;border-bottom-color:blue;">
    <div class="d1" style="width:100px;height:100px;background: #f28e95;">div1</div>
    <div class="d2" style="width:100px;height:100px;background:#4aec61;float:left;clear:right;">div2</div>
    <div class="d3" style="width:100px;height:100px;background:skyblue;float:left;">div3</div>
    <div class="d4" style="clear:both;"></div>
</div>

 
效果如下：

虽然2设置了右边清浮动，但是3还是出现在2右边。因为清浮动是对前面元素起作用，3在2后面。

1-4 层模型

层模型可以让html元素在网页中精准定位。有三种形式：

1. 相对定位 position: relative;
2. 绝对定位 position: absolute;
3. 固定定位 position: f ixed;
   定位一般配合方位词使用，如：left、top、right、bottom。

1-4-1 相对定位

position: relative;left: 10px; top: 20px; 相对定位是相对于元素本身位置发生偏移。top: 20px;是元素相对之前位置向下偏移20px,top值可以为负值(向上偏移)；left:10px; 是相对之前位置向右偏移10px，同样可以为负值(向左偏移)。不影响元素本身特性，不脱离文档流。

<div class="box" style="width:300px;border:1px solid red;position: relative;">
    <div id="d1" style="width:100px;height:100px;position:relative;top:20px;left:10px;background: blue;"></div>
</div>

 
显示如下：

由图可见：

父元素没设置高度，相对定位让div1向右和向下偏移，但是并没影响到父元素。div1自身没脱离文档流。
 

1-4-2 绝对定位

position:absolute;left:30px;top:10px;绝对定位特点：

1. 使元素脱离文档流。
2. 内联元素支持宽高。
3. 块属性标签内容撑开宽度。
4. 有定位父级相对于定位父级发生偏移，没有的话相对文档偏移。
   (定位父级：父级元素拥有相对，绝对，固定定位中任意一个定位样式都属于定位父级，如果父级里面有多个定位，那以离自己最近的那一辈父级为定位父级。)

<div class="box" style="width:300px;border:3px solid red;border-bottom-color:green;position: relative;">
    <div id="d1" style="width:150px;position:relative;top:20px;left:10px;border:3px solid red;border-bottom-color:green;">
        <div id="d2" style="width:100px;height:100px;position:absolute;top:20px;left:10px;background:red;"></div>
    </div>
</div>

 
显示如下：

d2为绝对定位，脱离文档流，所以d1的高度为0；d1是相对定位不脱离文档流，所以box高度由d1撑开，d1有6像素边框，所以box高度为6px；box和d1都有定位，d1是d2最近父级，所以d2相对d1发生偏移。
 

1-4-3 固定定位

固定定位是相对浏览器视图(屏幕内网页窗口)发生偏移。且位置之和窗口有关，和页面、滚动条无关。注：IE6不支持固定定位。

<div style="position: fixed;top:10px;left:20px;width:50px;height:50px;background:red;"></div>

 
显示如下：

这个div始终在这个位置，即使页面发生滚动条发生滚动，还是在这个位置，因为它是相对网页窗口定位的，和页面位置无关。

2. CSS常用的单位值

2-1 长度

长度单位一般为px、em、rem、%

1. px 像素。
2. em 由父元素font-size决定，若父元素font-size:12px;那 1em = 12px；
3. rem 根em，由html的font-size决定，若html的font-size:14px;则 1rem = 14px;
4. % 百分比。

2-2 颜色

颜色支持很多写法：英语单词、rgb、十六进制。

1. red；
2. rgb(133,45,200) 三原色 r: red; g: green; b: blue;
3. #00ffff; 十六进制写法。