CSS样式四--布局模型
来源:互联网 发布:网页搭建软件 编辑:程序博客网 时间:2024/05/21 11:24
布局模型与盒模型一样都是CSS最基本、最核心的概念。但布局模型是建立在盒模型基础之上的,又不同于我们常说的CSS怒句模式或CSS布局模版。如果说布局模型是本,那么CSS布局模版就是末了,是外在的表现形式。
CSS包含3种基本的布局模型,用英文概括为:Flow/Layer/Float。
在网页中,元素有三种布局模型:
- 流动模型(Flow)
- 浮动模型(Float)
- 层模型(Layer)
下面为大家详细介绍这三种模型。
流动模型
流动模型是网页的默认布局模型,也就是说网页在默认状态下的HTML网页元素都是根据流动模型来分布网页内容的。
特征:
* 块状元素都会在所处的包含元素内自上而下按顺序垂直延伸布局,因为在默认状态下,块状元素的宽度都是100%。实际上,块状元素都会以行的形式占据位置。
* 内联元素都会在所处的包含元素内从左到右水平分布显示。
浮动模型
块状元素这么霸道都是独占一行,如果我们想让两个块状元素并排显示,这时候可以设置元素为浮动模型就OK了。
任何元素在默认情况下是不能浮动的,但可以用CSS定义为浮动,如div,p,table,img等元素都可以被定义为浮动,代码如下:
//两个div元素一行显示。div{ width:200px; height:200px; border:2px red dotted; float:left; //或者右right}//也可以一左一右div{ width:200px; height:200px; border:2px red solid;}#div1{float:left;}#div2{float:right;}
层模型
层布局模型就像是图片软件PhotoShop中非常流行的图层编辑功能一样,每个图层能过精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧。但是在网页上层模型的使用还是有其方便之处的。
为了能让html元素在网页中精确定位,就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位(positioning)属性来支持层布局模型。
层模型有三种形式:
* 绝对定位(position:absoulte):将元素从文档流中拖出来,然后使用left/right/top/bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位,如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。代码如下:
div{ width:200px; height:200px; border:2px red solid; position:absolute; left:100px; //向左移动100个像素 top:50px; //向下移动50个像素}
- 相对定位(position:relative):通过left/right/top/bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于
以前的位置移动
,移动的方向和幅度由left/right/top/bottom属性确定,偏移前的位置保留不懂
(这句话的意思是,虽然元素移动了,但是元素的位置还保留着,元素后面跟着的元素的位置还是按照原来元素的位置的后面排放),代码如下:
div{ width:200px; height:200px; border:2px red solid; position:relative; left:100px; top:50px;}
移动前后的图片如下:
移动前
移动后
由图片可以明显看出,使用层模型的相对位置后,元素偏移钱的位置保留不动
* 固定定位:(position:fixed):固定定位与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或者改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流影响,这与background-attachment:fixed;属性功能相同。就像浏览网页时,网页上的广告一样,不会随滚动条的移动而移动,左下角的一直在屏幕左下角。代码如下:
div{ width:200px; height:200px; border:2px red solid; position:fixed; left:100px; top:50px;}
- CSS样式四--布局模型
- Html+Css基础之样式布局模型
- 4-基本布局+CSS样式属性+盒子模型
- CSS实现样式布局
- css常用布局样式
- css常用布局样式
- li 布局 CSS样式
- CSS样式布局
- css样式布局
- CSS样式主页布局
- CSS样式,布局,动画
- CSS样式盒子模型
- CSS的布局模型
- css基础-布局模型
- CSS布局模型
- CSS 布局模型
- CSS布局模型
- CSS布局模型
- 考研回忆录之时间效率
- 1014-A strange lift
- 防止忘记求角度
- iOS开发真机调试与App上架
- linux内存管理之数据结构
- CSS样式四--布局模型
- Web系统架构分层
- Spring mvc 上下文初始化过程
- android中Activity中的WindowManager与Window
- 2.2 从意图返回结果--从intent返回结果
- Mono fix compiled issue "Are you missing `System.Net.Http' assembly reference?"
- Linux 报文队列
- 如何阅读一本书(11)
- render直接渲染小技巧