浮动和定位
作者:互联网
浮动的定义
因为浮动(盒)不在普通流内,在浮动盒之前或者之后创建的未定位的(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让出空间
-
对父容器
对于其父元素来说,元素浮动之后,它脱离当前正常的文档流,所以它也无法撑开其父元素,造成父元素的塌陷 -
对其它浮动元素
同一个方向的浮动元素:当一个浮动元素在浮动过程中碰到同一个方向的浮动元素时,它会紧跟在它们后面
反方向的浮动元素:互不影响,位于同一条水平线上,当空间不够时会被挤下 -
对普通元素
普通元素会忽略浮动元素的存在,并会处在浮动元素的下层
-
对文字
文字和其他行内元素会发现浮动元素并环绕着浮动元素进行排列
清除浮动指什么?如何清除浮动? 两种以上方法。
- 在非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 默认位置
- 参考点 :在参考点的content+padding的内容上
z-index 有什么作用? 如何使用?
可以解决元素的覆盖问题,决定那个元素在上方,哪一个在下方;
z-index的值可以是负数,也可以为0,也可以无群大,数值大的在上方;
z-index父元素设置的值权重比较大,当两个父元素相比的时候,父元素起决定作用,其中的子元素设置多大都没有用;
给覆盖的元素设置z-index,哪个的值大就会覆盖哪一个值
###实现如下导航栏效果 :
查看效果,在下方附上线上预览地址
demo
###实现如下效果,回复预览链接效果预览
把下面的话抄写三遍;
- 如果用了浮动,其父元素一般(最好)需要清除浮动
- 如果用了绝对定位,一般(最好)要给参考点设置position:relative;
-如果用了浮动,其父元素一般(最好)需要清除浮动
-
如果设置了绝对定位,一般(最好)要给参考点设置:poition:relative
-
如果用了浮动,其父元素一般(最好)需要清楚浮动
-
如果设置了绝对顶,一般(最好)哟啊给参考点设置position:relative
标签:浮动,定位,clear,元素,参考点,设置 来源: https://blog.csdn.net/KaisonYi/article/details/89189450