页面的设计需要通过摆放不同的模块在不同的位置，这个时候需要使用到定位和浮动的知识点，CSS3定位功能是很强大的，利用它你可以做出各种各样的网络布局。

1、CSS定位

1）定位机制

普通流：元素按照其在HTML中的位置顺序觉得排布的过程

浮动

绝对布局

2）定位属性

positon、top、left、right、bottom、overflow（设置元素溢出区域发生的事情）、clip（设置元素显示的形状）、vertical-align（设置元素垂直对齐的方式）、z-index（设置元素的堆叠顺序）

position有4个值：relative--相对布局   absolute--绝对布局  fixed--固定  static（top/left/right/bottom的偏移量不起作用）

 <body>
     <div id="position1">
     </div>
     <script>
         for(var i=0; i<100; i++){
             document.write(i+"<br>");
         }
     </script>
 </body>

对应的CSS文件：

 #position1{
     width: 100px;
     height: 100px;
     left:50px;
     background-color: blue;
     position:fixed;
     /*z-index: 1;*/
     /*布局中有覆盖时，z-index更大的值，覆盖在上面*/
 }

2、CSS浮动

CSS的float属性的值：left--元素向左浮动　　left--元素向右浮动　　none--元素不浮动　　inherit--从父级继承浮动属性

clear属性：去掉浮动

 <div id="container">
     <div id="fd"></div>
     <div id="sd"></div>
     <div id="td"></div>
     <div id="txt">hello</div>
 </div>
 </body>

对应的CSS文件：

 #fd{
     width: 100px;
     height: 100px;
     background-color: red;
     float: right;
 }
 #sd{
     width: 100px;
     height: 100px;
     background-color: blue;
 }
 #td{
     width: 100px;
     height: 100px;
     background-color: green;
     float: right;
 }
 #container {
     width: 500px;
     height: 300px;
     background-color: gray;
 }
 #txt{
     float:right;
     /*clear:right;*/
 }

3、CSS浮动的应用

 <body>
     <div id="div1">
         <ul>
             <li><img src="1.jpg" width="400px" ></li>
             <li><img src="2.jpg" width="400px"></li>
             <li><img src="3.jpg" width="400px"></li>
         </ul>
         <ul>
             <li><img src="4.jpg" width="400px"></li>
             <li><img src="5.jpg" width="400px"></li>
             <li><img src="6.jpg" width="400px"></li>
         </ul>
         <ul>
             <li><img src="7.jpg" width="400px"></li>
             <li><img src="8.jpg" width="400px"></li>
             <li><img src="9.jpg" width="400px"></li>
         </ul>
     </div>
 </body>

对应的CSS文件：

 *{
     margin: 0px;
     padding: 0px;
 }
 li{
     list-style: none;
 }
 #div1{
     width:950px;
     height: auto;
     margin:20px auto;
 }
 ul{
     width: 400px;
     float: right;
 }

[CSS3] 学习笔记-CSS定位的更多相关文章

  1. HTML学习笔记 css定位（静态，相对，固定，绝对布局）偏移案例 第十二节 （原创） 参考使用表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. [CSS3] 学习笔记-CSS动画特效

    在CSS3中,出现了很多出彩的效果,例如2D.3D以及过度.动画和多列等.这些效果为页面设计添加了很多的可选设计. 1.2D.3D转换 转换,是使元素改变尺寸.形状.位置的一种效果:通过CSS3转换, ...

  3. [CSS3] 学习笔记-CSS选择器

    CSS3中,选择器的分类很多,有元素选择器.类选择器.ID选择器.属性选择器.后代选择器.子元素选择器.相邻兄弟选择器. 1.最常见的选择器就是元素选择器,文档的元素就是最基本的选择器,例如,h1{} ...

  4. [CSS3]学习笔记-CSS基本样式讲解

    1.CSS样式-背景 CSS运行应用纯色作背景,也允许使用背景图像创建相当复杂的效果 <!DOCTYPE html> <html> <head lang="en ...

  5. [CSS3] 学习笔记--CSS盒子模型

    1.CSS盒子模型概述 盒子模型的内容范围包括:margin(外边距).border(边框).padding(内边距).content(内容)部分组成. 2.内边距 内边距在content外,bord ...

  6. [CSS3] 学习笔记-CSS入门基本知识

    1.CSS概述 CSS指层叠样式表 CSS样式表极大的提高了工作效率 1)CSS基础语法: selector{ propery:value } 例1:h1{color:red;font-size:14 ...

  7. HTML学习笔记 css定位浮动及瀑布流案例 第十三节 （原创） 参考使用表

    #fd { width: 100px; height: 150px; background-color: forestgreen; float: left; } #sd { width: 150px; ...

  8. amazeui学习笔记--css（常用组件6）--图标Icon

    amazeui学习笔记--css(常用组件6)--图标Icon 一.总结 1.关注用法即可:在 HTML 上添加添加 am-icon-{图标名称} class. <span class=&quo ...

  9. CSS3学习笔记(3)-CSS3边框

    p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...

随机推荐

  1. Windows Azure Table Storage 解决 Guid 查询问题

    在使用 Windows Azure Table Storage 的 CloudTableClient 对Azure 进行数据查询时,会发现在自定义类的Guid类型始终无法去成功查询出数据,对比发现 G ...

  2. JAVA调用c/c++代码

    JNI是Java Native Interface的缩写,中文为JAVA本地调用.使用JNI可以很方便的用我们的Java程序调用C/C++程序.很多时候,某些功能用Java无法实现,比如说涉及到底层驱 ...

  3. iOS之UITableView的上拉刷新

    #import "ViewController.h" #import "UITableView+PullRefresh.h" @interface ViewCo ...

  4. C# 开发系列(一)

    1.开发环境搭建: win7 32位系统,然后安装 visual studio 2012. 2.将 .net_framework 加入到windows 的环境变量当中. C:\Windows\Micr ...

  5. 仿苹果短信（微信 ，qq）左划弹出菜单

    难点: 1.功能的实现,左划.ListView的复用 2.单行显示,多行显示 3.ListView分割线.点击阴影,上下滑动左右滑动无阴影.多点触控改为单点触控 4.融球动画 http://blog. ...

  6. (简单) POJ 2750 Potted Flower，环+线段树。

    Description The little cat takes over the management of a new park. There is a large circular statue ...

  7. iOS开发——发短信，邮件

    在IOS开发中,有时候我们会需要用到邮件发送的功能.比如,接收用户反馈和程序崩溃通知等等,这个功能是很常用的.在苹果系统中,如果彼此的手机都是iOS设备,并且开通了iMessage功能,那么彼此之间的 ...

  8. python处理时间--- datetime模块

    1   Python提供了多个内置模块用于操作日期时间,像calendar,time,datetime.time模块我在之前的文章已经有所介绍,它提供的接口与C标准库time.h基本一致.相比于tim ...

  9. onchange、oninput、onpropertyChange事件的异同

    onchange事件适用于input\textarea\select元素上,支持各大浏览器,该事件只有在键盘或者鼠标操作改变对象属性,且失去焦点时触发,脚本触发无效: oninput事件适用于inpu ...

  10. linux学习小记：如何查看linux服务器的cpu数量，内核数，和cpu线程数

    查看物理cpu个数 grep 'physical id' /proc/cpuinfo | sort -u | wc -l 查看每个cpu核心数量 grep 'core id' /proc/cpuinf ...