前端面试必备技巧(二)css盒模型及BFC
CSS盒模型
基本概念:标准模型+IE模型及区别
CSS如何设置这两种模型?
JS如何设置获取盒模型对应的宽和高?
实例题(根据盒模型解释边距重叠)
BFC边距重叠解决方案
(1)BFC的基本概念:block format content 块级格式化上下文
(2)BFC的原理:即BFC的渲染规则。
1、BFC这个元素的垂直方向的边距会发生重叠
2、BFC的区域不会与浮动元素的box重叠
3、BFC在页面上是一个独立的容器,外面的元素不会影响到里面的元素,里面的元素也不会影响到外面的元素
4、计算BFC高度的时候,浮动元素的高度也会参与计算
(3)如何创建一个BFC
1、创建一个父元素,给父元素加上overflow:hidden或者overflow:auto
2、float值不为none(默认为none),只要设置了浮动,就默认创建了BFC
3、只要position的值不为static或者relative,即只要是absolute或者是fixed,就可以创建BFC
4、display:table或者display:inline-block等等display,也可以创建BFC
(4)BFC的使用场景
1、同级的上下标签如果margin-top和margin-bottom同时存在,则会重叠,重叠的高度取决于top和bottom哪个值大,在这种情况下,如果要margin-top和margin-bottom同时存在,可以在一个标签中加一个父元素div,div使用BFC。
2、假如左边float,右边自适应,但左边的高度比右边的小,此时左边元素下面会被右边元素嵌入,此时在右边元素加个BFC的父元素就可以解决这个问题。
3、BFC 子元素即使是float也会参与到父元素的高度计算,只要给父元素一个BFC
前端面试必备技巧(二)css盒模型及BFC的更多相关文章
- 十分钟复习CSS盒模型与BFC
css盒模型与BFC 本文为收集整理总结网上资源 旨在系统复习css盒模型与bfc 节省复习时间 阅读10分钟 什么是盒模型 每一个文档中,每个元素都被表示为一个矩形的盒子,它都会具有内容区.padd ...
- 面试汇总——说一下CSS盒模型
本文是面试汇总分支——说一下CSS盒模型. 基本概念:W3C标准盒模型和IE盒模型 CSS如何设置这两种模型 JS如何获取盒模型对应的宽和高 根据盒模型解释边距重叠 BFC(边距重叠解决方案) 一. ...
- css盒模型与bfc与布局与垂直水平居中与css设计模式等
一.css盒子与布局相关 盒子内部的布局 盒子之间的布局visual formatting 脱离正常流normal flow的盒子的布局 absolute布局上下文下的布局 float布局上下文下的布 ...
- css盒模型-BFC
BFC(边距重叠解决方案) 1.BFC的基本概念:块级格式化上下文 2.BFC的原理(说白了就是BFC的渲染规则): 这个规则是什么呢?我觉得大家能说出4点就够了 第一个就是BFC可以解决这个元素的垂 ...
- css盒模型:BFC、IFC边距重叠解决方案
BFC:块级格式化上下文 IFC:行内格式化上下文 实例如下: <div class="out" style="background: red;"> ...
- 神奇的盒模型(BFC)
上一篇我提到每一个元素都有自己的display属性,其属性值可以改变.其改变的方式,可以利用神奇的css盒模型(BFC). 盒模型,是css可视化格式化系统的基础,可以用于元素定位和网页布局.一个盒模 ...
- 大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案
概览 CSS盒模型,规定了元素框来处理元素的 内容.内边距.边框和外边距的方式 元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的, ...
- 【前端盲点】DOM事件流论证CSS盒模型是否具有厚度
前言 很久没有扯淡了,我们今天来扯淡吧. 我今天思考了一个问题,我们页面的dom树到底是如何渲染的,而CSS盒模型与javascript是否有联系,于是便想到一个问题: CSS的盒模型具有厚度么??? ...
- CSS盒模型面试知识点
一.基本概念 1.基本概念:标准盒模型+怪异盒模型(IE模型) 基本组成:由margin.padding.content组成. 2.标准盒模型和IE模型的区别 标准盒模型中width指的是内容区域co ...
随机推荐
- 珠峰-6-http和http-server原理
???? websock改天研究下然后用node去搞. websock的实现原理. ##### 第9天的笔记内容. ## Header 规范 ## Http 状态码 - 101 webscoket 双 ...
- android手机拍照旋转的问题
android开发中,遇到过手机拍照,明明是竖着拍的,显示的结果却是横这的,困扰了很久,找了很久找了一种解决方法: ExifInterface exifInterface = new ExifInte ...
- 一套很有意思的C语言测试题目
网络上逛博客,发现了一套很有意思的测试题目: https://kobes.ca/ 大家有兴趣可以做一下,考一些关于C语言使用的细节: 中文翻译参考: https://www.cnblogs.com/l ...
- (vue操作storage)Vue plugin for work with local storage,session storage and memo
vue-ls https://www.npmjs.com/package/vue-ls NPM npm install vue-ls --save Yarn yarn add vue-ls Usage ...
- SQL JOIN 的解析
1.SQL语句结构 select distinct < select_list > from < left_table > < join_type > joi ...
- 如何在Mac电脑上隐藏视频文件?
我们都有一些秘密视频,我们只想保留在Mac,iPhone或iPad上.为了完全安全地在Mac上隐藏视频文件,我们提供了两种种最简单的方法.下面就来看一下,如何在Mac上隐藏私密视频文件? 在iTune ...
- TP框架上传图片至阿里云oss
首先安装阿里云oss扩展: composer require aliyuncs/oss-sdk-php 如果这个安装不上可以直接下载SDK的包: 链接:https://pan.baidu.com/s/ ...
- KMP刷题记录
[BZOJ4698][SDOI2008]Sandy的卡片 差分一下然后选一个串,用这个串的所有前缀和其他串kmp,求出最长的公共部分即可 代码: #include <bits/stdc++.h& ...
- AcWing1296. 聪明的燕姿
聪明的燕姿 解题思路: 首先我们肯定要用到约数之和定理 但是有个问题就是要怎么用 根据经验得知,约数最多也就六七个左右,不然直接就超了s的范围.所以我们考虑用爆搜来做 但是用爆搜的话还是要优化一下思路 ...
- SpringJpa CRUD 代码生成器
利用业余时间撸了一个Spring Jpa代码生成器jpa-codegen. 简介 这是一款基于Freemarker模板驱动的代码生成器. 依据现有的实体类代码,自动生成CRUD代码,解放双手,加快开发 ...