文档章节

CSS浮动和定位学习笔记

 等风1306
发布于 2014/08/10 13:57
字数 292
阅读 149
收藏 8

1.首先先看一下浮动

(1)左浮动:元素本身经可能的左移动,知道碰到边框或者是别的浮动元素,把他右边的位置让给别的元素。如果右边的空间不够则自动换行。浮动对于快元素和行内元素都生效。

(2)右浮动:与左浮动相反。

2.CSS中的几种定位方式

(1)static:默认的定位方式。

(2)relative(相对定位):元素偏离某个距离,元素保持未定位前的形状,他原本占有的空间保留,从这一角度看,好像元素本身仍然在文档刘/标准流中一样。relative的参照点是他原来应该出现的位置。

(3)absolute(绝对定位):元素从原来的位置脱离,并让出自己的空间,后面的元素就会占用让出的空间。绝对定位是相对与离自己最近的那个非标准流而言的。

(4)fixed元素表现类似于将position设置为absolute,只不过其参照点始终是body。

© 著作权归作者所有

粉丝 2
博文 21
码字总数 6737
作品 0
朝阳
私信 提问
加载中

评论(2)

等风1306 博主

引用来自“kaneHuang”的评论

第四个 fixed
嗯,对!谢谢提醒!
kaneHuang
kaneHuang
第四个 fixed
前端开发笔记(3)css基础(中)

上一篇中我们学习了html的标准文档流,下面我们先来看看如何脱离标准流。 脱离标准流 css中一共有三种方法脱离标准流 浮动 绝对定位 固定定位 浮动 我们要搞清楚什么是浮动,先来看一个标准文...

lxq_xsyu
2016/11/18
0
0
端程序员入门所要学习的16个知识点

1、HTML常用标签 语言是什么 、Web前端开发语言、 HTML超文本标记语言 、 网页主体结构 、常用标签、超链接(a标签)、Img图片标签 2、盒子模型 初探Div盒子模型 、css样式、 简单css样式、盒...

急速奔跑中的蜗牛
2018/06/07
0
0
前端开发笔记(4)css基础(下)

标签定位 相对定位 相对定位是用来微调元素位置的,让元素相对于原来的位置进行调整。 绝对定位 绝对定位比相对定位更灵活 绝对定位脱离标准流:绝对定位的盒子,是脱离标准文档流的。所以,...

lxq_xsyu
2016/11/24
0
0
20W高级程序员总结:css相对定位 绝对定位 浮动分析

     CSS 相对定位   相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进...

学习web前端
2017/10/12
0
0
CSS布局学习

以前对CSS布局有些接触,但是因为没有系统的学习过,导致每次在调整和修改起来都觉得比较困难,为了解决这个难啃的骨头花了两天时间系统的把目前比较主流的CSS布局方式系统的看了一遍,解决了...

颭夏
2017/02/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

查看线上日志常用命令

cat 命令(文本输出命令) 通常查找出错误日志 cat error.log | grep 'nick' , 这时候我们要输出当前这个日志的前后几行: 显示file文件里匹配nick那行以及上下5行 cat error.log | grep -C ...

xiaolyuh
28分钟前
5
0
六、Java设计模式之工厂方法

工厂方法定义: 定义一个创建对象的接口,但让实现这个接口的类来决定实例化哪个类,工厂方法让类的实例化推迟到子类中进行 类型:创建型 工厂方法-使用场景: 创建对象需要大量重复的代码 ...

东风破2019
34分钟前
5
0
win服务器管理遇到的一系列问题记录

有些小伙伴在使用iis7远程桌面管理工具的时候总是会遇到一系列的问题,下面就是为大家介绍一下服务器日常管理过程中出现的问题及我的解决办法和心得。希望能帮到大家。   拒绝服务器重新启...

1717197346
42分钟前
6
0
flutter 剪切板 复制粘贴

复制粘贴功能 import 'package:flutter/services.dart'; Clipboard.setData(ClipboardData(text:_text));Clipboard.getData;...

zdglf
44分钟前
4
0
如何保证消息的可靠性传输?或者说,如何处理消息丢失的问题?

面试题 如何保证消息的可靠性传输?或者说,如何处理消息丢失的问题? 面试官心理分析 这个是肯定的,用 MQ 有个基本原则,就是数据不能多一条,也不能少一条,不能多,就是前面说的重复消费...

米兜
45分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部