html之浮动和定位

浮动float

可以让原本不能同时显示在一行的元素显示在一行，

定位position

可以让元素位置更精确
分为以下几类
. 绝对定位：absolute脱离文档流，相对自己定位
. 相对定位relative :不脱离文档流，相对文档定位
. 固定定位fiex --相对窗口定位
. 静态定位static

特别情况
定位有父级的时候

父级：相对定位
子级：绝对定位
那么一个定位的元素，如果父级有定位，那么子级使用绝对定位时，都在相对父级定位
说明内联元素有定位，就支持宽高了
例如：

html><head><meta charset="UTF-8"><title></title><style type="text/css">/** 定位有父级的时候* 父级：相对定位* 子级：绝对定位* 一个定位的元素，如果父级有定位，那么子级使用绝对定位时，都在相对父级定位* 内联元素有定位，就支持宽高*/#div1{width: 500px;height: 400px;background: yellow;position: relative;}#div2{width: 200px;height: 100px;background: blue;position: absolute;left: 100px;top: 100px;}</style></head><body><div id="div1"><div id="div2"></div></div></body>
</html>

结果如下，子级元素就会随父级元素移动

溢出overflow

有三种格式

hidden
scroll
auto
例如2

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">div{width: 100px;height: 100px;border:1px solid:#000;/*overflow:auto;*/overflow: scroll;/** overflow* hidden* scroll* auto*/}</style></head><body><div>反馈共和国看见回复的咖啡馆的房间返回接电话航空港经济法东莞市方式红府火锅</div></body>
</html>

结果会隐藏多出的部分出现下拉条，

转载于:https://www.cnblogs.com/liu-ya/p/9356746.html

html之浮动和定位相关推荐

三、关于网页布局你该知道这些！（布局总结：标准流、浮动、定位）
一个完整的网页,是标准流.浮动.定位一起完成布局的,三者都有自己专门的用法. 标准流可以让盒子上下排列喝着左右排列,垂直的块级盒子显示就用标准流布局. 浮动可以让多个块级元素一行显示或者左右对齐盒 ...
CSS中文档流之普通流，浮动及定位、浮动特性及清除浮动的方式、定位模式，子绝父相搭配定位方式、z-index层级
文档流: 普通流(normal flow): 字面意思是普通流或者标准流,也就是常说的文档流,指网页内标签正常是从上到下,从左到右排列的意思,css的定位机制有3种:普通流(标准流).浮动.定位. 浮 ...
CSS3 浮动与定位
CSS3 浮动与定位浮动浮动特点清除浮动高度塌陷(清浮动) 定位相对定位绝对定位固定定位层级浮动 float:方向让块级元素在一行 <!DOCTYPE html> &l ...
CSS框模型，浮动，定位以及其他属性
CSS框模型,浮动,定位以及其他属性 1.CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框和外边距的方式 element : 元素. padding : 内边距,也 ...
Bootstrap——制作个人简历网页、工具类【边框（添加、删除、颜色、圆角）、清除浮动、颜色（文本、链接、背景）、display属性、浮动、定位、文本对齐】
制作个人简历网页代码: <!DOCTYPE html> <html><head><meta charset="UTF-8">< ...
CSS核心内容-标准流、盒子模型、浮动、定位
CSS核心内容-标准流.盒子模型.浮动.定位,了解了核心内容才能用CSS设计出一个简单的页面一.基础在了解核心内容之前需要先了解HTML中的两种标签:块级元素,行内元素: 块级元素:一个块级元素占 ...
1.01.21盒子模型，浮动，定位
1.01.21盒子模型,浮动,定位 1.盒子模型 1. 标准文档流网页在排版布局时,遵循的从上到下,从左到右的顺序正常的元素是会占据页面的空间大小的脱离文档流:不再遵循从上往下,从左往右的顺序( ...
阿ken的HTML、CSS的学习笔记_浮动与定位（笔记六）
欢迎光临你好我是阿ken 文章目录 6.1_元素的浮动 6.1.1_元素的浮动属性 float 6.1.2_清除浮动 clear 6.2_overflow 属性 6.3_元素的定位 6.3.1_元 ...
CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响
一.width:auto和width:100%的区别 1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再细说) ...
【css】浮动和定位对元素的宽度-外边距或其他元素的影响
一.width:auto和width:100%的区别 1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再细说) ...

html之浮动和定位

浮动float

定位position

溢出overflow

html之浮动和定位相关推荐

最新文章

热门文章