css面试题--定位与浮动

1、为什么需要清除浮动?

        在非IE浏览器下,容器不设高度且子元素浮动时,容器高度不能被内容撑开,内容会溢出到容器外面而影响布局。这种现象被称为浮动。

        浮动的原理:浮动元素脱离文档流,不占用空间;浮动元素碰到包含它的边框或其他浮动元素边框停留。

        浮动元素会引起的问题:父元素的高度无法被撑开,影响与父元素同级的元素;与浮动元素同级的非浮动元素会跟随其后;若浮动的元素不是第一个元素,则该元素之前的元素也要浮动,否则会影响页面的展示。

        清除浮动的方式:给父级添加高度;最后一个浮动元素后添加一个空标签,并设置clear:both;包含浮动元素的父元素设置overflow:hidden;使用:after伪元素。

2、clear清除浮动的原理

        元素盒子的边不能和前边的浮动元素相邻,对元素设置clear属性是为了避免浮动元素对该元素的影响,而不是清除浮动。

3、BFC的简单理解

        简单来讲,BFC是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定的规则进行物品摆放,并且不会影响其它环境中的物品。如果一个元素符合触发BFC的条件,则BFC中的元素布局不受外部的影响。

        创建BFC的条件:

               根元素(body);

                元素设置浮动;

                元素设置绝对定位;

                display值为table-cell、inline-block、flex等;

                overflow的值为scroll、hidden、auto。

        BFC的特点:

                垂直方向上,自上而下排列,和文档流排列一致;

                在BFC中,上下两个相邻容器的margin会重叠;

                计算BFC的高度时,需要计算浮动元素的高度;

                BFC区域不会与浮动元素重叠;

                每个元素的左margin和容器的左border相接触。

        BFC的作用:

                解决margin重叠问题;

                解决高度塌陷问题;

                创建自适应两栏布局。

4、什么是margin重叠问题?如何解决

        两个块级元素的上外边距和下外边距可能会合并为一个外边距,其大小会取其中外边距值大的那个,这个行为就是外边距折叠。脱标的元素,如浮动元素和绝对定位元素等的外边距不会重叠,且重叠只会出现在垂直方向上。

        计算原则:

                如果两者都是正值,就取最大值;

                一正一负,就是算正负相加的和;

                如果都是负值,就用0减去两个中绝对值大的那个。

        解决办法:

                兄弟折叠

底部元素变为行内盒子:display: inline-block
底部元素设置浮动:float
底部元素的position的值为absolute/fixed

        父子重叠:

父元素加入:overflow: hidden
父元素添加透明边框:border:1px solid transparent
子元素变为行内盒子:display: inline-block
子元素加入浮动属性或定位

5、元素的重叠顺序

         元素发生重叠时,有着特定的垂直显示顺序,css盒模型的层叠顺序如下:

                背景和边框:建立当前层叠上下文元素的背景和边框;

                负的z-index;

                块级盒:文档流内非行内级非定位后代元素;

                浮动盒:非定位浮动元素;

                行内盒:文档流内行内级非定位后代元素;

                z-index:0;

                正的z-index。

        当定位元素z-index:auto,生成盒在当前层叠上下文中的层级为0,不会建立新的层叠上下文,除非是根元素。 

6、position的属性有哪些

7、absolute和fixed的共同点与不同点

        共同点:改变行内元素的呈现方式,将display置为inline-block;使元素脱离普通文档流,不再占据文档物理空间;覆盖非定位文档元素。

        相同点:absolute与fixed根元素不同,absolute的根元素可以设置,fixed根元素是浏览器;在有滚动条的页面中,absolute会跟着父元素进行移动,fixed固定在页面的具体位置。

 8、对sticky定位的理解

        sticky定位被称为粘性定位,基于用户的滚动位置来定位。粘性定位的元素是以来用户滚动,在position:relative和position:fixed定位之间切换。具体表现为在跨越特定阈值前为相对定位,跨越阈值后,为固定定位。这个特定的阈值指的是top、right、bottom、left之一。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/804469.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在 JavaScript或Typescript 中编写异步构造函数的正确方法

