页面的设计需要通过摆放不同的模块在不同的位置，这个时候需要使用到定位和浮动的知识点，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. NSString之Format

    三点用法总结: 类型转换:基本类型到对象类型 需要调用NSString的fotmat方法 NSString  *location = [NSString  stringWithFormat:@&quo ...

  2. STM32之FreeRTOS

    STM32之FreeRTOS http://www.freertos.org/index.html http://www.freertos.org/a00090.html#ST http://www. ...

  3. [Asp.Net Core轻量级Aop解决方案]AspectCore Project 介绍

    AspectCore Project 介绍 什么是AspectCore Project ? AspectCore Project 是适用于Asp.Net Core 平台的轻量级 Aop(Aspect- ...

  4. android 6.0获取权限

    Android版本升到6.0后最坑的就是权限问题,以下是我参考大神一个权限管理工具类,希望对大家有用 PermissionUtils.java import android.Manifest; imp ...

  5. [Java]局域网五子棋

    提示: 下面给的代码有问题哦,可以自己去调试 可用版下载 请点击这里 密码:x6ve(退出程序,端口并没有被关闭,可自行修改代码实现) img

  6. iOS开发——modifying the autolayout engine from a background thread

    很多时候,我们需要用到多线程的东西,比如红外线检测是否有人经过.这种情况需要搞个子线程在后台不断的检测,这个线程可能是第三方提供的,你调用它给的方法,然后显示提示框的时候,问题就来了. 提示信息:Th ...

  7. 自然语言处理高手_相关资源_开源项目（比如：分词,word2vec等）

    (1) 中科院自动化所的博士,用神经网络做自然语言处理:http://licstar.net (2) 分词项目:https://github.com/fxsjy/jieba(3) 清华大学搞的中文分词 ...

  8. react programming

    So you're curious in learning this new thing called Reactive Programming, particularly its variant c ...

  9. Java Spring MVC项目搭建（二）——项目配置

    1.站点配置文件web.xml 每一个Spring MVC 项目都必须有一个站点配置文件web.xml,他的主要功能吗....有一位大哥已经整理的很好,我借来了,大家看看: 引用博客地址: http: ...

  10. 云脉推出表格识别API接口可以自助接入

    针对如今市场上对于海量票据信息的录入需求,近期厦门云脉技术有限公司推出票据识别相关的产品与服务,更是在云脉OCR SDK开发者平台上上线表格识别API接口,供广大开发者和集成商自助接入.为了降低财务系 ...