css中高度塌陷介绍以及定位介绍

最新推荐文章于 2024-08-12 18:14:21 发布

木头房子的格子铺

最新推荐文章于 2024-08-12 18:14:21 发布

阅读量3.1k

点赞数 2

分类专栏： css基础知识点文章标签： css 解决方案

本文链接：https://blog.csdn.net/mutouafangzi/article/details/72593906

版权

css基础知识点专栏收录该内容

8 篇文章 0 订阅

订阅专栏

浮动的问题——高度塌陷

高度塌陷的效果：定义两个元素是父子结构，为子元素设置浮动（父元素不设置高度）；
注意：高度塌陷的效果师傅和复制结构的浮现效果；但是在实际开发中，不希望出现这种效果。
解决方案——BFC
什么是bfc？
- 块级格式化环境
bfc的开启方式？
- 元素设置float浮动
- 元素的display设置inline-block；
- 元素设置绝对定位；
- overflow:hidden/auto（非默认值visible）;
- clear:both/left/right;——必须新增一个子元素（最后）
bfc的问题？

//开启BFC实验
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1{
            background-color: pink;
            /*height: 200px;*/
            width: 300px;

            /*开启BFC的方法*/
            /*一、开启父元素的同方向浮动；那么父元素和子元素一起脱离了文档流，
            父元素下面的同级元素依旧会上移，但是父元素也算是有了高度！这个高度和子集元素高度一致！*/
            /*float: left;*/

            /*二、设置父级元素为绝对定位或者固定定位，和设置浮动的效果一样。*/
            /*position:absolute;*/

            /*三、设置父级元素的display为incline-block，也就是将父级元素变成了行内块级元素？？？？？脱离文档流？？？
            父元素下面的同级元素会在原本文档流中的位置下些许下移，考虑是由于变成了块级元素导致两个块级元素导致？？？
            父级元素的高度被子级元素撑开了！
            设置成：display:block;就不行！
            */
            /*display:inline-block;*/

            /*四、设置父级元素的overflow非默认属性：
           父级元素会被子元素撑开,高度就是子元素的高度;
           父元素下面的同级元素不会上移。*/
            /*overflow:hidden;*/

            /*五（未开启BFC，但是解决了高度塌陷问题！）、设置父元素的高度，这种方法照成的结果和开启overflow的结果一致；但是本质应该是不相同的。*/
            /*height: 100px;*/
        }

        /*六、给塌陷的父级元素的最后添加一个元素，使该元素清除浮动，呈现块级样式。也可解决高度塌陷问题！*/
        /*.box1:after{*/
            /*content: '';*/
            /*display: table;*/
            /*clear: both;*/
        /*} */

        .box2{
            height: 300px;
            width: 300px;
            background-color: red;
        }
        .b1{
            background-color: purple;
            width: 100px;
            height: 100px;
            float: left;
        }
        .b2{
            background-color: green;
            width: 100px;
            height: 100px;
            float: left;
        }
    </style>
</head>
<body>
<div class="box1">
    <div class="b1"></div>
    <div class="b2"></div>
    <div class="clearfix"></div>
</div>
<div class="box2"></div>
</body>
</html>

css的定位

概念：css定位——表示的是某个元素在当前页面中的位置。
定位一定会有坐标轴的概念出现：
一个元素在当前页面的位置，其实就是一个坐标轴（X,Y）
css定位就是将坐标值（x，y）转换成css中某个具体的属性使用。
定位的值：

static——默认值，表示静态定位；
- 注意——并没有坐标值的概念；
absolute——表示绝对定位
fixed——表示固定定位
relative——表示相对定位

偏移量：

偏移量——某个元素相对于初始位置的移动的距离；
一个元素在页面中只有两种移动效果
- 垂直方向
- 水平方向
提供四种偏移量
- top-表示距离顶部的空间
- right-表示距离右边的空间
- bottom-表示距离下边的空间
- left-表示距离左边的空间
偏移量的作用
- 同时使用top和left时——常用方式；
  - top和left就是坐标轴中的坐标值的概念-
  - 使用bottom和right时
  - 当前元素定位在页面底部时——bottom；
  - 当前元素定位在页面右边时——right（至少可以使用left进行替换）。

绝对定位：

开启方式——position：absolute;（非static即可，默认值：static）
特点：
- 绝对定位的元素脱离文档流；
- 绝对定位的元素呈现块级效果；
- 只是开启绝对定位，而不设置坐标值的话，位置不会发生变化。
定位效果：
- 绝对定位的元素的父元素是< body>，相对于页面定位；
- 绝对定位的元素不是父元素< body>时
  - 如果父元素开启定位，则相对于父元素；
  - 如果父元素不开启定位，则依旧相对于页面。

固定定位——fixed
固定定位时绝对定位的一种特殊定位；
固定定位值相对于浏览器窗口的定位

相对定位——relative

注意：