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的更多相关文章

  1. 十分钟复习CSS盒模型与BFC

    css盒模型与BFC 本文为收集整理总结网上资源 旨在系统复习css盒模型与bfc 节省复习时间 阅读10分钟 什么是盒模型 每一个文档中,每个元素都被表示为一个矩形的盒子,它都会具有内容区.padd ...

  2. 面试汇总——说一下CSS盒模型

    本文是面试汇总分支——说一下CSS盒模型. 基本概念:W3C标准盒模型和IE盒模型 CSS如何设置这两种模型 JS如何获取盒模型对应的宽和高 根据盒模型解释边距重叠 BFC(边距重叠解决方案) 一. ...

  3. css盒模型与bfc与布局与垂直水平居中与css设计模式等

    一.css盒子与布局相关 盒子内部的布局 盒子之间的布局visual formatting 脱离正常流normal flow的盒子的布局 absolute布局上下文下的布局 float布局上下文下的布 ...

  4. css盒模型-BFC

    BFC(边距重叠解决方案) 1.BFC的基本概念:块级格式化上下文 2.BFC的原理(说白了就是BFC的渲染规则): 这个规则是什么呢?我觉得大家能说出4点就够了 第一个就是BFC可以解决这个元素的垂 ...

  5. css盒模型:BFC、IFC边距重叠解决方案

    BFC:块级格式化上下文 IFC:行内格式化上下文 实例如下: <div class="out" style="background: red;"> ...

  6. 神奇的盒模型(BFC)

    上一篇我提到每一个元素都有自己的display属性,其属性值可以改变.其改变的方式,可以利用神奇的css盒模型(BFC). 盒模型,是css可视化格式化系统的基础,可以用于元素定位和网页布局.一个盒模 ...

  7. 大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案

    概览 CSS盒模型,规定了元素框来处理元素的 内容.内边距.边框和外边距的方式 元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的, ...

  8. 【前端盲点】DOM事件流论证CSS盒模型是否具有厚度

    前言 很久没有扯淡了,我们今天来扯淡吧. 我今天思考了一个问题,我们页面的dom树到底是如何渲染的,而CSS盒模型与javascript是否有联系,于是便想到一个问题: CSS的盒模型具有厚度么??? ...

  9. CSS盒模型面试知识点

    一.基本概念 1.基本概念:标准盒模型+怪异盒模型(IE模型) 基本组成:由margin.padding.content组成. 2.标准盒模型和IE模型的区别 标准盒模型中width指的是内容区域co ...

随机推荐

  1. 珠峰-6-http和http-server原理

    ???? websock改天研究下然后用node去搞. websock的实现原理. ##### 第9天的笔记内容. ## Header 规范 ## Http 状态码 - 101 webscoket 双 ...

  2. android手机拍照旋转的问题

    android开发中,遇到过手机拍照,明明是竖着拍的,显示的结果却是横这的,困扰了很久,找了很久找了一种解决方法: ExifInterface exifInterface = new ExifInte ...

  3. 一套很有意思的C语言测试题目

    网络上逛博客,发现了一套很有意思的测试题目: https://kobes.ca/ 大家有兴趣可以做一下,考一些关于C语言使用的细节: 中文翻译参考: https://www.cnblogs.com/l ...

  4. (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 ...

  5. SQL JOIN 的解析

    1.SQL语句结构 select  distinct  < select_list > from  < left_table > < join_type > joi ...

  6. 如何在Mac电脑上隐藏视频文件?

    我们都有一些秘密视频,我们只想保留在Mac,iPhone或iPad上.为了完全安全地在Mac上隐藏视频文件,我们提供了两种种最简单的方法.下面就来看一下,如何在Mac上隐藏私密视频文件? 在iTune ...

  7. TP框架上传图片至阿里云oss

    首先安装阿里云oss扩展: composer require aliyuncs/oss-sdk-php 如果这个安装不上可以直接下载SDK的包: 链接:https://pan.baidu.com/s/ ...

  8. KMP刷题记录

    [BZOJ4698][SDOI2008]Sandy的卡片 差分一下然后选一个串,用这个串的所有前缀和其他串kmp,求出最长的公共部分即可 代码: #include <bits/stdc++.h& ...

  9. AcWing1296. 聪明的燕姿

    聪明的燕姿 解题思路: 首先我们肯定要用到约数之和定理 但是有个问题就是要怎么用 根据经验得知,约数最多也就六七个左右,不然直接就超了s的范围.所以我们考虑用爆搜来做 但是用爆搜的话还是要优化一下思路 ...

  10. SpringJpa CRUD 代码生成器

    利用业余时间撸了一个Spring Jpa代码生成器jpa-codegen. 简介 这是一款基于Freemarker模板驱动的代码生成器. 依据现有的实体类代码,自动生成CRUD代码,解放双手,加快开发 ...