定位

浮动



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的定位和浮动的更多相关文章

  1. css区块定位之浮动与清除属性

    float属性将所属标记的显示空间指定为一个浮动元素,并使其周围对象按一定的方式环绕它排列. float属性的作用就象图像和表格的align属性一样,但可以用到任何元素上. clear属性的作用是禁止 ...

  2. CSS入门(定位之浮动定位、伪类之鼠标悬停、光标修改和透明度修改和列表样式)

    一.定位 所为定位,实际上就是定义元素框相对于其正常位置,应该出现在哪儿 定位就是改变元素在页面上的默认位置 分类: 普通流定位(元素默认的定位方式) 浮动定位 相对定位 绝对定位 固定定位 1.普通 ...

  3. CSS中定位和浮动对行内元素的宽高的影响

    行内元素的大小是由元素里面的内容撑开的宽高决定的,就算在css中对行内元素设置width,height.行内元素也会忽略宽高的设置. 但是当行内元素使用position:absolute或者posit ...

  4. CSS学习笔记——CSS中定位的浮动float

    昨天在解决了盒模型的问题之后又出现了新的知识模糊点:浮动和绝对定位?今天先解决浮动相关的问题,首先列举出想要解决的问题: 1.浮动到底是怎么样的? 2.浮动对元素的影响有什么? 3.浮动主要用来干什么 ...

  5. CSS：CSS定位和浮动

    CSS2.1规定了3种定位方案 1.Normal flow:普通流(相对定位 position relative.静态定位 position static) 普通流(normal flow,国内有人翻 ...

  6. CSS彻底研究(3) - 浮动,定位

    Github pages 博文 CSS彻底研究(3)-浮动,定位 一 . 浮动float I . 定义及规则 float默认为none,对应标准流的情况.当float : left;时,元素就会向其父 ...

  7. CSS中的定位与浮动

    CSS中的定位与浮动 本文主要讲述CSS中的三种定位样式static.relative和absolute的区别以及浮动元素的特征. 定位样式 CSS中定位样式position的取值有三个,默认值:st ...

  8. 深入css布局篇(2) — 定位与浮动

    深入css布局(2) - 定位与浮动      在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下css布局相关的知识 ...

  9. CSS：盒子的定位与浮动

    CSS--盒子定位.浮动与居中 HTML中的每个元素都是一个盒子   浏览器对HTML文档进行解析,根据盒子的属性对其进行排列. 每个元素默认使用标准文档流定位   标准文档流:是指浏览器读取HTML ...

随机推荐

  1. js获取客户端MAC地址

    最近遇到一个需求,医院要求呼叫中心账号必须对应MAC地址,也就是说该MAC地址必须和呼叫中心账号对应才可使用,这可就难道我了,这需求就要求每次都判断用户登录的电脑MAC地址是否有呼叫中心账号,当然只针 ...

  2. UglyNumber - 找“丑数”

    uglynumber的定义是只能被1,2,3,5整除的数 规定1是第一个uglynumber:以此类推,1 2 3 4 5 6 8 9 10 12 15 16 18 20 24 25 27 30 32 ...

  3. JQueryEasyUI学习简单Demo

    一.Layout布局 声明:此文档参考了jQuery EasyUI官方文档 布局容器有5个区域:北.南.东.西和中间.中间区域面板是必须的,边缘的面板都是可选的.每个边缘区域面板都可以通过拖拽其边框改 ...

  4. 文本三剑客---gawk基础

    gawk程序是Unix中原始awk程序的GNU版本.gawk程序让流编辑器迈上了一个新的台阶,它提供了一种编程语言而不只是编辑器命令.在gawk编程语言中,可以完成下面的事情: (1)定义变量来保存数 ...

  5. ant在持续集成的应用

    一.Ant概述 Ant是一个Apache基金会下的跨平台的构建工具,它是一个将软件编译.测试.部署等步骤联系在一起加以自动化的一个工具. 在本文中,我主要让介绍Ant的命令.构建文件.最后部分以一个实 ...

  6. 【Owin 学习系列】1. 第一个 Owin 程序

    IIS 中的 Owin 在 IIS 里面部署 Owin,既能得到 Owin 管道模型的灵活性和模块特性,也能很好地利用 IIS 成熟的配置,Owin 程序将会跑在 ASP.NET request 的管 ...

  7. PHP通过phpmailer批量发送邮件功能

    前端页面代码: 注意:目前发送人使用的qq邮箱支持的不是特别友好.建议使用网易 新浪 163等其他邮箱. 需要用到phpmailer包 下载地址:https://sourceforge.net/pro ...

  8. java中方法的参数传递机制

    问:当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递?  答:是值传递.Java 编程语言只有值传递参数.当一个对象实例作为一个 ...

  9. 设计模式-策略模式Strategy以及消灭if else

    概述 如果在开发过程中,出现大量的if else或者switch case 语句,如果这些语句块中的代码并不是包含业务逻辑,只是单纯的分流方法,那么,每一个语句块中都是一个算法或者叫策略. 背景 比如 ...

  10. 主流页面编辑器比对：TinyMCE VS FCKeditor

    开发中先用的是 FCKeditor 编辑器,感觉页面展示的东西太繁琐,所以换了 TinyMCE 编辑器. 为了方便理解,本文不采用穿插比对 先看 FCKeditor : 1.jsp :结束标签不能贴着 ...