关于css盒子模型和BFC的理解
CSS盒子模型
包含元素内容(content)、内边距(padding)、边框(border)、外边距(margin)
一般元素总宽度 = element的width+padding的左右边距+margin左右边距值+border的左右宽度
高度同理
外边距合并
上下外边距会合并一般发生在普通文档流中,行内框,浮动框或绝对定位之间外边距不会合并
一般合并的外边距会取那个较大的值
Box-sizing属性(content-box|border-box|inherit)
Content-box: 总宽度 = margin+border+padding+width
Border-box:总宽度 = width+margin 其中盒子的width包含padding+border+element
inherit:规定从父元素继承box-sizing的属性值
实践中的问题
- Margin越界(第一个子元素的margin-top和最后一个子元素的margin-bottom)
->父元素没边框,设置第一个子元素的margin-top的值会加在父元素上,解决方法如下:
- 给父元素加边框
- 给父元素设置padding
- 父元素添加overflow:hidden
- 父元素加前置内容生成(推荐)
例子:.parent{
Width:500px;
Height:500px;
Background:red
}
.parent : before{
Content:””;
Display:table
}
.child{
Width:200px;
Height:200px;
Background:green;
Margin-top:50px
}
<div class=“parent”>
<div class=“child”>
</div>
</div>
浏览器间的盒子模型
- ul在MOzillz中默认有padding值,而在IE中只有margin值
- 标准盒子模型与IE盒子模型之间差异,IE更像box-sizing:border-box,解决方法就是在HTML模板加上doctype
盒子模型画三角形
.triangle{
Width:0;
Height:0;
Border:20px solid transparent;
Border-top:20px solid red;
}//向下的箭头
BFC理解(块级格式化上下文,独立的渲染区域,规定了内部的BFC如何布局,并与这个区域的外部互不相干)
BOX、Formatting Context的缩写
Box:CSS布局的基本单位
- box常用盒子:(根据display的你属性区分盒子)
-> block-level box:display属性为 block,list-item,tabel的元 素,并且参与BFC;
-> inline-level box:display 属性为 inline,inline-block,inline-table,参与IFC
- BFC布局规则
-> 内部的Box会在垂直方向上,一个接一个放置
-> Box垂直方向距离由Margin决定,属于同一个BFC的两个相邻的Box的Margin会发生重叠
-> 每个子集元素的Margin Box的左边与包含他的父级元素的 border box的左边相接触(对于从左往右的格式,反之相反);即使存在浮 动也是如此
-> BFC的区域不会与Float Box重叠
-> BFC在页面上就是一个隔离的独立的容器,容器里面的子元素不会影响外面的元素,反之一样
-> 计算BFC高度的时候,浮动元素高度也参与计算
- 哪些元素会生成BFC
-> 根元素
-> float 不为none
-> position为absolute或fixed
-> display为inline-block,table-cell,table-caption,flex,inline-flex
-> overflow不为visible
转载于:https://www.cnblogs.com/kingsnowcan/p/css_box_BFC.html
关于css盒子模型和BFC的理解相关推荐
- 标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型(转)
转载自:http://www.cnblogs.com/cchyao/archive/2010/07/12/1775846.html 盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型.他们 ...
- html盒子模型子元素怎么水平占满父元素_前端面试常考问题之css盒模型
一.题目:谈一谈你对CSS盒模型的认识 专业的面试,一定会问 CSS 盒模型.对于这个题目,我们要回答一下几个方面: (1)基本概念:content.padding.margin. (2)标准盒模型. ...
- 深入理解CSS盒模型 - 程序猿的程 - 博客园
深入理解CSS盒模型 本文是学习中传思客在慕课网开的课程<前端跳槽面试必备技巧>的学习笔记.课程地址:https://coding.imooc.com/class/evaluation/1 ...
- [css] 简述你对BFC规范的理解
[css] 简述你对BFC规范的理解 是CSS中的一个渲染机制,BFC就相当于一个盒子,内部的元素与外界的元素互不干扰.它不会影响外部的布局,外部的布局也不会影响到它.形成条件(任意一条)float的 ...
- 【HTML/CSS】CSS盒模型及其理解
1 盒模型 概念:CSS盒模型本质是一个盒子,包括:外边距margin.边框border.内边距padding.内容content 分类:标准盒模型(W3C)和怪异盒模型(IE) 标准盒模型:widt ...
- 简要介绍css的盒模型,CSS盒模型的介绍
CSS盒模型的概念与分类 CSS盒模型就是一个盒子,封装周围的HTML元素,它包括内容content.边框border.内边距padding.外边距margin. CSS盒模型分为标准模型和IE模型: ...
- css盒子模型基本原理,CSS盒模型
CSS盒模型.jpg 组成 如上图所示,CSS盒模型由4部分组成: margin(外边距) border(边框) padding(内边距) content(内容) 分类 CSS盒模型分为标准盒模型和I ...
- 记录--有关CSS盒模型之内边距、边框、外边距的十九问题
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 本篇文章主要探讨盒模型,以及内边距.边框.外边距的面试题与思考,也希望您能把您的思考和遇到的问题以评论的方式补充下,后期,我将会补充到文章 ...
- CSS盒模型之内边距、边框、外边距 十九问 (持续更新)
第一问:什么是盒模型? 第二问:两者的区别是什么? 第三问:怎么设置这两种模型呢? 第四问JS怎么获取和设置盒模型的宽高呢,你能想到几种方法 第五问:描述一下下面盒子的大小,颜色什么的(content ...
最新文章
- 链表问题17—— 一种怪异的节点删除方式
- Android CardView 开发过程中要注意的细节
- MobaXterm通过SSH连接centOS7
- 2021牛客暑期多校训练营1 G Game of Swapping Numbers 思维 + 巧妙的转换
- 页面加载时模块移入动画---wow
- 【设计思想解读开源框架】mysql官方文档中文版下载免费
- 前端学习(1155):常量const03
- 【Spring】Spring boot 可以通过集成jolokia来使用HTTP形式访问mbean
- Python实时获取鼠标下窗口文本
- WampServer
- 【bzoj2588/P2633】count on a tree —— LCA + 主席树
- 电子设计竞赛控制组——完整旋转倒立摆程序
- 视频教程-【国内首套H3C V7交换机实战课程-1】Comware V7使用、维护与管理-H3C认证
- 美萍系统怎么修改服务器时间,局域网中如何架设美萍VOD视频点播系统服务器
- 数据分析|数据分布特征的描述
- Vue 中路由传参(动态路由匹配)
- 2022-2028全球工业用视频内窥镜行业调研及趋势分析报告
- cad服务器手动改自动,手动挡改为自动挡,只需加装这“神器”老司机3000元就能...
- 《Oracle Java EE编程自学和面试指南》09-02:HttpSession接口
- 贪吃蛇大作战ai_二 贪吃蛇大作战!
热门文章
- 小技巧--获取当前前台显示Activity
- 一个并不“艰难”的决定—一个程序员的成长史(3)
- 存在重复元素-python对不起算法大人,我又来水了
- Error: Running Homebrew as root is extremely dangerous and no longer supported. As Ho【已解决】
- 【GPLT】L1-057 PTA使我精神焕发
- mfc下创建html文件,用MFC怎么创建TXT文件并写入数据
- Python 高级编程和异步IO并发编程 --13_4 call_soon,call_at,call_soon_threadsafe
- SegmentFault Hackathon 文艺复兴今在沪举行
- Oracle VM VirtualBox 解决 “不能为虚拟电脑 打开一个新任务”
- 家庭教育之学生不愿做家务怎么办?