网站首页 > 技术文章 正文
position
position 这个属性决定了元素将如何定位。它的值大概有以下五种:
具体效果可以参考w3school的实例,或者自己写一下就明白了。
每个网页都可以看成是由一层一层页面堆叠起来的。
position 设置为 relative 的时候,元素依然在普通流中,位置是正常位置,你可以通过 left right 等移动元素。会影响其他元素的位置。
而当一个元素的 position 值为 absolute 或 fixed 的时候,会发生三件事:
把该元素往 Z 轴方向移了一层,元素脱离了普通流,所以不再占据原来那层的空间,还会覆盖下层的元素。
该元素将变为块级元素,相当于给该元素设置了 display: block;(给一个内联元素,如 ,设置 absolute 之后发现它可以设置宽高了)。
如果该元素是块级元素,元素的宽度由原来的 width: 100%(占据一行),变为了 auto。
由此观之,当 position 设置为 absolute 或 fixed,就没必要设置 display 为 block 了。
而且如果你不想覆盖下层的元素,可以设置 z-index 值 达到效果。
float
float 顾名思义,就是把元素浮动,它的取值一共有四个:
left right none inherit,光看名字就懂了,无需多言。
最初的 float 只是用来实现文字环绕图片的效果,仅此而已。
而现在 float 的应用已不止这个,前辈们也是写了无数博文来深入浅出的讲解它。 我就不班门弄斧写原理了,只说说 float 的几个要点就行了:
只有左右浮动,没有上下浮动。
元素设置 float 之后,它会脱离普通流(和 position: absolute; 一样),不再占据原来那层的空间,还会覆盖下一层的元素。
浮动不会对该元素的上一个兄弟元素有任何影响。
浮动之后,该元素的下一个兄弟元素会紧贴到该元素之前没有设置 float 的元素之后(很好理解,因为该元素脱离普通流了,或者说不在这一层了,所以它的下一个元素当然要补上它的位置)。
如果该元素的下一个兄弟元素中有内联元素(通常是文字),则会围绕该元素显示,形成类似「文字围绕图片」的效果。 下一个兄弟元素如果也设置了同一方向的 float,则会紧随该元素之后显示。
该元素将变为块级元素,相当于给该元素设置了 display: block;(和position: absolute; 一样)。
清除浮动的几种方法(推荐)
第一种方法:加入一个空的同类元素,然后设置元素css属性
clear:both;
第二种方法:使用overflow属性
此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。
使用该方法是只需在需要清除浮动的元素中定义CSS属性:overflow:auto,即可!
overflow:auto;是让高度自适应,zoom:1;是为了兼容IE6,也可以用height:1%;的方式来解决,注意,zoom不符合W3C标准。
overflow:hidden也可以实现。
{overflow:hidden; zoom:1;}
第三种方法:使用after伪对象清除浮动
after伪对象非IE浏览器支持,所以并不影响到IE/WIN浏览器。具体写法可参照以下示例。使用中需注意以下几点。
一、该方法中必须为需要清除浮动元素的伪对象中设置height:0,否则该元素会比实际高出若干像素;
二、content属性是必须的,但其值可以为空,蓝色理想讨论该方法的时候content属性的值为".",
.clearfloat{zoom:1;}
.clearfloat:after{
content:".";
display:block;
visibility:hidden;
height:0;clear:both;
}
猜你喜欢
- 2024-10-08 「译」22个必备的CSS小技巧(css%)
- 2024-10-08 盘点Pandas 的100个常用函数(pandas所有方法详解)
- 2024-10-08 CSS常考知识点(css的)
- 2024-10-08 CSS position 属性(css position:relative)
- 2024-10-08 CSS学习笔记--定位position属性的学习
- 2024-10-08 CSS3中神奇的box-shadow属性,到现在你还还没听说过吗?
- 2024-10-08 html网页的代码大全(html网页代码大全 分行)
- 2024-10-08 CSS四种定位static、relative、absolute、fixed
- 2024-10-08 徒手撸-登录页面(1)(徒手hit)
- 2024-10-08 请避免犯这9个常见的 CSS “坏习惯”
- 1509℃桌面软件开发新体验!用 Blazor Hybrid 打造简洁高效的视频处理工具
- 532℃Dify工具使用全场景:dify-sandbox沙盒的原理(源码篇·第2期)
- 495℃MySQL service启动脚本浅析(r12笔记第59天)
- 474℃服务器异常重启,导致mysql启动失败,问题解决过程记录
- 472℃启用MySQL查询缓存(mysql8.0查询缓存)
- 452℃「赵强老师」MySQL的闪回(赵强iso是哪个大学毕业的)
- 431℃mysql服务怎么启动和关闭?(mysql服务怎么启动和关闭)
- 429℃MySQL server PID file could not be found!失败
- 最近发表
- 标签列表
-
- c++中::是什么意思 (83)
- 标签用于 (65)
- 主键只能有一个吗 (66)
- c#console.writeline不显示 (75)
- pythoncase语句 (81)
- es6includes (73)
- windowsscripthost (67)
- apt-getinstall-y (86)
- node_modules怎么生成 (76)
- chromepost (65)
- c++int转char (75)
- static函数和普通函数 (76)
- el-date-picker开始日期早于结束日期 (70)
- js判断是否是json字符串 (67)
- checkout-b (67)
- localstorage.removeitem (74)
- vector线程安全吗 (70)
- & (66)
- java (73)
- js数组插入 (83)
- linux删除一个文件夹 (65)
- mac安装java (72)
- eacces (67)
- 查看mysql是否启动 (70)
- 无效的列索引 (74)