css的定位和浮动
定位
浮动
float代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
#d0,p{
width: 400px;
border: 1px solid red;
}
#d0 div{
width:100px;
height:100px;
margin:10px;
}
#d1{
background-color: red;
}
#d2{
background-color: green;
}
#d3{
background-color: blue;
}
/*浮动*/
#d1,#d2,#d3{
float: right;
}
#d1,#d2,#d3{
float: left;
}
/*消除浮动影响*/
/*只消除对叔叔的影响*/
p{
clear: left;
}
</style>
<title>浮动</title>
</head>
<body>
<div id="d0">
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<p>浮动时注意观擦我的位置你会发现很别扭</p>
</div>
</body>
</html>
照片墙
图片一般用li标签包裹这样的话加载的快,因为用li标签的话浏览器解释是会默认为为同一一种格式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
li{
/*去掉列表前面的符号*/
list-style-type: none;
}
body{
background-color: #066;
}
ul{
width: 780px;
/* border: 1px solid red;*/
margin: 30px auto;
}
li{
width: 218px;
padding: 10px;
margin: 10px;
border: 1px solid #ccc;
float: left;
background-color: #fff;
}
p{
text-align: center;
}
/*采用相对定位,在hover时设置很小的偏移量
从而实现抖动效果*/
img:hover{
position:relative;
left: 2px;
top: -2px;
}
</style>
<title>照片墙</title>
</head>
<body>
<ul>
<li>
<img src="../images/01.jpg" alt="">
<p>你要去旅行吗</p>
</li>
<li>
<img src="../images/02.jpg" alt="">
<p>你在何方?</p>
</li>
<li>
<img src="../images/03.jpg" alt="">
<p>难道去了东洋?</p>
</li>
<li>
<img src="../images/04.jpg" alt="">
<p>醉里寻梦</p>
</li>
<li>
<img src="../images/05.jpg" alt="">
<p>大梦三千</p>
</li>
<li>
<img src="../images/06.jpg" alt="">
<p>别走了光</p>
</li>
</ul>
</body>
</html>
相对、绝对、固定定位
代码块
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
div{
width: 318px;
height: 318px;
border: 1px solid red;
/*不设置偏移量,只是为了便于子元素做绝对定位。*/
position: relative;
}
p{
position: absolute;
bottom: 10px;
left: 0;
background-color: #fff;
text-align: center;
width: 319px;
}
</style>
<title>新闻图片</title>
</head>
<body>
<div>
<img src="../images/3.jpg">
<p>苍老师到此一游!</p>
</div>
</body>
</html>
点击图片时显示在最上面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
div {
width: 700px;
height: 500px;
background-color: #066;
margin: 30px;
position: relative;
}
#i1{
position: absolute;
left: 200px;
top: 50px;
}
#i2{
position: absolute;
left: 100px;
top: 100px;
}
#i3{
position: absolute;
left: 250px;
top: 150px;
}
img:HOVER{
/*堆叠顺序*/
z-index: 999;
}
</style>
<title>堆叠顺序</title>
</head>
<body>
<div>
<img alt="" src="../images/1.jpg" id="i1">
<img alt="" src="../images/2.jpg" id="i2">
<img alt="" src="../images/3.jpg" id="i3">
</div>
</body>
</html>
消息框
元素的显示方式(display)
1.块
- 有宽高、独立成行(垂直排列)
- hn p div ol ul table
2.行内
- 没有宽高、不独立成行(横向排列)
- span b strong i em u del a
3.行内块
- 有宽高、不独立成行(横向排列)
- img input select textarea
修改显示方式
- display:block; 块
- display:inline; 行内
- display:inline-block; 行内块
- display:none; 隐藏此元素
css的定位和浮动的更多相关文章
- css区块定位之浮动与清除属性
float属性将所属标记的显示空间指定为一个浮动元素,并使其周围对象按一定的方式环绕它排列. float属性的作用就象图像和表格的align属性一样,但可以用到任何元素上. clear属性的作用是禁止 ...
- CSS入门(定位之浮动定位、伪类之鼠标悬停、光标修改和透明度修改和列表样式)
一.定位 所为定位,实际上就是定义元素框相对于其正常位置,应该出现在哪儿 定位就是改变元素在页面上的默认位置 分类: 普通流定位(元素默认的定位方式) 浮动定位 相对定位 绝对定位 固定定位 1.普通 ...
- CSS中定位和浮动对行内元素的宽高的影响
行内元素的大小是由元素里面的内容撑开的宽高决定的,就算在css中对行内元素设置width,height.行内元素也会忽略宽高的设置. 但是当行内元素使用position:absolute或者posit ...
- CSS学习笔记——CSS中定位的浮动float
昨天在解决了盒模型的问题之后又出现了新的知识模糊点:浮动和绝对定位?今天先解决浮动相关的问题,首先列举出想要解决的问题: 1.浮动到底是怎么样的? 2.浮动对元素的影响有什么? 3.浮动主要用来干什么 ...
- CSS:CSS定位和浮动
CSS2.1规定了3种定位方案 1.Normal flow:普通流(相对定位 position relative.静态定位 position static) 普通流(normal flow,国内有人翻 ...
- CSS彻底研究(3) - 浮动,定位
Github pages 博文 CSS彻底研究(3)-浮动,定位 一 . 浮动float I . 定义及规则 float默认为none,对应标准流的情况.当float : left;时,元素就会向其父 ...
- CSS中的定位与浮动
CSS中的定位与浮动 本文主要讲述CSS中的三种定位样式static.relative和absolute的区别以及浮动元素的特征. 定位样式 CSS中定位样式position的取值有三个,默认值:st ...
- 深入css布局篇(2) — 定位与浮动
深入css布局(2) - 定位与浮动 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下css布局相关的知识 ...
- CSS:盒子的定位与浮动
CSS--盒子定位.浮动与居中 HTML中的每个元素都是一个盒子 浏览器对HTML文档进行解析,根据盒子的属性对其进行排列. 每个元素默认使用标准文档流定位 标准文档流:是指浏览器读取HTML ...
随机推荐
- Python爬虫从入门到放弃(十二)之 Scrapy框架的架构和原理
这一篇文章主要是为了对scrapy框架的工作流程以及各个组件功能的介绍 Scrapy目前已经可以很好的在python3上运行Scrapy使用了Twisted作为框架,Twisted有些特殊的地方是它是 ...
- LoadRunner压力测试之Unique Number参数类型、Random Number参数类型浅析
前几天工作需要用LoadRunner进行压力测试,期间对手机号进行参数化设置. 当时选用了<Value>137{Random_quhao}{Unique_weiyi}</Value& ...
- redhat nginx随机启动脚本
开机自动启动nginx 1. 扔脚本进去/etc/init.d/ 2. 授权 chmod +x nginx 3. 一旦抛出:binsh^M错误就执行编码改写 设置do ...
- 谈谈localhost与127.0.0.1
localhost意为本地主机,指这台计算机,是给回路网络接口的标准主机名,对应的IP地址为127.0.0.1,可访问本地服务器的web项目(http://localhost). 那么它们有什么区别呢 ...
- (转)添加eclipse、MyEclipse、Spring Tool Suite的反编译插件
很多兄弟为在IDE里看不到源代码类而不得不下一个反编译工具,但是这样会降低代码效率,如果能直接在IDE里看,何乐而不为呢!现在我整理了一下网上很多兄弟的设置反编译的经验. 可分为下面几步. 1 下载J ...
- angular JS中使用jquery datatable 自定义搜索按钮点击事件 和mRender的 ng-click事件
'use strict'; app.controller('DataTableCtrl', function ($scope, $compile) { $scope.searchFiles = { n ...
- mysql导出指定字段或指定数据到文件中
使用mysqldump把mysql数据库的数据导出到文件中还是挺方便的:比如说要导出baijunyao数据库: // mysqldump -u用户名 -p 数据库名 [表名]> 导出的文件名 m ...
- Azure 认知服务 (5) 计算机视觉API - 使用C#代码实现读取图片中的文字(OCR)功能
<Windows Azure Platform 系列文章目录> 在笔者之前的文章:Azure 认知服务 (4) 计算机视觉API - 读取图片中的文字 (OCR) 介绍了使用用户界面,在海 ...
- 踩坑之路_"var name = ' ';"_迷之BUG
情景介绍:最近写一个拖拽生成图表的工具,自己的思路每次mousedown的时候动态将this的name属性值赋值给全局中变量(自己手贱测试时直接将变量名命名为了'name',一大波bug还有30s到达 ...
- Linux下 两台机器文件/文件夹 相互拷贝
Linux下 两台机器文件/文件夹 相互拷贝 设有两台机器 :A:*.101及 B:*.102. 把A下的.temp/var/a.txt拷贝到B机器的/text/目录下: 进入B机器:scp root ...