关于浮动

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

浮动元素:浮动元素的框可以向左或者向右移动,直到它的外边缘碰到父元素包含框或者另一个浮动元素的边框为止;浮动元素不在文档普通流之中,因此文档普通流中的块级元素感知不到浮动元素的存在。

对父容器的影响:不与父容器发生外边距合并。无法撑开父元素。

对其他浮动元素的影响:父容器足够宽,与其他浮动元素同一水平方向依次排列。父容器宽度在同一水平方向上不能同时容纳全部浮动元素时,超出父容器宽度的浮动元素向下移动,直到有足够的空间,如果水平排列三个以上高度不同浮动元素,那么向下移动的时候可能被卡住。

对普通元素的影响:浮动元素之前的普通元素不受影响。浮动元素之后的普通元素因感知不到浮动元素的存在会被浮动元素覆盖。

对文字的影响:文字所在行框因为浮动元素的挤压而缩短,从而围绕浮动元素排列。

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

清除浮动指:消除浮动元素对其他元素因浮动元素造成的高度塌陷的问题。

清除浮动的方法:

  • 设置操作元素属性clear: both或者clear: left或者clear: right
  • 使父容器形成BFC。父容器成为BFC后,父容器将不会出现高度塌陷的问题。

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

三种定位方式:

  • relative 相对定位。元素不脱离文档流。参考点:自身在文档流中的位置。使用场景:一般作为绝对定位的元素参考点,或者页面图片的小偏移。
  • absolute 绝对定位。元素脱离文档流。参考点:距离最近的非static祖先元素位置。如果元素没有已定位的祖先元素,那么他的位置就相对于初始包含块html来定位。使用场景:元素的水平垂直居中。
  • fixed 固定定位。元素脱离文档流。参考点:参考浏览器窗口的位置。使用场景:相对于浏览器窗口位置始终不变的显示窗口,比如:固定边栏和底栏。

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

因为绝对定位的元素脱离了普通流,所以绝对定位的元素可以覆盖页面上的其它元素。这时可以通过给元素设置z-index属性来控制叠放顺序,该属性值越高,元素位置越靠上。

5、 position:relative和负margin都可以使元素位置发生偏移?二者有什么区别?

  • position:relative 只相对自己原本位置发生偏移,不影响其它普通流中元素的位置。
  • margin:除了让元素自身发生偏移还影响其它普通流中的元素。

6、BFC 是什么,为什么要使用它?如何生成 BFC?BFC 有什么作用?举例说明

1、BFC就是“块级格式化上下文”的意思,创建了 BFC的元素就是一个独立的盒子,不过只有Block-level box可以参与创建BFC, 它规定了内部的Block-level Box如何布局,并且与这个独立盒子里的布局不受外部影响,当然它也不会影响到外面的元素。

使用一定的CSS声明可以生成BFC,浏览器对生成的BFC有一系列的渲染规则,利用这些渲染规则我们可以达到一定的布局效果,为了达到特定的布局效果我们让元素生成BFC。

BFC的特性:

  • 内部的Box会在垂直方向,从顶部开始一个接一个地放置。
  • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加。
  • 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
  • BFC的区域不会与float box叠加。
  • BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然。
  • 计算BFC的高度时,浮动元素也参与计算。

2、如何生成BFC:

  • float 除了none以外的值
  • overflow 除了visible 以外的值(hidden,auto,scroll )
  • display (table-cell,table-caption,inline-block, flex, inline-flex)
  • position值为(absolute,fixed)

3、BFC有什么作用:

  • 1、解决margin重叠问题;
  • 2、用于布局;
  • 3、用于清除内部浮动,计算BFC高度。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏LIN_ZONE

css 使元素居中

<div style="text-align:center;">居中显示</div>

624
来自专栏知道一点点

【原创】bootstrap框架的学习 第五课

<h2>引导主体副本</h2> <p class="lead">这是一个演示引导主体副本用法的实例。</p>

653
来自专栏老马寒门IT

06-移动端开发教程-fullpage框架

CSS3的新特性已经讲完了,接下来我们看一下jQuery的一个全屏jQuery全屏滚动插件fullPage.js。我们经常见到一些全屏的特绚丽页面,手指或者鼠标...

2695
来自专栏十月梦想

文本属性

  注意:text-shadow(文本阴影):第一个值表示水平阴影 第二个垂直 第三模糊距离第四个模糊像素

654
来自专栏葡萄城控件技术团队

Spread for Windows Forms高级主题(2)---理解单元格类型

理解单元格类型基本信息 Spread支持几十种单元格类型,如复选框单元格、日期时间单元格、或者一个简单的文本单元格。单元格类型可以对单独的单元格、列、行、一个单...

1808
来自专栏梦魇小栈

JQuery分析及实现part6之动画模块功能及实现

511
来自专栏练小习的专栏

可视化格式模型-浮动

浮动是可视化格式模型中非常重要的一节。浮动跟stack level也有一定的关系。可视化模型是一个3维的模型,并不是二维的。元素在页面上的排列,从我们的角度看是...

18610
来自专栏老马寒门IT

06-移动端开发教程-fullpage框架

CSS3的新特性已经讲完了,接下来我们看一下jQuery的一个全屏jQuery全屏滚动插件fullPage.js。我们经常见到一些全屏的特绚丽页面,手指或者鼠标...

4049
来自专栏Python攻城狮

jQuery1.jQuery简介及使用2.jQuery语法3.jQuery选择器4,jQuery 事件函数及效果显示

jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。(write less,do more.)

663
来自专栏九彩拼盘的叨叨叨

初级 Web 前端核心技能点

703

扫码关注云+社区