浮动&定位

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

浮动元素不占据文档流,浮动框可以左右移动,直到它的边缘碰到包含框或另一个浮动框的边缘,
对父容器的影响:由于浮动元素不占据文档流,易导致父容器塌陷。
对其他浮动元素:
1、没有足够的水平空间,浮动框向下移动,直到有足够空间的地方
2、如果浮动元素的高度不同,那么当它向下移动时可能会被其他浮动元素“卡住”。

  • 对普通元素:由于浮动不占据文档流,因此普通元素会忽视浮动元素的存在,也会形成浮动元素“遮挡”普通元素的现象
  • 对文字:普通流中的文字会感知浮动元素的存在,形成文本环绕浮动框的现象

NO2 清除浮动指什么?如何清除浮动? 两种以上方法##

清除浮动是指清除浮动后造成父容器坍塌的现象,让父容器再次包含浮动元素
方法1:在浮动元素下添加一个空元素并清除它


1.png

方法2:浮动父容器(副作用在于下一个元素会受到浮动当前浮动父容器的影响)



方法3、利用CSS中的伪类:after和内容声明在指定的现有内容的末尾添加新的内容(通用型处理方法,无副作用)

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

定位方式:相对定位、绝对定位、固定定位

  • 相对定位(可看作普通流定位模型的一部分):通过设置垂直或者水平的位置,让元素“相对于”它的起点移动,参考点为该元素原来占有的起点;当使用相对定位的时候,无论是否移动,元素依旧占据原来的空间
  • 绝对定位:绝对定位使元素的位置与普通文档流无关,因此不占据空间,其参考点是相对于距离离它最近的那个已经定位(relative、absolute、fixed)的祖先元素确定的,若祖先元素无定位,则相对其其实包含块定位(HTML元素)
  • 固定定位:固定定位可看作是绝对定位的一种,其参考点是浏览器的视口(viewport)

NO4 z-index 有什么作用? 如何使用

z-index属性是控制框的叠放次序,z-index的值越大,框在栈中的位置就越高。

NO5 实现如下导航栏效果

查看效果,在下方附上线上预览地址

https://wangzhongrong.github.io/HTMLWORKS/naver.html

NO6实现如下效果

image

,回复预览链接

效果预览
https://wangzhongrong.github.io/HTMLWORKS/alter.html

NO7把下面的话抄写三遍;

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,865评论 1 92
  • 一,浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动模型是一种可视化格式模型,浮动...
    DeeJay_Y阅读 926评论 0 4
  • relative:生成相对定位的元素,通过top,bottom,left,right的位置相对于其正常位置进行定位...
    zx9426阅读 1,008评论 0 2
  • 一、文档流的概念指什么?有哪种方式可以让元素脱离文档流? 1、文档流指的是元素在排列布局中所占用的位置,具体的说是...
    鸿鹄飞天阅读 814评论 0 0
  • 浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 特征: 脱离正常文档流,沿其容器的左侧...
    _Dot912阅读 756评论 0 3