CSS布局浮动和定位属性的区别
float: left|right; 可以自动排列自动折行, 但需要clear来配合清除浮动;display: inline-block 有些时候可以替代float实现相同的效果.
position: absolute|relative; 要配合top,left等定位;
使用:
position: absolute会导致元素脱离文档流,被定位的元素等于在文档中不占据任何位置,在另一个层呈现,可以设置z-index。PS的图层效果就是position: absolute。
float也会导致元素脱离文档流,但还在文档或容器中占据位置,把文档流和其它float元素向左或向右挤,并可能导致换行。图片的文字环绕布局效果就是float。
display的inline-block不脱离文档流,将block元素当作大型字符嵌入文档流内,类似于img或者input默认效果。
CSS布局浮动和定位属性的区别的更多相关文章
- 深入css布局篇(2) — 定位与浮动
深入css布局(2) - 定位与浮动 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下css布局相关的知识 ...
- 【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响
一.width:auto和width:100%的区别 1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再 ...
- CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响
---恢复内容开始--- 一.width:auto和width:100%的区别 1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是 ...
- DIV CSS布局容易忽略的属性
white-space:pre //保留空格,不然又多个空格值显示一个 white-space:nowrap //强制不换行,知道遇到</br> letter-spacing //字母间的 ...
- CSS学习笔记:定位属性position
目录 一.定位属性简介 二.各属性值的具体功能 1. relative 2. absolute 3. fixed 三.三种定位属性的效果总结 参考资料:https://www.bilibili.com ...
- css的浮动与定位
显示与隐藏 标签 属性 值 效果 区别 css的style display none 元素不可见 不占页面空间 css的style visibility hidden 元素不可见 占页面空间 disp ...
- CSS布局(二) 盒子模型属性
盒子模型的属性 宽高width/height 在CSS中,可以对任何块级元素设置显式高度. 如果指定高度大于显示内容所需高度,多余的高度会产生一个视觉效果,就好像有额外的内边距一样: 如果指定高度小于 ...
- CSS布局--浮动与清除
浮动和清除 浮动和清除是页面布局的重要属性.浮动的意思是指将元素从常规的文档流中取出来. 当你浮动一个元素的时候,浮动的元素会被浏览器尽量的往上放,能放多高就放多高,一直到某个元素的边界为止. 浮动元 ...
- CSS的浮动和定位
一.CSS中的浮动 1.定义和用法 float 属性定义元素在哪个方向浮动.在 CSS 中,任何元素都可以浮动.浮动会使原元素变成一个行级元素,而不论它本身是何种元素.如果浮动非替换元素,则要指定一个 ...
随机推荐
- 使用定时器settimeout、setInterval执行能传递参数的函数
无论是window.setTimeout还是window.setInterval,在使用函数名作为调用句柄时都不能带参数,而在许多场合必须要带参数,这就需要想方法解决.经网上查询后整理如下: 例如对于 ...
- Step-by-step from Markov Process to Markov Decision Process
In this post, I will illustrate Markov Property, Markov Reward Process and finally Markov Decision P ...
- System的两常用个静态方法
package cn.learn; /* System类在java.lang.System,和操作系统有关 1.currentTimeMillis直接调用,是一个返回为long型的静态方法 常用来计算 ...
- nmon内存分析
可参考: MemTotal:显示当前服务器物理内存大小,本服务器有8063180 KB≍7874 MB左右. MemFree:显示当前服务器的空闲内存大小,本服务器有5052336 KB≍4934 M ...
- MySQL格式化时间戳 统计当日,第二天,第三天,3个工作日以后的数据
mysql 查询出来的处理时间和开始时间都是13位的时间戳 SELECT `END_TIME`,`CREATE_TIME` FROM t_table 需求是统计当日,第二天,第三天,3个工作日以后的时 ...
- python常用模块----re模块
正则表达式就是匹配字符串内容的一种规则. 字符组: [0123456789] 表示0-9这个范围内的任意一个数字都可以与之匹配,简写为[0-9] [a-z] 表示匹配所有的小写字母 [A-Z] 表示匹 ...
- 04 volatile关键字实现原理
volatile关键字实现原理 1.volatile关键字的语义分析 作用:让其他线程能够马上感知到某个线程多某个变量的修改 保证可见性 对共享变量的修改,其他线程能够马上感知到 保证有序性 在重排序 ...
- 2019 Multi-University Training Contest 1 - 1011 - Function - 数论
http://acm.hdu.edu.cn/showproblem.php?pid=6588 新学到了一个求n以内与m的gcd的和的快速求法.也就是下面的S1. ①求: $ \sum\limits_{ ...
- python学习第十七天字符串的创建和操作方法
字符串也是任何编程语言最常见的编程语言,字符串是有序的,可以通过下标来访问,可以切片,可以查找,可以替换,字符串可以和列表之间互相转换 join() split() 等函数 1,字符串的创建 单引号 ...
- node留言板开发————node.js
各位需要的话可以下载去看一下. 源码下载链接:https://download.csdn.net/download/weixin_41018304/11833778