CSS布局模型
来源:互联网 发布:网络消费者的购物流程 编辑:程序博客网 时间:2024/06/06 09:02
一、流动模型
(1)块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布;
(2)在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示(内联元素可不像块状元素这么霸道独占一行)。
二、浮动模型
比如:块状元素霸道都是独占一行,浮动模型则可以使得让两个块状元素并排显示。
(1)如下代码可以实现两个 div 元素一行显示:
div{ width:200px; height:200px; border:2px red solid; float:left;}<div id="div1"></div><div id="div2"></div>
(2)当然你也可以同时设置两个元素右浮动也可以实现一行显示:
div{ width:200px; height:200px; border:2px red solid; float:right;}
div{ width:200px; height:200px; border:2px red solid;}#div1{float:left;}#div2{float:right;}
三、层模型
(1)绝对定位:如下面代码可以实现div元素相对于浏览器窗口向右移动100px,向下移动50px:
div{ width:200px; height:200px; border:2px red solid; position:absolute; left:100px; top:50px;}<div id="div1"></div>
(2)相对定位:如下代码实现相对于以前位置向下移动50px,向右移动100px:
#div1{ width:200px; height:200px; border:2px red solid; position:relative; left:100px; top:50px;}<div id="div1"></div>
(3)固定定位:以下代码可以实现相对于浏览器视图向右移动100px,向下移动50px。并且拖动滚动条时位置固定不变:
#div1{ width:200px; height:200px; border:2px red solid; position:fixed; left:100px; top:50px;}<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
0 0
- CSS的布局模型
- css基础-布局模型
- CSS布局模型
- CSS 布局模型
- CSS布局模型
- CSS布局模型
- 7.31css布局模型
- CSS布局模型
- CSS布局模型
- 【Html】css布局模型
- css布局模型
- CSS-布局模型
- CSS 布局模型
- CSS布局模型
- CSS布局模型
- CSS布局模型
- CSS布局模型
- css布局模型
- C++中如何分割字符串
- Android 蓝牙的使用(待续)
- SI2302低压MOS管- 场效应管SI2302低压管
- 堆
- goroutine 小问题
- CSS布局模型
- Swift 基本控件UIAlertView学习
- 【智能路由器】openwrt创建用户软件包
- java和android的基础
- OpenVirtualization otzon 学习笔记
- ngnix的安装小记
- mm编译 问题
- VS生成DLL没有生成LIB文件的解决方法
- JVM系列之JVM体系(一)