1. 盒子的浮动

　　在标准流中，一个块级元素在水平方向会自动伸展，知道包含它的元素的边接；而在竖直方向与相邻元素依次排列，不能并排。

　　CSS中float属性，默认为none。将float属性的值设置为left或right，元素就会向其父元素的左侧或右侧靠紧。同时默认情况下，盒子的宽度不再伸展，而是根据盒子里面的内容的宽度来决定。

float: left;

　　可以使用clear来清除浮动：

clear: left | right | both;

2. 盒子的定位

　　在CSS中有一个position属性，用来进行定位操作。position属性可以设置为4个属性值之一：

　　◊ static：默认的属性值，该盒子按照标准流（包括浮动方式）进行布局；

　　◊ relative：相对定位，使用相对定位的盒子的位置常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。

　　◊ absolute：绝对定位，盒子的位置以它的包含框为基准进行偏移。绝对定位的盒子从标准流中脱离。它对其后的相邻盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。

　　◊ fixed：固定定位，它和绝对定位类似，只是以浏览器窗口为基准进行定位，当拖动浏览器的滚动条时，依然保持对象位置不变。

2.1 static

　　static为默认值，表示块保持在原本的位置上，不会有任何移动的效果。没有设置任何position属性相当于使用static方式。

2.2 relative

　　使用relative相对定位，除了将position属性设置为relative之外，还需要指定一定的偏移量，水平方向通过left或者right属性来指定，竖直方向通过top或bottom来指定。

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style type="text/css">

        .relative {

            position: relative;

            top: 20px;

            left: 20px;

            width: 500px;

        }

    </style>

</head>

<body>

    <div class="relative">Position相对偏移</div>

</body>

</html>

　　在上面的示例中，.relative若不设置width，则由于block元素会自动伸展到宽度与父元素相同，且加上left的20px，则在浏览器中预览时，会出现横向滚动条。

　　◊ 使用相对定位的盒子，会相对于它原本的位置，通过偏移指定的距离，到达新的位置。

　　◊ 使用相对定位的盒子仍在标准流中，它对父块和兄弟盒子没有任何影响。

2.3 absolute

　　示例：

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style type="text/css">

        body {

            margin: 20px;

            font-size: 12px;

        }

        #container {

            background-color: #a0c8ff;

            border: 1px dashed #000000;

            padding: 15px;

            width: 300px;

        }

        #container div {

            background-color: #fff0ac;

            border: 1px solid #000000;

            padding: 10px;

        }

        #item-2 {

        }

    </style>

</head>

<body>

    <div id="container">

        <div>Box-1</div>

        <div id="item-2">Box-2</div>

        <div>Box-3</div>

    </div>

</body>

</html>

　　预览效果：

　　使用absolute定位，修改#item-2的CSS代码：

#item-2 {

    position: absolute;

    top:;

    right:;

}

　　预览效果：

         

　　从预览效果中可以看出，此时item-2的显示范围已经不在container中，不占用container所包含的空间。

　　修改#item-2的CSS代码：

#item-2 {

    position: absolute;

    top: 10px;

    right: 10px;

}

　　效果预览：

   

　　修改了top和right的设置，，item-2显示效果仍为以浏览器窗口为基准。

　　absolute定位并不是都只能以浏览器窗口为基准来定位的，修改container的CSS代码：

#container {

    background-color: #a0c8ff;

    border: 1px dashed #000000;

    padding: 15px;

    width: 300px;

    position: relative;

}

　　显示效果预览：

   

　　这时的效果偏移距离没有变化，但是偏移的基准不再是浏览器窗口，而是container，即父div。

　　对于absolute定位的描述：

　　◊ 使用absolute定位的盒子以它的“最近”的一个“已经定位”的“祖先元素”为基准进行偏移。如果没有已经定位的祖先元素，则以浏览器窗口为基准进行定位。

　　“已经定位”的含义是position属性被设置，并且被设置为不是static的任意一种方式。

　　“最近”是指在这个节点的所有祖先节点中，距离该节点的层次最近的祖先节点，以距离最近的祖先节点作为定位基准。

　　◊ absolute定位的框从标准文档流中脱离，对其后的相邻其他盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。

2.4 fixed

　　fixed定位与absolute定位有些类似，区别在于定位的基准不是祖先元素，而是浏览器窗口或者其他显示设备的窗口。当访问者拖动浏览器窗口的滚动条时，固定定位的元素将保持相对浏览器窗口不变的位置。

　　示例：

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style type="text/css">

        body {

            font-size: 12px;

            margin: 0;

            padding: 0;

        }

        #tapbar {

            position: fixed;

            height: 30px;

            line-height: 30px;

            width: 100%;

            background-color: #f5f5f5;

            top:0;

            left:0;

        }

        #container {

            background-color: #a0c8ff;

            border: 1px dashed #000000;

            width:96%;

            margin:30px auto auto;

            height: 1500px;

        }

        #container div {

            background-color: #fff0ac;

            border: 1px solid #000000;

            padding: 10px;

        }

    </style>

</head>

<body>

    <div id="tapbar">固定定位栏</div>

    <div id="container">

        <div>Box-1</div>

        <div>Box-2</div>

        <div>Box-3</div>

    </div>

</body>

</html>

　　效果预览：

 

　　从预览效果中可以看出，设置了fixed定位的topbar栏没有随着浏览器的下拉滚动而变动位置。

3. z-index空间位置

