前端_1(css浮动+定位总结）

最新推荐文章于 2022-11-26 15:03:35 发布

小冯的学习历程~

最新推荐文章于 2022-11-26 15:03:35 发布

阅读量739

点赞数 2

文章标签：前端 css

本文链接：https://blog.csdn.net/weixin_44362304/article/details/123447697

版权

定位机制

（标准）文档流、脱标流（float、position：absolute）

标准文档流现象：

空白折叠现象
高矮不齐、底边对齐
自动换行，一行写满，换行写

行级元素和块级元素

行级元素：与其他行内元素在一条水平线排列；不能设置宽、高，即文字的宽度

块级元素：独占一行；可设置宽、高

两者互相转换

// 将块级转换为行级
display:inline  

// 将行级转换为块级
// * 如果不设置宽、高，将填满父元素
display:block

由于标准文档流限制较多，不能实现页面所需功能，因此，我们可以使用3种方法进行脱标

浮动：float
绝对定位：position：absolute
固定定位：position：fixed
相对定位：position：relative
无定位：position：static

浮动

浮动：让某个块级元素脱离标准文档流，漂浮在标准文档流之上，和标准流不是一个层次

性质：

浮动元素脱标
浮动元素互相贴靠
浮动元素有“围绕文字”的效果
收缩

详细解释可以看：CSS样式----浮动（图文详解）_weixin_33912453的博客-CSDN博客

float包裹和崩溃

崩溃：父一级的块级元素高度发生了破坏

将子元素设置为浮动之后，父元素在没有指定高度的情况下，父元素的高度将不存在

包裹：

块级元素不设置宽、高时，默认宽度就是父级元素的宽度，div设置为float 产生包裹特性，宽度变为内容的宽度

由于包裹性特点，浮动元素一般需要手动设置width

垂直对齐方式：

底部对齐 (vertical-aglin：bottom) 行级元素转块级元素

垂直对齐（vertical-align）可以把行级元素变为块级元素

vertical-align:bootom(简写为valign:bootom;)

// 要实现垂直对齐：可把行高设置为和边框一样高度

清除浮动

清楚浮动的原因：

为了父元素不会出现"高度崩溃"
如果强制规定外层容器的尺寸，则显得就不那么灵活了，高度不能自动适应了
从某个元素开始，不再需要浮动效果了

clear 属性可选参数值为left 、 right 、 both、 none、 inherit

如何解决浮动元素父级塌陷(高度崩塌)的问题？

因为浮动的子元素元素脱离了标准流，使得父元素发生塌陷，如果父元素同样使用float脱离标准流，那么父元素和子元素就在同一排版空间，父元素就可以检测子元素的高度，所以就有了高度，我们给父元素添加overflow 和 zoom 可以有效地闭合住内部元素，使得父元素检测到当前元素的垂直总高度。clear同样具有闭合浮动的作用，需要在浮动的末尾进行使用，所以需要在所有浮动元素之后的元素给其添加clear 清除浮动才有效果。

清楚浮动的方法

方法一：在浮动元素的父级中调用样式 ``` clear：both；```

方法二：添加一个清除div

/*普通浏览器清楚浮动方法*/
<div id="clearDiv"></div>

            #clearDiv{

                   clear:both;

                      }

/*ie6清楚浮动的方法*/
.clearfix{
    *zoom:1;
}

方法三：在浮动元素的父级添加属性： ``` overflow:hidden ```

定位

相对定位（relative）

- 相对于自身位置进行定位。设置了position：relative后需要指定边距，如：top、left

- 不设置偏移量的时候，对元素没有任何影响

- 可以提升层级关系

- 相对定位的偏移参考元素是元素本身，不会使元素脱离文档流。元素的初始位置占据的空间会被保留

绝对定位（absolute）

- 相对于0 0的位置进行定位

- 相对于已定位的最近的祖先元素，如果没有已定位的最近的祖先元素，那么它的位置就相对于最初的包含块（如：body）

- 提升层级

- 脱离标准流

固定定位（fixed）

- 相对于浏览器窗口进行定位

- 设置固定定位之后，当前元素不会发生变化，可以做小广告

定位和浮动

绝对定位和浮动

float浮动，文档流的其他内容不会忽略float的位置（会识别出来），因此不会遮盖字体；

// float跳出了文档流，但没有跳出文本流所以不会覆盖文本

绝对定位，其内容则会被文档流的其他内容忽略，因而产生的浮动会遮盖字体

相对定位和浮动

相对定位和浮动可以一起使用，在float控制浮动方向且不遮盖字体的情况下，由相对定位的设置来改变模块的偏移距离。

z-index的使用

z-index改变层叠顺序。z-index:数字；数字大的在上，小的在下。数字最好以整倍数设置：z-index:300; z-index:200; z-index:100;
z-index的值设置不可以太小，因为在一个大的布局当中很可能需要插入一层或者多层的层叠关系，因此设置的稍微大一些能够方便值的设定。

总结：
- 相对定位不破坏文档流；绝对定位破坏文档流
- 通常情况下相对定位作为父一级单位绝对定位作为子一级单位（子绝父相）
- 相对定位可以不设置 top left 依然保留在原位置供绝对定位有参照物

-浮动与绝对定位的组合都会破坏文档流破坏之后绝对定位会忽略绝对定位所占用的位置而浮动会绕过浮动所占用的位置
-浮动与相对定位的组合便兼具两者的特点，既可以采用浮动又可以偏移