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 中,任何元素都可以浮动.浮动会使原元素变成一个行级元素,而不论它本身是何种元素.如果浮动非替换元素,则要指定一个 ...
随机推荐
- SqlServer 高级查询
高级查询在数据库中用得是最频繁的,也是应用最广泛的. Ø 基本常用查询 --select select * from student; --all 查询所有 select all sex from ...
- (appium+python)UI自动化_02_appium启动手机app
前提:需先安装配置好appium+python自动化环境,已配置好环境的小伙伴可以参考以下步骤启动Android app,具体步骤如下: 一.USB连接手机 (1)手机USB连接电脑 (2)手机打开开 ...
- Picture【HDU - 1828】【扫描线】
题目链接 这道题求的是这些可能存在重叠的小方块可能构成的合成方块的周长的值是多少,有简单却会很复杂的做法就是去跑纵向和横向两次的扫描线,求得最后的两个周长和,但是这样的做法未免显得复杂了,我们完全可以 ...
- C#将数据写入本地文件
在平时开发过程中,可能会碰到内网测试没问题,但是更新到外网时会报错,这时我们又无法在外网进行调试.如果我们分析完业务可能产生的问题还是无法得到报错的原因,那么可以在关键的地方加上异常处理,然后将异常或 ...
- JS中设置input的type="radio"默认选中
html: <input id="Radio1" type="radio" value="男" name="st_Sex&q ...
- [Linux] 005 Linux 常见目录的作用及一些注意事项
1. Linux 常见目录及其作用 目录名 作用 /bin/ 存放系统命令的目录普通用户各超级用户都可以执行放在 /bin 下的命令在单用户模式下也可以执行 /sbin/ 保存和系统环境相关的命令只有 ...
- 简单谈谈Netty的高性能之道
传统RPC 调用性能差的三宗罪 网络传输方式问题:传统的RPC 框架或者基于RMI 等方式的远程服务(过程)调用采用了同步阻塞IO,当客户端的并发压力或者网络时延增大之后,同步阻塞IO 会由于频繁的w ...
- spring-第五篇之spring容器中的bean
1.bean的基本定义和bean别名 2.容器中bean的作用域 singleton:单例模式,在整个spring IoC容器中,singleton作用域的bean将只生成一个实例. prototyp ...
- python学习第二十天文件操作方法
字符有的存储在内存,有的存储在硬盘,文件也有增删改查的操作方法,open()方法,read()方法,readline()方法,close()文件关闭,write()写的方法,seek() 指针移动方法 ...
- 奇异值分解基础(SVD)
最近要了解一下Incremental PCA的一些知识,然后看到一篇论文里面讲到了SVD(奇异值分解),奈何自己以前没有把机器学习的课好好上,现在很多东西还是要补回来.所以,我就想了解一些SVD的基础 ...