[CSS3] 学习笔记-CSS定位

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

HTML学习笔记 css定位（静态，相对，固定，绝对布局）偏移案例第十二节（原创）参考使用表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
[CSS3] 学习笔记-CSS动画特效
在CSS3中,出现了很多出彩的效果,例如2D.3D以及过度.动画和多列等.这些效果为页面设计添加了很多的可选设计. 1.2D.3D转换转换,是使元素改变尺寸.形状.位置的一种效果:通过CSS3转换, ...
[CSS3] 学习笔记-CSS选择器
CSS3中,选择器的分类很多,有元素选择器.类选择器.ID选择器.属性选择器.后代选择器.子元素选择器.相邻兄弟选择器. 1.最常见的选择器就是元素选择器,文档的元素就是最基本的选择器,例如,h1{} ...
[CSS3]学习笔记-CSS基本样式讲解
1.CSS样式-背景 CSS运行应用纯色作背景,也允许使用背景图像创建相当复杂的效果 <!DOCTYPE html> <html> <head lang="en ...
[CSS3] 学习笔记--CSS盒子模型
1.CSS盒子模型概述盒子模型的内容范围包括:margin(外边距).border(边框).padding(内边距).content(内容)部分组成. 2.内边距内边距在content外,bord ...
[CSS3] 学习笔记-CSS入门基本知识
1.CSS概述 CSS指层叠样式表 CSS样式表极大的提高了工作效率 1)CSS基础语法: selector{ propery:value } 例1:h1{color:red;font-size:14 ...
HTML学习笔记 css定位浮动及瀑布流案例第十三节（原创）参考使用表
#fd { width: 100px; height: 150px; background-color: forestgreen; float: left; } #sd { width: 150px; ...
amazeui学习笔记--css（常用组件6）--图标Icon
amazeui学习笔记--css(常用组件6)--图标Icon 一.总结 1.关注用法即可:在 HTML 上添加添加 am-icon-{图标名称} class. <span class=&quo ...
CSS3学习笔记(3)-CSS3边框
p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...

随机推荐

使用 JavaScriptService 在&period;NET Core 里实现DES加密算法
文章<ASP.NET Core love JavaScript>和<跨平台的 NodeJS 组件解决 .NetCore 不支持 System.Drawing图形功能的若干问题> ...
Python&colon; 元组的基本用法
元组和列表是近亲,列表允许并且提供了方法来改变它的值,但元组是不可改变的,即不允许你改变它的值----这也是它没有方法的部分原因. 元组的主要作用是作为参数传递给函数调用.或是从函数调用那里获得参数时 ...
操作系统win2003 x64的，安装OFFICE2003后，DCOM服务找不到 WORD应用程序服务
打开注册表,找到以下健值 HKEY_CLASSES_ROOT\AppID\{00020906-0000-0000-C000-000000000046} HKEY_CLASSES_ROOT\CLSID\ ...
HDU4916 Count on the path(树dp&quest;&quest;)
这道题的题意其实有点略晦涩,定义f(a,b)为 minimum of vertices not on the path between vertices a and b. 其实它加一个minimum ...
C&num; - CSV(Comma-Separated Values)文件读取&period;
using System; using System.Collections.Generic; using System.Diagnostics; using System.IO; using Sys ...
Cmake用法
目录 1,Cmake introduce 1.1 常用的目录结构 2,CMakeLists.txt文件的写法 Cmake 常用命令 Scripting Commands set include Pro ...
基本promise
function myPromise(fn) { var value = null, callbacks = []; this.then = function (onFulfilled) { call ...
EXISTS 执行顺序
select * from a where a.s_status=1 and exists (select orderid from b where a.orderid=b.orderid) exis ...
XAF 与 CIIP
XAF 与 CIIP:网站:http://www.uims.top, XAF技术博客:http://www.cnblogs.com/foreachlife/ tylike 升级到 DevExpres ...
Linux防火墙配置与管理(16)
防火墙指的是一个由软件和硬件设备组合而成.在内部网和外部网之间.专用网与公共网之间的边界上构造的保护屏障.是一种获取安全性方法的形象说法,它是一种计算机硬件和软件的结合,使Internet与Intra ...