position和float如何影响元素类型
程序员文章站
2022-04-25 11:17:55
...
<!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>
下一篇： 建网站笔记