参考:The Proper Way to Write Async Constructors in JavaScript - DEV Community

使用 wangeditor 解析富文本并生成目录与代码块复制功能

在 Web 开发中&#xff0c;经常需要使用富文本编辑器来编辑和展示内容。wangeditor 是一个强大的富文本编辑器&#xff0c;提供了丰富的功能和灵活的配置&#xff0c;但是官方并没有提供目录导航和代码块的复制功能&#xff0c;所以我自己搞了一个 <template><div cla…

5个超好用的Python工具,赶紧码住!

Python开发软件可根据其用途不同分为两种&#xff0c;Python代码编辑器和Python集成开发工具&#xff0c;两者配合使用极大的提高Python开发人员的编程效率。掌握调试、语法高亮、Project管理、代码跳转、智能提示、自动完成、单元测试、版本控制等操作。 Python常用工具&…

小白新手学习 Python 使用哪个 Linux 系统更好?

对于小白新手学习Python&#xff0c;选择哪个Linux系统是一个很重要的问题&#xff0c;因为不同的Linux发行版&#xff08;distribution&#xff09;有着不同的特点、优势和适用场景。在选择时&#xff0c;需要考虑到易用性、学习曲线、社区支持等因素。 Ubuntu Ubuntu 是一个…

分布式系统中的唯一ID生成方法

通常在分布式系统中&#xff0c;有生成唯一ID的需求&#xff0c;唯一ID有多种实现方式。我们选择其中几种&#xff0c;简单阐述一下实现原理、适用场景、优缺点等信息。 目录 数据库多主复制UUID工单服务器雪花算法总结 数据库多主复制 数据库通常有自增属性&#xff0c;在单机…

CSS 实现无限波浪边框卡片

CSS 实现无限波浪边框卡片 效果展示 鼠标悬停效果&#xff0c;底部色块的边框是无限滚动的波浪 鼠标没有悬停效果 CSS 知识点 CSS 基础知识回顾使用 radial-gradient 实现波浪边框使用 anumate 属性实现波浪边框动画和控制动画运动 波浪实现原理 波浪边框的实现思路其…

dayjs 判断是否今天、本周内、本年内、本年外显示周几、月份等

效果: 判断是否今天需从 dayjs 中引入 isToday 插件&#xff1b; 判断是否两个日期之间需从 dayjs 中引入 isBetween 插件 import dayjs from dayjs import isToday from dayjs/plugin/isToday import isBetween from dayjs/plugin/isBetween// 注册插件 dayjs.extend(isBet…

浅谈对线程的理解

一、线程的概念 1、线程的概念 在Python中&#xff0c;想要实现多任务还可以使用多线程来完成。 2、为什么使用多线程&#xff1f; 进程是分配资源的最小单位 , 一旦创建一个进程就会分配一定的资源 , 就像跟两个人聊QQ就需要打开两个QQ软件一样是比较浪费资源的 . 线程是…

DP:子数组模型

一、最大子数组和 . - 力扣&#xff08;LeetCode&#xff09; 二、环形子数组的最大和 . - 力扣&#xff08;LeetCode&#xff09; class Solution { public:int maxSubarraySumCircular(vector<int>& nums) {//动态规划思想解决 //环形数组问题&#xff0c;尝试转…

01-Git 快速入门

https://learngitbranching.js.org/?localezh_CN在线练习git 1. Git 安装好Git以后, 先检查是否已经绑定了用户名和邮箱 git config --list再检查C:\Users\xxx.ssh 下是否存在 id_rsa.pub , 存在的话复制其内容到 GitHub 的 SSH KEY 中 没有这一步, PUSH操作的时候会报错:…

土壤墒情监测系统:洞察土壤水分奥秘

