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

    自从上次网赛发现这么个东西之后,深深地感受到了bitset的强大,0.0. 正常的bool占用1字节空间,bitset可以把这个缩到1bit,空间上8倍优化.正常用起来可能会跟位运算状态压缩类似,但是 ...

  2. Ubuntu 开启SSH 以及LAMP环境安装

    1. 更新 apt-get sudo apt-get update 2.安装 openssh sudo apt-get install openssh-server 3.设置root账号密码 sudo ...

  3. 创建表结构相同的表，表结构相同的表之间复制数据，Oracle 中 insert into XXX select from 的用法

    /**1. 用select 创建相同表结构的表*/create table test_tbl2 as select * from test_tbl1 where 1<>1; /**  2. ...

  4. springMVC入门配置及helloworld实例

    1. 新建web project 2. 往lib里copy必须的jar 3. 改写web.xml <?xml version="1.0" encoding="UTF ...

  5. OC与Swift创建pod

    Cocoa pods 是iOS最常用的类库管理工具   OC的使用   删除源   sudo gem sources -r https://rubygems.org/ 添加源(使用淘宝的镜像,记住要用 ...

  6. Classification of text documents: using a MLComp dataset

    注:原文代码链接http://scikit-learn.org/stable/auto_examples/text/mlcomp_sparse_document_classification.html ...

  7. (中等) HDU 4979 A simple math problem. , DLX+重复覆盖+打表。

    Description Dragon loves lottery, he will try his luck every week. One day, the lottery company brin ...

  8. Salesforce开发者学习笔记之二:Salesforce开发平台应用场景

    Salesforce作为一个全方位的CRM系统可以应用于企业中的各个不同部门以取代手工的,耗时的以及低效的业务流程,例如 基于报表的数据管理和分析 基于电子邮件的协同合作 本地的文件共享 各种手工操作 ...

  9. 如何成为一名优秀的UI设计师

    zccst整理 因为我自己就是一个 0 美术基础.非计算机.非艺术类科班出身,但从事视觉设计工作的同学,所以很多和题主一样大学里学着不喜欢的专业,想要转设计但又不知从何开始的朋友都来问过我类似的问题, ...

  10. Spring MVC 关于分页的简单实现

    据本人了解,目前较常用的分页实现办法有两种: 1.每次翻页都修改SQL,向SQL传入相关参数去数据库实时查出该页的数据并显示. 2.查出数据库某张表的全部数据,再通过在业务逻辑里面进行处理去取得某些数 ...