　　z-index属性用于调整定位时重叠的上下位置，页面为x-y轴，垂直于页面的方向为z轴，z-index值大的页面位于其值小的上方。

　　z-index属性的值为整数，可以是正数也可以是负数。当块被设置了position属性时，该值便可以设置各块之间的重叠高低关系。默认的z-index值为0，当两个块的z-index值一样时，将保持原有的高低覆盖关系。

CSS系列：CSS中盒子的浮动与定位的更多相关文章

  1. CSS 设计彻底研究（四）盒子的浮动与定位

    第四章 盒子的浮动与定位 本章的重点和难点是深刻地理解”浮动“和”定位“这两个重要的性质,对于复杂页面的排版至关重要. 4.1 盒子的浮动 在标准流中,一个块级元素在水平方向会自动伸张,直到包含它的元 ...

  2. 前端开发—CSS 盒子、浮动、定位

    盒子模型 margin padding border content margin:            用于控制元素与元素之间的距离:body自带 8 像素的margin 需要手动去除.(快递盒之 ...

  3. CSS小随笔（三）浮动与定位

    先来说一下CSS中的浮动 一.浮动 1.标准流中的块级盒子,宽度将自动伸展为100%,而浮动的块级盒子,宽度不会自动伸展,而是由内容撑开 2.当一个盒子浮动,标准流中未浮动的其他盒子,将视浮动盒子不存 ...

  4. 【前端Talkking】CSS系列——CSS深入理解之line-height

    1.写在前面 两个多周的时间没有写文章了,手好痒好痒,趁着公司在装修,从上周末到本周都在家办公,同时公司的项目并不紧急,于是抽着时间梳理了一下CSS中关于行高line-height的理解,今天发布出来 ...

  5. HTML+CSS系列:CSS选择器(标签、ID、类、通配符、后代、子元素、并集、伪类）

    一.标签选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  6. CSS系列目录

    1.  在HTML中引入CSS的方法 2.  CSS选择器 2.1 CSS3新增选择器 3.  CSS的继承与层叠特性 4.  CSS中盒子模型 5.  CSS中盒子之间的关系 6.  CSS中盒子的 ...

  7. CSS学习系列2 -- CSS中的清除浮动

    CSS中有一个很常见的问题,就是元素的浮动. 那么,到底什么是元素的浮动呢,我们来看一个例子 举个例子,在一个div里面内部有浮动元素的话,这个浮动元素会让这个div的高度塌陷. .myDiv{ ba ...

  8. CSS中的浮动和定位

    在了解CSS中的浮动和定位之前有必要先了解清楚标准流和脱离标准流的特性 标准流的默认特性 1.分行.块级元素,并且能够dispay转换. 2.块级元素(block):默认独占一行,不能并列显示,能够设 ...

  9. css的核心内容 标准流、盒子模型、浮动、定位等分析

    1.块级元素:如:<div></div>2.行内元素:如:<span></span>从效果中看块级元素与行内元素的区别: 通过CSS的设置把行内元素转换 ...

随机推荐

  1. 图片采用base64压缩，可以以字符串的形式传送base64给服务端转存为图片

    (function () { var coverImage = document.querySelector('<div id="coverImage">file< ...

  2. Mac无法写入移动硬盘

    1.使用mac 磁盘工具,格式化移动硬盘 频繁穿插于mac于pc之间者,大批量拷贝大型文件者,请用exfat 首先,排除Fat32,虽然这是兼容性最好的文件格式,但一个不支持4g以上文件的格式(现在随 ...

  3. IOS管理文件和目录

    1.常见的NSFileManager文件方法 -(NSData *)contentsAtPath:path //从一个文件读取数据 -(BOOL)createFileAtPath: path cont ...

  4. 联想昭阳E47外接显示器屏幕由扩展改为复制

    公司给我配的电脑室是联想昭阳e47,显卡是集成显卡,很差,做开发看显示屏久了眼睛很累视力会下降的很快. 所以本人自己买了一个三星22寸的显示器,京东上￥779买的,第二天早上就送来了. 之前我自己的电 ...

  5. jquery常见获取高度

    jquery获取文档高度和窗口高度,$(document).height().$(window).height() $(document).height():整个网页的文档高度 $(window).h ...

  6. Ubuntu下Android Studio环境搭建

    1.JDK安装 a.准备 由于AS(Android Studio)不支持openjdk,需要另行下载oracle jdk,同时官网指出对于64位linux系统,为了能在其上运行32位程序,需要安装一些 ...

  7. JavaIO 将数据写入到文件中去

    package com.Practice_FileWriter; import java.io.FileWriter; import java.io.IOException; public class ...

  8. 输出日志实例改成用Spring的AOP来实现

    1.采用Interception Around通知的形式实现 Interception Around通知会在Join Point的前后执行,实现Interception Around通知的类需要实现接 ...

  9. (转)Vsdocman7.2 注册版

    Vsdocman是一个优秀的.NET源代码注释编写工具,方便的以GUI的方式设计.NET源代码的注释.我们只是大自然的搬运工:http://download.csdn.net/detail/iamyg ...

  10. 提取bmp图片的颜色信息，可直接framebuffer显示（c版本与python版本）

    稍微了解了下linux的framebuffer,这是一种很简单的显示接口,直接写入像素信息即可 配置好的内核,会有/dev/fbn 的接口,于是想能否提前生成一个文件,比如logo.fb,里面仅包含像 ...