CSS布局模型

CSS布局模型

 在网页中，元素有三种布局模型：

1、流动模型(Flow)

2、浮动模型(Float)

3、层模型(Layer)

一、流动模型

流动(Flow)是默认的网页布局模型，网页在默认状态下的HTML网页元素都是根据流动模型来分布网页内容。

典型特征：

1、块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。

2、在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。

二、浮动模型(float)

块状元素都是独占一行，如果想让两个块状元素并排显示，则可以设置元素浮动实现。

{

　　3个属性值

          left——左浮动

　　    right——右浮动

          none——不浮动

　　特点：元素会左移，或右移，直至触碰到容器为止。

      #当元素没有设置宽度值，而设置了浮动属性，元素的宽度随内容的变化而变化。

　　#当元素设置浮动属性后，会对相邻的元素产生影响，相邻元素特指紧邻后面的元素。

}

Eg：设置浮动

左浮动

右浮动

一左一右浮动

清除浮动的常用方法

1、clear属性——常用clear：both;

如果知道是那边受浮动影响可以使用：clear:left,clear:right

2、同时设置width:100%(或固定宽度)+overflow:hidden;

{

　　注：当父包含块缩成一条时，用clear：both;方法清除浮动无效，它一般用于紧邻后面的元素的清除浮动。这个时候可以使用第二种方法。

}

层模型

层布局模型就像是PhotoShop中的图层编辑功能，每个图层能够精确定位操作。

层模型三种形式：

1、绝对定位(position:absolute)

2、相对定位(position:relative)

3、固定定位(position:fixed)

 三、层模型——绝对定位

Eg：实现div元素相对于浏览器窗口向右移动100px，向下移动50px。

四、层模型——相对定位

相对定位完成的过程是首先按static(float)方式生成一个元素，然后相对以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动

 Eg1：实现div相对以前位置向下移动50px,向右移动100px

Eg2：什么叫做“偏移前的位置保留不动”？

代码解释：

从效果图可以看出，虽然div元素相对以前的位置产生了偏移，但是div元素以前的位置还是保留着，所以后面的span元素是显示在了div元素以前位置的后面。

五、层模型——固定定位

fixed：表示固定定位，与absolute定位类似相似，但它的相对移动的坐标是视图本身（屏幕内的网页窗口）。

由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化。

除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响。

这与background-attachment:fixed;属性功能相同。

Eg：实现相对浏览器向右移动100px，向下移动50px，并且拖动滚动条时位置固定不变。

六、Relative与Absolute组合使用

 

代码解释：

1、参照定位的元素必须是相对定位元素的前辈元素

2、参照定位的元素必须加入position:relative

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

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

 七、盒模型代码简写

Eg：

margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/

缩写

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;

注意：padding、border的缩写方法和margin是一致的。

 八、颜色值缩写

当设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。

Eg1:

p{color:#000000;}

可以缩写为：

p{color:#000;}

例子2：

p{color:#336699;}

可以缩写为：

p{color:#369;}

九、字体缩写

Eg:

body{

　　font-style:italic;

　　font-variant:small-caps;

　　font-weight:bold;

　　font-size:12px;

　　font-height:1.5em;

　　font-family:"宋体",sans-serif;

}

缩写

 body{

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

}

代码解释：

1、字体缩写至少要指定font-size和font-family属性，其它属性如果未指定将自动使用默认值。

2、在缩写时font-size和line-height中间要加入"/"斜杠

十、颜色值与长度值

1、颜色值

#英文命令颜色

p{

　　color:red;

}

#RGB颜色（每一项值取0~255之间的整数或0%~100%的百分数）

p{

　　color:rgb(133,45,200);

}

p{

　　color:rgb(20%,33%,25%);

}

#十六进制颜色（每一项值由0~225变成十六进制00~ff）

p{

　　color:#00ffff;

}

2、长度值

#px(像素)

#em

#%百分比