TH-TS400土壤墒情监测系统&#xff0c;作为现代农业科技的重要组成部分&#xff0c;已经成为农业生产过程中不可或缺的一环。该系统通过先进的传感器技术和数据处理能力&#xff0c;能够实时监测土壤的水分状况&#xff0c;为农业生产提供精准、可靠的数据支持。本文将从系统构…

存储设备与网络监控运维实践

随着企业数据量的不断增长和网络架构的日益复杂&#xff0c;存储设备和网络设施的稳定运行变得至关重要。为了确保这些关键组件的性能和可用性&#xff0c;实施全面的监控策略是运维团队的首要任务。本文旨在为运维团队提供存储设备监控、网络流量分析以及网络配置管理方面的参…

如何在debian12.5上安装snap和docker

在Debian 12.5上安装Snap和Docker的步骤如下&#xff1a; 1. 更新系统包列表&#xff1a; sudo apt update sudo apt upgrade 2. 安装 Snap&#xff1a; Debian 12.5 默认已经启用了 Snap 支持&#xff0c;所以你可以直接通过 apt 来安装 Snap。 sudo apt install snapd …

算法打卡day29

今日任务&#xff1a; 1&#xff09;1005.K次取反后最大化的数组和 2&#xff09;134.加油站 3&#xff09;135.分发糖果 1005.K次取反后最大化的数组和 题目链接&#xff1a;1005. K 次取反后最大化的数组和 - 力扣&#xff08;LeetCode&#xff09; 给定一个整数数组 A&…

Java Web-分层解耦

三层架构 当我们所有代码都写在一起时&#xff0c;代码的复用性差&#xff0c;并且难以维护。就像我们要修改一下服务端获取数据的方式&#xff0c;从文本文档获取改为到数据库中获取&#xff0c;就难以修改&#xff0c;而使用三层架构能很好的解决这个问题。 controller: 控…

MySql数据库从0-1学习-第二天DML和DQL学习

DML 对数据库表中的数据进行增删改操作 Insert 语法 //指定字段添加数据 insert into 表名(字段名1,字段名2) values (值1,值2);//全部字段添加数据: insert into 表名 values(值1,值2...);//批量添加数据(指定字段) insert into 表名(字段名1,字段名2) values(值1,值2),(值1,…

HJ61 放苹果(递归,苹果多的情况+盘子多的情况)

当苹果数 < 盘子数&#xff0c;有空盘&#xff0c;则忽略一个盘子&#xff0c;在n-1个放苹果&#xff0c;一直递推到n1&#xff0c;有一种摆法苹果数 > 盘子数&#xff0c;可以看作没有空盘。则可以选择忽略一个盘子&#xff0c;如上边做法。还可以选择每个盘子放一个苹果…

react ant design 通过函数弹出 modal窗口

在React Ant Design中&#xff0c;可以通过调用Modal组件的方法来动态弹出和关闭Modal窗口。具体步骤如下&#xff1a; 1、首先&#xff0c;在组件中引入Modal组件&#xff1a; import { Modal } from antd;2、在组件中定义一个函数来弹出Modal窗口&#xff1a; const showM…

GlusterFS分布式存储

目录 前言 一、GlusterFS分布式存储概述 1、GFS概念 2、GFS特点 3、GFS术语 4、GFS构成 5、GFS工作流程 6、后端存储如何定位文件 7、GlusterFs的卷类型 7.1 Distributed Volume&#xff08;分布式卷&#xff09; 7.2 Striped Volume&#xff08;条带卷&#xff09…

Pgsql怎样找到表中某个字段值重复的记录并删除冗余记录,只保留一条

背景 今天发现某个黄页爬取的数据有部分重复了&#xff0c;原本我用的公司详情页的url进行md5来作为主键做upsert入&#xff0c;但后面在核验数据时发现有些详情url虽是同一间公司的&#xff0c;但路由上有细微差别导致写入了重复的公司数据&#xff0c;所以要想办法清理掉重复…