css为什么要用浮动_CSS中有几种定位?如何使用?
1、CSS布局的三种机制
网页布局的核心——就是用CSS来摆放盒子位置。
CSS提供部分了3种机制来设置盒子的摆放位置:
普通流(标准流)
浮动(让盒子从普通流中浮起来 —— 让多个盒子(div)水平排列成一行)
定位(将盒子定在某一个位置 自由的漂浮在其他盒子的上面 —— CSS 离不开定位,特别是后面的 js 特效)
2,为什么使用定位?
我们先来看一个效果,同时思考一下用标准流或浮动能否实现类似的效果?
- 小黄色块在图片上移动,吸引用户的眼球。
2.当我们滚动窗口的时候,盒子是固定屏幕某个位置的。
结论:要实现以上效果,标准流或浮动都无法快速实现
3. 定位详解
定位也是用来布局的,它有两部分组成:定位 = 定位模式 + 边偏移
3.1边偏移
简单说, 我们定位的盒子,是通过边偏移来移动位置的。
在 CSS 中,通过 top、bottom、left 和 right 属性定义元素的边偏移:(方位名词),定位的盒子有了边偏移才有价值。 一般情况下,凡是有定位地方必定有边偏移。
3.2定位模式 (position)
在 CSS 中,通过 position 属性定义元素的定位模式,语法如下:
选择器 { position: 属性值; }
定位模式是有不同分类的,在不同情况下,我们用到不同的定位模式。
|值| 语义 |
|static|静态定位|
| relative | 相对定位 |
|absolute | 绝对定位 |
|fixed|固定定位|
3.2.1 静态定位(static) - 了解
静态定位是元素的默认定位方式,无定位的意思。它相当于 border 里面的none, 不要定位的时候用。
静态定位 按照标准流特性摆放位置,它没有边偏移。
静态定位在布局时我们几乎不用的
3.2.1 相对定位(relative) - 重要
相对定位是元素相对于它 原来在标准流中的位置 来说的。(自恋型)
效果图:
相对定位的特点:(务必记住)
相对于 自己原来在标准流中位置来移动的
原来在标准流的区域继续占有,后面的盒子仍然以标准流的方式对待它
- 3.2.3 绝对定位(absolute) - 重要
绝对定位是元素以带有定位的父级元素来移动位置 (拼爹型)
完全脱标 —— 完全不占位置;
父元素没有定位,则以浏览器为准定位(Document 文档)
绝对定位的特点:(务必记住)
绝对是以带有定位的父级元素来移动位置 (拼爹型) 如果父级都没有定位,则以浏览器文档为准移动位置
不保留原来的位置,完全是脱标的。
因为绝对定位的盒子是拼爹的,所以要和父级搭配一起来使用。
定位口诀 —— 子绝父相
刚才咱们说过,绝对定位,要和带有定位的父级搭配使用,那么父级要用什么定位呢?
子绝父相 —— 子级是绝对定位,父级要用相对定位。
子绝父相是使用绝对定位的口诀,要牢牢记住!
3.2.4 固定定位(fixed) - 重要
固定定位是绝对定位的一种特殊形式: (认死理型) 如果说绝对定位是一个矩形 那么 固定定位就类似于正方形
完全脱标 —— 完全不占位置;
只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置;
跟父元素没有任何关系;单独使用的
不随滚动条滚动。
4. 定位(position)的扩展
4.1 绝对定位的盒子居中
注意:绝对定位/固定定位的盒子不能通过设置 margin: auto 设置水平居中。
要这样使用:
left: 50%;:让盒子的左侧移动到父级元素的水平中心位置;
margin-left: -100px;:让盒子向左移动自身宽度的一半。
4.2 堆叠顺序(z-index)
在使用定位布局时,可能会出现盒子重叠的情况。
加了定位的盒子,默认后来者居上, 后面的盒子会压住前面的盒子。
应用 z-index 层叠等级属性可以调整盒子的堆叠顺序。
z-index 的特性如下:
属性值:正整数、负整数或 0,默认值是 0,数值越大,盒子越靠上;
如果属性值相同,则按照书写顺序,后来居上;
数字后面不能加单位。
注意:z-index 只能应用于相对定位、绝对定位和固定定位的元素,其他标准流、浮动和静态定位无效
4.3 定位改变display属性
前面我们讲过, display 是 显示模式, 可以改变显示模式有以下方式:
可以用inline-block 转换为行内块
可以用浮动 float 默认转换为行内块(类似,并不完全一样,因为浮动是脱标的)
绝对定位和固定定位也和浮动类似, 默认转换的特性 转换为行内块。
所以说, 一个行内的盒子,如果加了浮动、固定定位和绝对定位,不用转换,就可以给这个盒子直接设置宽度和高度等。
同时注意:
浮动元素、绝对定位(固定定位)元素的都不会触发外边距合并的问题。 (我们以前是用padding border overflow解决的)
也就是说,我们给盒子改为了浮动或者定位,就不会有垂直外边距合并的问题了。
css为什么要用浮动_CSS中有几种定位?如何使用?相关推荐
- css为什么要用浮动_css浮动的特性,与浮动带来的影响以及如何清除浮动
块元素在文档流中默认垂直排列,所以多个div从上至下依次排开 如果希望块元素在页面中水平排列,可以使用float来使元素浮动,从而脱离文档流,元素脱离文档流以后,它下边的元素会立即向上移动 css浮动 ...
- css为什么要用浮动_CSS问题和解决
1. 浏览器私有前缀(兼容) -moz- 2. 浮动引起的问题和解决 问题1 父元素高度撑不开,同父级的元素紧随其后,会被浮起来的子元素遮挡 解决 为父元素固定高度 父元素设置 overflow:hi ...
- CSS框模型,浮动,定位以及其他属性
CSS框模型,浮动,定位以及其他属性 1.CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式 element : 元素. padding : 内边距,也 ...
- css参考手册css3手册_CSS手册:面向开发人员CSS便捷指南
css参考手册css3手册 I wrote this article to help you quickly learn CSS and get familiar with the advanced ...
- css改火狐滚动条样式_css布局系列1——盒模型布局
明确基本概念 网页的布局类似于在一个大盒子中摆放各不相同的小盒子.在布局之前,首先要明确几个概念: 1. 块元素:在页面中独占一行,高度默认被内容(子元素)撑开,宽度默认为父元素的100%,也即aut ...
- html中使浮动的字为行排列,CSS布局:float浮动
优秀文章:https://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 浮动细节原理 所有元素设置float浮动之后,会脱离文档流 ...
- CSS布局最常用属性float(浮动)和position(定位)
在进行CSS网页布局时,对元素与容器进行布置与规划,最常用的两个属性就是浮动float和定位position.这两个属性的理解对CSS网页布局的学习非常重要.我们52CSS.com就这两个属性的相关知 ...
- html文本设置float,css怎么float(浮动)?
在css中,浮动是一种使元素脱离文档流的方法,会使元素向左或向右移动,其周围的元素也会重新排列.Float(浮动),往往是用于图像,但它在布局时一样非常有用. 浮动是一种非常有用的布局方式,它能够改变 ...
- [css] 为什么会出现浮动?在什么时候需要清除浮动呢?
[css] 为什么会出现浮动?在什么时候需要清除浮动呢? 因为在 div + css 代替 table 布局之后,利用 float 很容易进行一些自适应的布局,比如双飞燕和圣杯布局.当然,float ...
最新文章
- [原创]windows server 2012 AD架构 试验 系列 – 3 创建备份DC2
- 电脑怎么分屏2个显示器_程序员一台电脑装2个显示屏?因为专业
- linux 内核网络协议栈
- String str =new String(“abc“)和 String str = “abc“的比较
- 关于C# this 指针
- Bean的解析与注册
- 欢乐纪中某B组赛【2018.12.22】
- 前端学习(1551):补充cloak
- oracle sql语句大全
- Linux学习之FTP服务
- maven报错Non-resolvable parent POM for com.wpbxin:springboot2-first-example:0.0.1-SNAPSHOT: Could not
- Mybatis(7)参数传递和结果封装
- CentOS系统安装Java
- 通信行业最齐全的英语缩语手册
- python邮件发送 STMP
- 遗传算法原理和Python实现
- codesys 简单案例_CoDeSys编程手册范本
- iOS小知识:nib本地化、图片本地化字符串本地化(APP 内的本地化切换)
- HDU 5698 瞬间移动 (组合数 + 阶乘逆元)
- 5款免费的项目管理软件(推荐收藏)