您的位置：首页 > Web前端 > CSS

css-关于absolute和relative的一些笔记

2016-11-20 19:14 330 查看
根据张鑫旭老师的博客，一些笔记留作备忘

1、position：absolute


具有包裹性——包裹性换种说法就是让元素inline-block化，例如一个div标签默认宽度是100%显示的，但是一旦被absolute属性缠上，则100%默认宽度就会变成自适应内部元素的宽度。float也是典型的inline-block化元素，这种元素的inline-block化适用于任何水平的标签。

具有破坏性，会使父元素高宽塌陷。

有评论说absolute不会使宽度塌陷，实验后确实如此。


absolute不利于扩展维护，尽量少用。

2、absolute可用于实现左右分栏等高的效果

div元素absolute后不在文档流中，设置足够高的高度，边界可用于分栏的中线。

父元素要overflow hidden。

3、现代浏览器下block水平元素absolute化后不支持图片混排

4、relative影响最小化


将需要绝对定位的元素单独放在
relative
属性的标签下，于是，
relative
相对定位就不会影响任何其他元素，仅仅是其内部的绝对定位元素。

定位这个东西，如果要使用相对定位属性或是绝对定位属性，我个人比较推荐如下组合：
absolute+margin
（左上角元素定位，作用于当前元素）、
float+relative
（右上角元素定位，作用于当前元素）和
relative+absolute
（右下角元素定位，直接父标签+当前定位元素）。而目前web届大肆使用的外层div层设置relative属性，里面一些absolute元素定位的方法是不推荐的。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航