CSS：CSS定位和浮动
CSS2.1规定了3种定位方案
1.Normal flow：普通流(相对定位 position relative、静态定位 position static)
普通流（normal flow，国内有人翻译为文档流）：普通流默认是静态定位，将窗体自上而下分成一行一行,块级元素从上至下、 行内元素在每行中按从左至右的挨次排放元素,即为文档流。
2.Float:浮动流
浮动流：元素的浮动，即可以让一个元素脱离原来的文档流，漂到另一个地方，漂到左边或右边等等。
3.Absolute position：绝对定位
绝对定位：就是直接将元素的位置写清楚，距离它的外层元素的左边、右边等多少距离。
第一部分、普通流Normal Flow演示：
代码：
CSS_Position.html
View Code
CSS_Position.css：静态定位 <position static 从上到下>
View Code
效果图：
CSS_Position.css：静态定位 <position static 从左到右>
View Code
效果图：
CSS_Position.css:相对定位 <position relative>
View Code
效果图：
第二部分、Float 浮动流演示：
CSS_Position.css：浮动一个元素
View Code
效果图：
CSS_Position.css：三个元素全部浮动
View Code
效果图：
CSS_Position.css：清除浮动元素
View Code
效果图：
第三部分、Absolute position绝对定位演示：
CSS_Position.html
View Code
CSS_Position.css: mylabel的默认位置
View Code
效果图：
CSS_Position.css：绝对定位、使用绝对定位改变mylabel的位置，使mylabel距离外层顶部-10px，距离外层右边10px：
View Code
效果图：
CSS：CSS定位和浮动相关推荐
- css区块定位之浮动与清除属性
float属性将所属标记的显示空间指定为一个浮动元素,并使其周围对象按一定的方式环绕它排列. float属性的作用就象图像和表格的align属性一样,但可以用到任何元素上. clear属性的作用是禁止 ...
- css框模型、定位、浮动
一.CSS 框模型概述 1.CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框.外边框的方式. 2.元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的 ...
- CSS中文档流之普通流，浮动及定位、浮动特性及清除浮动的方式、定位模式，子绝父相搭配定位方式、z-index层级
文档流: 普通流(normal flow): 字面意思是普通流或者标准流,也就是常说的文档流,指网页内标签正常是从上到下,从左到右排列的意思,css的定位机制有3种:普通流(标准流).浮动.定位. 浮 ...
- CSS框模型，浮动，定位以及其他属性
CSS框模型,浮动,定位以及其他属性 1.CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式 element : 元素. padding : 内边距,也 ...
- 将文字定位到浮动图片上|CSS
将文字定位到浮动图片上CSS 效果展示 <div class="remmend-item"><div class="image">< ...
- CSS3 属性选择器 伪类选择器 盒模型 圆角 阴影 CSS定位和浮动
HTML是网页的裸框架,但是现在已经是2020年了,你再做出一个80年代的网页来,恐怕是没HR要你了.所以学习CSS的重要性可想而知,CSS用途很广,是一门独立的编程语言,能美化网页,也能进一步提高自 ...
- 前端面试CSS自检（下）页面布局、定位与浮动和场景应用（先看问题 自己自述一遍 不会再看答案 ）
推荐大家的使用本篇文章的方式: 先看问题自己会不会,如果会的话,要自己说一遍,组织好语言. CSS的面试内容主要可以分四个部分: CSS基础.页面布局.定位与浮动和场景应用 CSS部分会涉及到代码的编 ...
- 跨浏览器的CSS固定定位{position:fixed}
不知道您是否留意了,浏览本站时,浏览器右下角有一个标着top的黑色直角三角形,可以点击它返回到正在浏览的网页页眉.当滚动网页时,它的位置一直没有任何改变,您感觉它怎么样?这就是通过CSS的定位属性{p ...
- html定位一个元素,css元素定位
css元素定位 1. position:static|无定位 position:static是所有元素定位的默认值, 一般不用注明,除非有需要取消继承的别的定位 example: #div-1 { p ...
- 在html中定位属性怎么用,CSS元素定位的使用方法
CSS元素定位的使用方法 导语:定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素.另一个元素甚至浏览器窗口本身的位置.以下是百分网小编为大家搜集的CSS元素定位 ...
最新文章
- 存储过程中返回结果集
- python account_GitHub - Python3WebSpider/AccountPool: Account Pool
- 树的高度从零还是一开始数_数据结构与算法之1——树与二叉树
- 网络营销专员浅析企业网站网络营销的多个优势！
- javascript创建对象的几种方式 .
- 如何禁掉SAP Fiori上传文件的病毒扫描设置
- qt下设置按钮不接收键盘鼠标但能响应 clicked()信号
- 预期的异常规则和模拟静态方法– JUnit
- 面试官：Spring代理目标bean时为何通过TargetSource类型对目标bean封装？
- qt制作刻度条（可用作时间及其他刻度）实现缩放，以及平移
- springboot进行微信公众号相关开发：（二）获取微信公众号access_token用以微信公众号各功能接口的调用
- tp5第三方支付-支付宝
- 怎样将图片制作转换圆形图片
- 术语-MOSS-微软协作工具：MOSS（微软协作工具）
- win10计算器_你所不知道的 Windows 10 小诀窍：万能计算器、虚拟键盘、屏幕截图标注...
- UEditor CKEditor 网页编辑器
- springboot项目快速搭建
- 计算机考试综合模块怎么做,《综合素质》几大模块备考指导要知道！
- 计算机图片怎么截图快捷键,电脑截图快捷键四种截屏方式,笔记本电脑如何截屏截图？...
- 什么是OPC UA？为什么它会继续使用？