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

    求二分图的最小点覆盖集,并输出 对于每一个a[i][j]=1,我们从行i-->列j建立一条边 显然,这张图是一张二分图.左边的节点代表删除哪一行,右边的节点代表删除哪一列.中间的边代表所有a[i ...

  2. MySQL数据文件的导入、导出

    1.导出整个数据库 mysqldump -u 用户名 -p 数据库名 > 导出的文件名 mysqldump -u wcnc -p smgp_apps_wcnc > wcnc.sql 2.导 ...

  3. iOS开发——判断邮箱格式

    //判断邮箱格式 -(BOOL)isValidateEmail:(NSString *)email { NSString *emailRegex = @"[A-Z0-9a-z._%+-]+@ ...

  4. 【解决】System.Web.Http.Description 缺失

    一.问题描述 使用visual studio 2013创建mvc4 api模板,然后build,run,broken,出错如下: Error 1 The type or namespace name ...

  5. <!DOCTYPE> 声明 引发的错误

    <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前. 在写模板的时候,因为最近开始给每个文件添加注释,无意中将注释写在文件的第一行.导致页面 ...

  6. p1349星屑幻想

    这道题的原题目我也不知道是什么. 大致题意是有一个图,有些点的权值已确定,要求你确定其他点的权值使所有边两个点的权值的xor和最小,输出所有点的最终权值,输出有spj: 解法是最小割,由于题目要求的使 ...

  7. discuz开发学习

    2014年3月24日 10:36:10 遇到一个问题,discuz 缓存的样式,没有自动生成.后来去后台 进行操作才有效. 解决了之前的遇到的 首页没有套用样式的问题. 现在的问题是 模版的扩展图片 ...

  8. linux下安装mysql（编译mysql源码）

    编译所需软件地址 http://mysql.mirror.kangaroot.net/Downloads/  -- 下载需要的mysql版本例如mysql-5.5.39.tar.gz    目前还不太 ...

  9. PHP根据设备类型自动跳转相应网址页面，这个现在实用

    现在移动设备上网也很方便,比如Android智能手机,iPhone/iPad等,很多网站都相继推出了针对电脑和这些手机等移动设备访问的网页,如果你的系统是用PHP写的,那面本代码对你会很实用,可根据这 ...

  10. SQL之left join、right join、inner join

    创建表(Create table): CREATE TABLE A ( Id INT PRIMARY KEY, Name VARCHAR(20) NOT NULL); CREATE TABLE B ( ...