浮动与定位

skqpp1314

于 2022-10-28 08:39:24 发布

阅读量130

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/skqpp1314/article/details/127564575

版权

浮动
一个标签一旦使用了浮动，就会脱离了（跳出了）原来的页面模板，并且他的宽和高也是实际的盒子模型的宽和高，不再是之前的默认值。浮动可以理解为让某个div元素（块级标签）脱离标准流（原来的页面布局漂浮在标准流之上，和标准流不是一个层次）
float属性
left：元素向右浮动
right：元素向左浮动
none：默认值，元素不浮动，会显示在其文本中出现的位置
<style>
.box {
   width:900px;
   margin-top:10px;
   border:2px #03C solid;
   padding:10px;
}
.box div{padding:10px;}
.layer01 {
   border:2px #F00 dashed;
}
.layer02 {
   border:2px #00F dashed;
}
.layer03 {
   border:2px #060 dashed;
}

</style>
</head>
<body>
<div class="box">
<div class="layer01"><img src="img/course.jpg" /></div>
<div class="layer02"><img src="img/photo.jpg" /></div>
<div class="layer03"><img src="img/tx.jpg" /></div>
<p>这个P标签不进行浮动，请观察变化。duang~duang~duang~睁大眼睛了米有~<br/>
这个P标签不进行浮动，请观察变化。duang~duang~duang~睁大眼睛了米有~<br/>
这个P标签不进行浮动，请观察变化。duang~duang~duang~睁大眼睛了米有~<br/>
这个P标签不进行浮动，请观察变化。duang~duang~duang~睁大眼睛了米有~</p>
</div>
清除浮动（clear）
left：在左侧不允许浮动元素
right：在右侧不允许浮动元素
both：在左右两侧都不允许浮动元素
none：默认值，允许浮动的元素出现在两侧
清除浮动的时候，仅仅是清除了该元素的左边或者右边的浮动效果，并不会影响自身的浮动效果。
清除浮动的时候可能会出现父级边框塌陷的问题，原因是元素浮动后已经脱离了标准的文档流，消除浮动之后没有办法进行恢复。如何解决呢？
设置父元素的高度
为父元素(溢出元素的父元素)添加overflow属性
在浮动元素后面加空的div,然后将该空的div的左右浮动都清除
overflow熟悉主要是处理内容的溢出处理
visible：默认值，内容不会被修剪，会成现在盒子外面
hidden：内容会被修剪，但是其余内容不可见
scroll：内容会被修剪，但是浏览器会显示滚动条方便查看
auto：如果内容被修剪，则浏览器会显示滚动条方便查看
定位
元素可以使用的顶部，底部，左侧和右侧属性定位
position 属性指定了元素的定位类型。
position 属性的五个值：
Static：默认值，即没有定位；
Relative：相对定位，相对于原来的位置而言
Absolute：绝对定位
Fixed：固定位置
相对定位
即相对于元素原来的位置进行移动，可以使用三个div来设置背景来进行观察,可以使用Top,left,right,bottom,来具体的进行设置
设置前一定要记得先设置position的属性值
<div id="father">
<div id="first">第一个DIV</div>
<div id="second">第二个DIV</div>
<div id="third">第三个DIV</div>
</div>
#third {
   background-color:#9292C9;
   border:1px #395E4F dashed;
   position:relative;
   right:20px;
   bottom:30px;
}
设置相对定位的盒子是相对于原来的位置而言，通过偏移量，到达新的位置
设置相对定位的盒子，原来的位置仍然在文档流中，对父级和相邻的元素没有影响
设置相对定位的盒子原来的位置会被保留下来
设置了相对定位的盒子层级会被提高，如果新的位置有内容会被覆盖
相对定位的特性
相对于自己的初始位置来定位
元素位置发生偏移后，它的原来的位置会被保留下来
层级的提高，可以把标准文档流中的元素及浮动元素覆盖在下边的相对定位的使用场景
相对定位一般情况下很少自己单独使用，都是配合绝对定位使用的，为绝对定位创在定位父级又不设置偏移量
绝对定位
absolute：left/right/top/bottom
绝对定位的元素会从标准的文档流中脱离，
元素发生绝对定位的偏移之后，元素原来的位置不会被保留
绝对位置是根据离它最近的一个“已经定位”的祖先元素作为基准，如果所有的祖先元素都没有进行定位的话，则以浏览器窗口作为基准。
绝对定位的元素层级也会被提高
绝对定位的特性
绝对定位是相对于它的定位父级的位置来定位，如果没有设置定位父级，则相对浏览器窗口来定位
元素位置发生偏移后，原来的位置不会被保留
层级提高，可以把标准文档流中的元素及浮动元素盖在下边设置绝对定位的元素脱离文档流
绝对定位的使用场景
一般情况下，绝对定位用在下拉菜单、焦点图轮播、弹出数字气泡、特别花边等场景
固定位置
fixed:left/right/top/bottom
元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动
固定位置和绝对定位比较类似，最大的区别在于固定位置的基准不是祖先元素，而是只根据浏览器的窗口
固定定位的特性
相对浏览器的窗口来定位
偏移量不会随着滚动条的移动而移动
使用场景
一般在网页中被用在窗口的左右两边的固定广告，返回顶部图标，吸顶导航栏等