清楚了CSS 盒模型的基本概念、 盒模型类型, 我们就可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上,又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本,那么 CSS 布局模板就是末了,是外在的表现形式。
CSS包含3种基本的布局模型,用英文概括为:Flow、Layer 和 Float。
在网页中,元素有三种布局模型:
1、流动模型(Flow)
2、浮动模型 (Float)
3、层模型(Layer)
流动模型
先来说一说流动模型,流动(Flow)是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。
流动布局模型具有2个比较典型的特征:
第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。块状元素标签(div,h1,p)宽度显示为100%。
第二点,在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。(内联元素可不像块状元素这么霸道独占一行),内联元素标签a、span、em、strong都是内联元素。
浮动模型
块状元素这么霸道都是独占一行,如果现在我们想让两个块状元素并排显示,怎么办呢?不要着急,设置元素浮动就可以实现这一愿望。
任何元素在默认情况下是不能浮动的,但可以用 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>
层模型
什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。下面我们来学习一下html中的层布局。
如何让html元素在网页中精确定位,就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位(positioning)属性来支持层布局模型。
层模型有三种形式:
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)
绝对定位absolute
如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。
相对定位
如果想为元素设置层模型中的相对定位,需要设置position:relative(表示相对定位),它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。
!!!偏移前的位置不能被其他元素占用!!!
固定定位
fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed;属性功能相同。拖动滚动条时位置固定不变。
浮动布局代码示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>float浮动布局</title> <style> div{ width: 100px; height: 100px; background-color: red; border: 10px solid blue; /*float来设置元素浮动布局,浮动之后元素会脱离当前布局流, 元素原来的位置会被后边的元素挤占. float: left是往左浮动,right是往右浮动.*/ float: right; /*设置透明度,取值是[0.0~1.0]*/ opacity: 0.4; } div:nth-child(1){ float:left; } #cl{ height: 100px; background-color: gold; /*clear: 用来清除浮动元素对当前元素产生的影响, left只清除左浮动,right清除右浮动.both清除所有浮动.*/ clear: left; clear: both; } #nav{ height: 100px; background-color: #334566; text-align: center; line-height: 100px; /*display: none,可以用来隐藏元素*/ /*display: none;*/ } .content{ float: left; width: 33.3333%; background-color: #556689; height: 500px; border: 1px solid blue; box-sizing: border-box; } footer{ height: 100px; background-color: #112233; } #clearfoot{ clear:both; } </style> </head> <body> <div></div> <div></div> <!--多数情况下,我们可能会创建一个空标签在浮动元素之后,用来代替清除浮动影响.--> <header id="clear"></header> <section id="cl"></section> <header id="nav">这是一个导航栏</header> <section class="content">内容一</section> <section class="content">内容二</section> <section class="content">内容三</section> <footer id="clearfoot"> 这是页面底部 </footer> </body> </html>