浮动和定位

最新推荐文章于 2025-05-25 11:02:15 发布

原创最新推荐文章于 2025-05-25 11:02:15 发布 · 1.2k 阅读

CC 4.0 BY-SA版权

浮动的定义

因为浮动（盒）不在普通流内，在浮动盒之前或者之后创建的未定位的（non-positioned）块盒会竖直排列，就像浮动不存在一样。然而，接着（next to）浮动（盒）创建的当前及后续行盒会进行必要的缩短，为了给浮动（盒）的margin box让出空间

浮动元素并不是完全的脱离文档流

注意和absolute不同

块级元素浮动宽度收缩

浮动元素使得块级元素进行宽的收缩，也使得行内元素可以设置width,height,和padding
行内元素可以发现浮动元素

清除浮动

实现两栏布局

左侧宽度固定，右侧宽度自适应

实现三栏边距布局

浮动元素可以看见块级元素
DOM顺序不变

导航栏的浮动定位

ul->li后面的

清除浮动的概念

浮动的副作用
会对后续元素产生影响
父容器的高度计算出现了问题

clear:left

该盒子的top border边位于该源文件中在之前的元素形成大的所有左浮动盒的bottom外边下方

clear:right

该盒子的top border边位于该源文件中在之前的元素形成大的所有u右浮动盒的bottom外边下方

-只要在navbar浮动元素的后面有一个普通元素，就会把原来的父元素撑开

伪元素after的使用说明

E::AFTER

<p>这是不无聊也不有趣的文字</p>
<p class="exciting-text">在MDN上做贡献简单又轻松。
按右上角的编辑按钮添加新示例或改进旧示例！</p>
.exciting-text::after {
  content: "<- 让人兴兴兴奋!"; 
  color: green;
}

.boring-text::after {
   content:    "<- 无聊!";
   color:      red;
}

块级元素下面要加回块级元素才可以把元素撑开。

水平布局的两种方法

-使用浮动元素进行包裹住。

inline-block 优势: 不需要清除浮动，简单，在设置居中时更方便,适合子内容不多的元素水平排列
inline-block 劣势: 需要注意缝隙，注意对齐，ie8以下不能用
float优势: 兼容性好，没缝隙问题
float劣势: 需要清除浮动，适合稍大的布局

浮动和下移元素

定位

normal flow

normal flow 即浏览器默认的文档布局方式

相对定位 relative

相对定位，相对于以前的位置

###绝对定位 absolute

绝对定位其他元素已经看不见你了，其它的box产生了重叠
相对于父元素的relative absolute fix的定位进行查找如果没有的话再从上一级进行查找
一个元素设置了absolute，另一个元素设置relative
绝对定位元素可以添加宽高

z-index

设置层叠顺序
谁的值大，谁就可以覆盖

固定定位 fixed

相对于浏览器定位

粘性定位

stick
有了他更好，没有他也无所谓

用定位还使用浮动

大布局、自适应用浮动
小元素、固定宽高用定位
结合实际情况是关键

小demo问题

ul里面不可以直接加div 因为li的父元素只可以是相对的

box-shadow设置阴影

这是第三个值。该值越大，模糊越大，阴影变得越来越大。不允许使用负值。如果没有指定，它将是0（阴影的边缘是锐利的）。该规范不包括如何计算模糊半径的精确算法，但是，它详细说明如下：·

-设置的颜色是rgba不是什么其他的

nav::after{
	content:""
	dispaly:block;
	clear:both;	
}

-伪类选择器：li:nth-of-type(3)
选择第三个li

-inline-block
会使得字体收缩
不能很好的填充

-使得菜单进行隐藏

ul>li:hover .child{
      display:block;
    }

浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响？

一个浮动盒会向左或向右移动，直到其外边（outer edge）挨到包含块边沿或者另一个浮动盒的外边。如果存在行盒，浮动盒的外top（边）会与当前行盒的top（边）对齐如果没有足够的水平空间来浮动，它会向下移动，直到空间合适或者不会再出现其它浮动了

因为浮动（盒）不在普通流内，在浮动盒之前或者之后创建的未定位的（non-positioned）块盒会竖直排列，就像浮动不存在一样。然而，接着（next to）浮动（盒）创建的当前及后续行盒会进行必要的缩短，为了给浮动（盒）的margin box让出空间

imge

对父容器
对于其父元素来说，元素浮动之后，它脱离当前正常的文档流，所以它也无法撑开其父元素，造成父元素的塌陷
对其它浮动元素

同一个方向的浮动元素：当一个浮动元素在浮动过程中碰到同一个方向的浮动元素时，它会紧跟在它们后面
反方向的浮动元素：互不影响，位于同一条水平线上，当空间不够时会被挤下
对普通元素

普通元素会忽略浮动元素的存在，并会处在浮动元素的下层
对文字

文字和其他行内元素会发现浮动元素并环绕着浮动元素进行排列

清除浮动指什么？如何清除浮动？两种以上方法。

在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动

e:after{
	content:"";
	display:block;
	clear:both;
}

给父元素添加overflow：hidden
在浮动元素后面加一个普通元素，设置属性clear

.clear{
float: none;
clear: left; /*clear: right;*/  /*clear: both;*/
}

有几种定位方式？分别是如何实现定位的？参考点是什么？使用场景是什么？

absolute relative fixed staticed
absoulte 相对父元素为参考点
relative 自己原本的位置作为参考点
fixed 相对屏幕的位置作为参考点
staticed 默认位置

！imges

参考点：在参考点的content+padding的内容上

z-index 有什么作用？如何使用？

可以解决元素的覆盖问题，决定那个元素在上方，哪一个在下方；
z-index的值可以是负数，也可以为0，也可以无群大，数值大的在上方；
z-index父元素设置的值权重比较大，当两个父元素相比的时候，父元素起决定作用，其中的子元素设置多大都没有用；

给覆盖的元素设置z-index,哪个的值大就会覆盖哪一个值

###实现如下导航栏效果：
查看效果，在下方附上线上预览地址
demo

###实现如下效果，回复预览链接效果预览

demo

把下面的话抄写三遍;

如果用了浮动，其父元素一般（最好）需要清除浮动
如果用了绝对定位，一般（最好）要给参考点设置position:relative;

-如果用了浮动，其父元素一般（最好）需要清除浮动

如果设置了绝对定位，一般（最好）要给参考点设置：poition:relative
如果用了浮动，其父元素一般（最好）需要清楚浮动
如果设置了绝对顶，一般(最好)哟啊给参考点设置position:relative