关于浮动

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 条评论
登录 后参与评论

相关文章

来自专栏菩提树下的杨过

Flash/Flex学习笔记(23):运动学原理

先写一个公用的小球类Ball: package{ import flash.display.Sprite; //小球 类 public class B...

25310
来自专栏我和未来有约会

Silverlight第三方控件专题

这里我收集整理了目前网上silverlight第三方控件的专题,若果有所遗漏请告知我一下。 名称 简介 截图 telerik 商 RadC...

4025
来自专栏陈仁松博客

ASP.NET Core 'Microsoft.Win32.Registry' 错误修复

今天在发布Asp.net Core应用到Azure的时候出现错误InvalidOperationException: Cannot find compilati...

4868
来自专栏落花落雨不落叶

canvas画简单电路图

62111
来自专栏飞扬的花生

jsencrypt参数前端加密c#解密

      写程序时一般是通过form表单或者ajax方式将参数提交到服务器进行验证,如何防止提交的请求不被抓包后串改,虽然无法说绝对安全却给非法提交提高了难度...

3869
来自专栏一个会写诗的程序员的博客

Spring Reactor 项目核心库Reactor Core

Non-Blocking Reactive Streams Foundation for the JVM both implementing a Reactiv...

2182
来自专栏魂祭心

原 canvas绘制clock

4094
来自专栏Ceph对象存储方案

Luminous版本PG 分布调优

Luminous版本开始新增的balancer模块在PG分布优化方面效果非常明显,操作也非常简便,强烈推荐各位在集群上线之前进行这一操作,能够极大的提升整个集群...

3145
来自专栏一个爱瞎折腾的程序猿

sqlserver使用存储过程跟踪SQL

USE [master] GO /****** Object: StoredProcedure [dbo].[sp_perfworkload_trace_s...

2070
来自专栏我和未来有约会

Kit 3D 更新

Kit3D is a 3D graphics engine written for Microsoft Silverlight. Kit3D was inita...

2536

扫码关注云+社区