position和float如何影响元素类型

最新推荐文章于 2022-03-14 20:01:40 发布

废柴小z

最新推荐文章于 2022-03-14 20:01:40 发布

阅读量123

点赞数

分类专栏： HTML+CSS

本文链接：https://blog.csdn.net/qq_34568700/article/details/113805922

版权

HTML+CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>position与float</title>
</head>
<body>
<!-- position:static,absolute,relative,fixed; -->
<!-- 知识点一 -->
    <!-- 定位和浮动如何影响盒子的display类型：
    relative|static : 作用元素原来是什么类型的设置定位后依旧是原来类型，并不会对盒子的类型造成影响。

    position:absolute | position:fixed | float:left ：
    不论作用的元素原来是什么类型（display:none除外，因为display:none的元素根本就不存在），元素都会被自动转换成行内块元素,这时，即便给作用元素设置 display:inline或者display:block，也依旧是不起作用的
     -->
     <!-- 例如 -->
     <style type="text/css">
         .sty_p{
            width:200px;
            height:200px;
            background-color: pink;
        }
     </style>
    <!-- <span style="position:relative" class="sty_p">你好啊</span> -->
     <!--相对定位不改变元素类型 -->


    <!-- <span style="position:absolute;" class="sty_p"></span> -->
    <!-- <span style="float:left;" class="sty_p"></span>你好啊 -->
    <!-- <span style="position:fixed;" class="sty_p"></span> -->
    <!-- 这三个使行内元素变为行内块元素 -->



    <!-- <span style="float:left;display:inline;" class="sty_p"></span>你好啊 -->
    <!-- <span style="float:left;display:block" class="sty_p"></span>你好啊 -->
    <!-- 变为行内块后即便设置inline或block，这个也不起作用，如果多写diaplay:inline-block也是多余的 -->



    <!-- 知识点二 -->
    <!-- 定位元素与浮动之间有什么影响 -->
   <!--  一个元素如果设置了绝对定位和固定定位（ position:absolute | fixed;），就不能再给它设置浮动。即便给它设置了浮动，浮动也是不会起作用的。这是两个不同的流，一个是浮动流，另一个是“定位流(这是自己起的名字，呵呵)”。
    但是 设置相对定位和静态定位的元素（relative |static ）可以给它设置浮动，他们的效果是相互叠加的 -->

    <!-- 相对定位和浮动同时使用效果会叠加，绝对定位使浮动属性失效不起作用 -->
    <style type="text/css">
         .sty_p{
            width:200px;
            height:200px;
            background-color: pink;
        }
     </style>
     <!-- <span style="float:right" class="sty_p"></span> -->
    <!-- <span style="float:right;position:relative;top:50px;right:100px;" class="sty_p"></span> -->
    <!-- <span style="float:right;position:absolute;" class="sty_p"></span> -->


    <!-- 知识点三：浮动元素对文本没有任何影响 -->
    <!-- 浮动产生的原因是为了解决图文混排的问题，所以不管同一级别的浮动元素是谁覆盖了谁，其中的文字都会被挤到元素的外边，不会产生覆盖。 -->
    <style type="text/css">
        .sty_p{
            width:200px;
            height:200px;
            background-color: pink;
        }
        .sty_y{
            width:200px;
            height:200px;
            background-color: yellow;
        }
    </style>
    <!-- <div class="sty_p" style="float:left"></div>
    <div class="sty_y"></div> -->

    <!-- <div class="sty_p" style="float:left"></div>
    <div class="sty_y">你好啊</div> -->

    <!-- 知识点四：浮动元素对父元素的影响及BFC简单介绍：
    浮动元素的父元素是没有高度的，除非其中的非浮动元素把它撑起来。（浮动元素无法撑起父元素的高度）但是如果给父元素添加overflow:hidden，就会使父元素产生高度。
    这个的原理：是使父元素生成了一个BFC的独立空间。
    简单来说，我们的HTML页面是由很多box组成的，但其实不同类型的盒子的渲染规则是不一样的，他们被分成两种类型，一种是行内元素和行内块元素的渲染规则，被称为IFC（属性为 block, list-item, table 的元素，会生成 block-level box），
    另一种是块级元素的渲染规则，被称为BFC（display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box）
    而BFC定义是：它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的盒子如何布局，并且这个区域和外部的区域毫不相干。
    BFC有一个规则是：计算BFC的高度时，浮动元素也参与计算
    所以在这个独立空间里，父盒子的高度计算就需要加上浮动元素的高度。-->



    <!-- 两栏自适应布局原理 -->
    <!-- BFC布局规则中有一条规定：每个元素的margin的左边， 和它的父元素的border的左边相接触(对于从左往右的的格式化的盒子，否则是相反的)。即使存在浮动的元素也是这样。
    所以，即使存在浮动的元素，但main的左边依然是和父元素的左边相接触
　　BFC布局规则中第四条规定：
    BFC的区域不会与float box重叠。
　　我们可以通过触发mian使她生成一个BFC， 来实现自适应两栏布局。 -->
    <style type="text/css">
        .lt{
            float:left;
            width:200px;
            height:200px;
            background-color: red;
        }
        .main{
            width:500px;
            height:500px;
            background-color: yellow;
            overflow:hidden;
        }
    </style>
    <div>
        <div class="lt"></div>
        <div class="main">

        </div>
    </div>

</body>
</html>

废柴小z

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
position和float如何影响元素类型

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>position与float</title></head><body> <!-- 定位
复制链接

扫一扫

专栏目录