CSS系列:CSS中盒子的浮动与定位
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中盒子的浮动与定位的更多相关文章
- CSS 设计彻底研究(四)盒子的浮动与定位
第四章 盒子的浮动与定位 本章的重点和难点是深刻地理解”浮动“和”定位“这两个重要的性质,对于复杂页面的排版至关重要. 4.1 盒子的浮动 在标准流中,一个块级元素在水平方向会自动伸张,直到包含它的元 ...
- 前端开发—CSS 盒子、浮动、定位
盒子模型 margin padding border content margin: 用于控制元素与元素之间的距离:body自带 8 像素的margin 需要手动去除.(快递盒之 ...
- CSS小随笔(三)浮动与定位
先来说一下CSS中的浮动 一.浮动 1.标准流中的块级盒子,宽度将自动伸展为100%,而浮动的块级盒子,宽度不会自动伸展,而是由内容撑开 2.当一个盒子浮动,标准流中未浮动的其他盒子,将视浮动盒子不存 ...
- 【前端Talkking】CSS系列——CSS深入理解之line-height
1.写在前面 两个多周的时间没有写文章了,手好痒好痒,趁着公司在装修,从上周末到本周都在家办公,同时公司的项目并不紧急,于是抽着时间梳理了一下CSS中关于行高line-height的理解,今天发布出来 ...
- HTML+CSS系列:CSS选择器(标签、ID、类、通配符、后代、子元素、并集、伪类)
一.标签选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- CSS系列目录
1. 在HTML中引入CSS的方法 2. CSS选择器 2.1 CSS3新增选择器 3. CSS的继承与层叠特性 4. CSS中盒子模型 5. CSS中盒子之间的关系 6. CSS中盒子的 ...
- CSS学习系列2 -- CSS中的清除浮动
CSS中有一个很常见的问题,就是元素的浮动. 那么,到底什么是元素的浮动呢,我们来看一个例子 举个例子,在一个div里面内部有浮动元素的话,这个浮动元素会让这个div的高度塌陷. .myDiv{ ba ...
- CSS中的浮动和定位
在了解CSS中的浮动和定位之前有必要先了解清楚标准流和脱离标准流的特性 标准流的默认特性 1.分行.块级元素,并且能够dispay转换. 2.块级元素(block):默认独占一行,不能并列显示,能够设 ...
- css的核心内容 标准流、盒子模型、浮动、定位等分析
1.块级元素:如:<div></div>2.行内元素:如:<span></span>从效果中看块级元素与行内元素的区别: 通过CSS的设置把行内元素转换 ...
随机推荐
- 【原】iOS学习之Masonry第三方约束
1.Masonry概述 目前最流行的Autolayout第三方框架 用优雅的代码方式编写Autolayout 省去了苹果官方恶心的Autolayout代码 大大提高了开发效率 框架地址:https:/ ...
- python文件操作
总是记不住API.昨晚写的时候用到了这些,但是没记住,于是就索性整理一下吧: python中对文件.文件夹(文件操作函数)的操作需要涉及到os模块和shutil模块. 得到当前工作目录,即当前Pyth ...
- [面试] Design Questions
Uber总是考一些系统设计的题目,而且重复率很高,汇总了一下地里的所有design的题目,希望可以跟小伙伴们讨论下. Uber Design Questions 1. 让design uber ...
- 分布式数据库的四分结构设计 BCDE
首先,对关系型数据库的表进行四种分类定义: Basis 根基,Content 内容, Description 说明, Extension 扩展. Basis:Baisis 表是唯一的,为了实现标准而得 ...
- 如何对tableview进行自定义多选
前言: 很多入门不久的程序员或许都会遇到系统自带的tableview多选时cell选择时不能选择自己想要的点击时的颜色或者图片,这让初级开发者们很烦恼.今天,我试着花了几个小时的时间用了自己的想法,去 ...
- 问题2: 安装cocoaPods出现的一系列问题
在新电脑上安装cocoaPods的时候,出现了一系列的问题,现在记录下来,方便查看 1.出现 Invalid mark letter (press RETURN) 解决方案:输入 :wq 即可 2. ...
- gulp使用配置
gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速 ...
- CSS hack技巧大全
——作者:吴雷君 兼容范围: IE:6.0+,FireFox:2.0+,Opera 10.0+,Sarari 3.0+,Chrome 参考资料: 各游览器常用兼容标记一览表: 标记 IE6 IE7 I ...
- LeetCode题目按公司分类
LinkedIn(39) 1 Two Sum 23.0% Easy 21 Merge Two Sorted Lists 35.4% Easy 23 Merge k Sorted Lists 23.3% ...
- mongodb的用户管理及安全认证
1.确认mongodb的版本 > use admin switched to db admin > db.runCommand({}) { "version" : &q ...