布局和定位
来源:互联网 发布:蝴蝶标本价格淘宝 编辑:程序博客网 时间:2024/06/03 14:53
网页的三种布局
- 流动模型(flow)
flow:默认的网页布局模型。 - 浮动模型(flow)
可以让块级元素显示在一行,用到float:left/right;
层模型(layer)
层模型有三种形式:
(a)position:absolute;
这种形式将元素从文档流中拖出,然后用left,right,top,bottom属性相对于最接近的一个具有定位属性的父包含块进行绝对定位,如果不存在,则相对于body即浏览器窗口(b)
positon:relative;
通过left,right,top,bottom属性确定元素在正常的文档流中的偏移位置。相对定位首先按照static(float)方式产生一个元素(并且元素像层一样浮动),然后相对于以前的位置移动,移动前的位置不变(虽然div元素相对于以前的位置产生了偏移,但是元素以前的位置还是保留着)。(c)
position:fixed;
它的相对移动的坐标是视图(屏幕内网页窗口),不会随着浏览器窗口的滚动条而改变,不受文档流的影响background-attachment:fixed属性相同。
另外,relative和absolute组合使用使被设置元素不想对于浏览器定义
<div id="box1"><!--参照定位的元素--> <div id="box2">相对参照元素进行定位</div><!--相对定位元素--></div>
#box1{ width:200px; height:200px; position:relative; }#box2{ position:absolute; top:20px; left:30px; }
0 0
- flex---->定位和布局
- 布局和定位
- 布局和定位
- css-布局和定位
- 理解绝对定位和相对定位布局
- 网页布局,绝对定位和相对定位
- css元素定位和布局
- CSS定位和DIV布局
- flex:Flex 组件的定位和布局
- Flex 组件的定位和布局
- css 浮动和定位的两种三栏布局
- Flex 组件的定位和布局
- Flex4基础-组件定位和容器布局
- Flex4基础-组件定位和容器布局
- Flex4基础-组件定位和容器布局
- 关于CSS中的布局和定位
- 16.定位模板,布局和样式
- CSS布局的漂浮和定位
- 部分透明,异形窗口
- php & ajax 小例子——仿百度搜索自动完成下拉框
- 输入符>>(C++)
- iOS性能调优
- java进阶(五)------springMVC---springMVC+Hibernate+maven完整搭建运行步骤
- 布局和定位
- Android之获取屏幕和视图高和宽
- 域对象——ServletContext及应用
- LightOJ 1009 Back to Underworld
- [POJ 3468] A Simple Problem with Integers Splay树
- listview回滚到顶部
- com.android.dex.DexIndexOverflowException: Cannot merge new index 66299 into a non-jumbo instruction
- SQL基础知识1
- 数据结构—图