CSS定位:普通流定位属性和浮动
2015-10-01 22:53
603 查看
一、CSS定位:改变元素在页面上的位置
二、CSS定位机制:
普通流:元素按照其在HTML中的位置顺序决定排布的过程
浮动
绝对布局
三、CSS定位属性:
四、CSS浮动:设置和取消元素浮动
float属性设置浮动,可能的值:
left 元素向左浮动
right 元素向右浮动
none 元素不浮动
inherit 从父级继承浮动属性
五、瀑布流
二、CSS定位机制:
普通流:元素按照其在HTML中的位置顺序决定排布的过程
浮动
绝对布局
三、CSS定位属性:
/* *position 把元素放在一个对应的位置中,位置包括: 静态的static 默认属性,此时设置的偏移量将失效,元素也不会产生堆叠 相对的relative 占用页面位置,与页面其它元素并排或并列显示,具有相对关系,使用偏移量效果叠加,可是元素堆叠,通过z-index设置堆叠显示顺序 绝对的absolute 不占用页面位置,悬浮于页面,与屏幕形成绝对关系,与页面其它元素堆叠显示,使用偏移量效果叠加,可以通过z-index设置堆叠显示顺序;不随滚动条滚动, 固定的fixed 不占用页面位置,悬浮于页面,与屏幕形成绝对关系,与页面其它元素堆叠显示,使用偏移量效果叠加,可以通过z-index设置堆叠显示顺序;随滚动条滚动 *top 元素向上的偏移量 *left 元素向左的偏移量 *right 元素向右的偏移量 *bottom 元素向下的偏移量 *overflow 设置元素溢出其区域发生的事情 *clip 设置元素显示的形状,主要用作图片 *vertical-align 设置元素垂直对齐方式,该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐 *z-index 设置元素的堆叠顺序 */ #div1{ width: 300px; height: 300px; background-color: red; position: absolute; top: 10px; left: 10px; z-index: 3; } #div2{ width: 300px; height: 300px; background-color: blue; position: absolute; top: 20px; left: 20px; z-index: 1; } #div3{ width: 300px; height: 300px; background-color: green; position: absolute; top: 0px; left: 30px; z-index: 2; }
四、CSS浮动:设置和取消元素浮动
float属性设置浮动,可能的值:
left 元素向左浮动
right 元素向右浮动
none 元素不浮动
inherit 从父级继承浮动属性
clear属性去掉浮动,可能的值: left 去掉元素向左浮动 right 去掉元素向右浮动 both 去掉左右两侧浮动 inherit 从父级继承来的clear值
五、瀑布流
<div id="div1"> <ul> <li><img src="bg.gif"></li> <li><img src="bg.gif"></li> <li><img src="bg.gif"></li> </ul> <ul> <li><img src="bg.gif"></li> <li><img src="bg.gif"></li> <li><img src="bg.gif"></li> </ul> <ul> <li><img src="bg.gif"></li> <li><img src="bg.gif"></li> <li><img src="bg.gif"></li> </ul> <ul> <li><img src="bg.gif"></li> <li><img src="bg.gif"></li> <li><img src="bg.gif"></li> </ul> <ul> <li><img src="bg.gif"></li> <li><img src="bg.gif"></li> <li><img src="bg.gif"></li> </ul> </div> 样式: *{ margin: 0px; padding: 0px; } #div{ margin: 20px auto; width: auto; height: auto; } ul{ float: left; } li{ float: left; list-style: none; }
相关文章推荐
- CSS实现背景透明,文字不透明,兼容所有浏览器
- web前端,实现上下翻页,支持鼠标滑动翻页h5+css+jq
- CSS文本和字体
- W3school学习笔记之CSS3
- CSS轮廓,突出元素
- CSS表格
- CSS列表
- CSS控制a标签链接的四种状态
- CSS样式背景样式
- CSS基础:基本选择器分类和使用
- CSS基础:text-overflow:ellipsis溢出文本
- HTML,CSS,font-family:中文字体的英文名称 (宋体 微软雅黑)
- 运用CSS实现float:center 居中浮动li
- css 两栏自适应布局--左边固定宽度 右边自适应
- 一、HTML和CSS基础--开发工具--Sublime前端开发工具技巧介绍
- CSS十问——好奇心+刨根问底=CSSer
- CSS文档流与块级元素(block)、内联元素(inline)
- CSS 最核心的几个概念
- CSS样式适配杂记
- grunt-contrib-cssmin使用指南