CSS布局模式
来源:互联网 发布:五钻淘宝店铺值多少钱 编辑:程序博客网 时间:2024/06/06 00:45
CSS包含3种基本的布局模型,用英文概括为:Flow、Layer 和 Float。
在网页中,元素有三种布局模型:
1. 流动模型(Flow)
2. 浮动模型 (Float)
3. 层模型(Layer)
流动模式:
流动是默认的网页布局模式。 流动布局模式的2个比较典型的特点:
- 块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div,h1,p)宽度显示为100%。
- 在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。(内联元素可不像块状元素这么霸道独占一行)。
浮动模式:
使块状元素实现浮动在一行; 如:
div{float:left;}
所有div元素向左浮动。
层模式:
层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。
如何让html元素在网页中精确定位,就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位(positioning)属性来支持层布局模型。
层模型有三种形式:
1. 绝对定位(position: absolute)
``` 元素选择器{ position:absolute; left:value; right:value; top:value; bottom:value; } ```
2. 相对定位(position: relative)
元素选择器{ position:relative; left:value; right:value; top:value; bottom:value; }
3.固定定位(position: fixed)
元素选择器{ position:fixed; left:value; right:value; top:value; bottom:value; }
颜色透明度的处理:
Chrome、Firefox等 opacity:value(0~1);IE---filter: alpha(opacity=value[0~100]);
阅读全文
0 0
- css布局模式
- CSS布局模式
- css布局
- css布局
- css布局
- css-布局
- css布局
- css 布局
- css布局
- CSS~~布局
- css布局
- Css布局:
- CSS布局
- css布局
- css布局
- CSS布局
- CSS布局
- CSS布局
- [IOS APP]蒋勋说西洋美学史
- 数据分析(入门篇)-第一章-高效处理千万数据-Part2(Microsoft Query工具)
- 大数据环境搭建(测试)
- Angular学习资料
- java去掉空格
- CSS布局模式
- Python解释器的种类
- HTML 自定义元素教程
- 20170705测试入门随想
- iOS SQLite语句
- 有点颓废
- d7升级到xe10
- jQuery
- iOS