爱的供养吉他谱,铁符文构造体与你,湛师主页
float和定位(relative absolute)
1 首先说一下什么文档流
所谓文档流就是html文档中可显示元素在排列时所占用的位置。html文档流中的标签元素遵循“从左到右、从上到下”的排列次序，有如现代汉字的书写顺序一样。
比如说我们有多个p，根据网页的默认样式他是一个块极元素。所以他就会单独占一行。就会从上到下的排列。
又比如说有多个span标签，根据网页的默认的样式他是一个行级元素，就会从左到右的排列。
其实我简单的理解就相当于我们网页就像我们写作业的纸，我们的元素就写到上面。成为我们元素的内容。我们写东西的时候是不是将文字从左到右的写，写完啦一排再写另外一排呢。其实这个就叫做文档流。
2 什么是脱离文档流
就是元素从普通的布局排版中拿走，其他元素在进行定位的时候，就会想没有这个脱离文档流到元素去布局
二 现在我们来看一下什么是float
我觉得必须要讲的，float使父元素高度为0，并不是一个bug。因为你要知道float他设计的初衷是什么，就是想实现文字环绕效果。使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围.
比如说
.flaotone
{
width: 100px;
height: 100px;
background: blueviolet;
float: left;
}
我每天都很开心
我每天都很开心
效果是这样子的
清除float的两种方法
就是我们我们在最后加一个元素
.clear
{
clear: both;
}
缺点使页面多很多的不必要的元素，就是一些占着茅坑不拉屎的宝宝
就是给父元素添加一个伪类
缺点就是ie6 ie7根本不认识这哥们
.over-flow{ zoom: 1;}//处理兼容性问题
.clear:after
{
display: block;
overflow: hidden;
height: 0;
content: "";
clear: both;
}
或者
.over-flow{ zoom: 1;}
.clear:after
{
display: table;
content: "";
clear: both;
}
这两种是很常用的两种
有兴趣的可以看一下其他的方法，这个博客写得很清楚https://www.cnblogs.com/lingdu87/p/7770752.html(大牛博客)
三 什么是relative 注意使用relative属性，元素还是处于正常的文档流中，但是可以用top bottom left right对元素进行定位
有两个特性
相对自身
无侵入性
相对自身
比如说你已经给一个元素加了相对定位
并且设置里top left都为0，你会发现你的盒子是不会动的，可以看得出它是相对于自身定位。
无侵入性
这里用两种慕课网课程中的css深入理解之relative中的两种截图
移动以后
relative移动后它不会影响其他的元素
我觉得relative还有要讲的是它top bottom right left 的坐标
这里用两种慕课网课程中的css定位position的两种截图
当时top 和bottom的时候就是以自身(也可以说是网页)的左上角为原点 右边为x轴正方向 下边是y轴的正
当时top 和bottom的时候就是以自身(也可以说是网页)的左上角为原点 左边为x轴正方向 上边是y轴的正方向
四 什么是absolute
其实就相当于relative是大哥，而absolute是二弟，absolute就是相对于它父元素的做相对定位，如果父元素没有相对定位就一层一层的往上找到最上面的relative，注意的是元素使用这个属性将会拖离正常的文档流。
但是它的定位和relative是有区别的，如果没有父元素，它将以窗口里定位，注意不是网页，因为网页有可能比窗口要大
比如你以left和bottom来定位
他的原点就是窗口的左下角(如果有父元素就是父元素的做下角)在里面体同样用慕课网课程中的css定位position的一张截图
如果是right和top就是窗口的右上角(如果有父元素就是父元素的右上角)
如果代码这样子写
.father
{
width: 200px;
height: 200px;
background: red;
position: relative;
}
.son
{
width: 50px;
height: 50px;
right: 10px;
top: 10px;
background: blueviolet;
position: absolute;
}
效果是这样子的
好了这次的分享就是到这里了，有什么不足和错误的地方欢迎大家来指出。喜欢的话可以点一个赞，我还是你们的小可爱
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
css3 flex布局 justify-content:space-between 最后一行左对齐
我要评论
网友评论