内容简介:CSS盒子模型算是CSS中最重要的一部分,在开发中遇到难以理解的现象,往往是因为对模型的理解不够。 盒子模型主要有标准模型和IE模型,本文主要讲述:标准模型「默认:box-sizing: content-box」由四部分组成,从内到外依次是:标准模型指的是设置box-sizing为content-box的盒子模型,一般width,height 指的是content的宽高。 而IE模型指的是box-sizing为border-box的盒子模型。宽高的计算是content+padding+border;
CSS盒子模型算是CSS中最重要的一部分,在开发中遇到难以理解的现象,往往是因为对模型的理解不够。 盒子模型主要有标准模型和IE模型,本文主要讲述:
- 标准模型基本概念
- 标准模型与IE模型的区别
- 边距重叠与BFC
- 其他
标准模型基本概念
标准模型「默认:box-sizing: content-box」由四部分组成,从内到外依次是:
- 内容区域「content」:可以放置元素的区域如文本,图像等,一般设置宽高度指的是这个内容的宽高;
- 内边距区域「padding」:内容与边框之间的距离
- 边框区域「border」:就是边框
- 外边距区域「margin」:由外边边距限制,用空白区域扩展边框区域,来分开相邻的元素。
标准模型与IE模型的区别
标准模型指的是设置box-sizing为content-box的盒子模型,一般width,height 指的是content的宽高。 而IE模型指的是box-sizing为border-box的盒子模型。宽高的计算是content+padding+border;
边距重叠与BFC
外边重叠三种情况:
- 相邻元素之间
- 父元素与其第一个或最后一个字元素之间
- 空的块级元素
BFC
BFC的定义:见MDNBFC
BFC的作用:
- 让浮动内容与周围内容等高 当浮动内容溢出容器的时候,创建容器的BFC,来包裹这个浮动。
- 外边距蹦陷 当外边距被合并时,创建各自的BFC,来解决问题 父元素与第一个元素上边距合并,创建父元素与第一个元素的各自的BFC
其他
包含块的影响
当我们设置元素的一些属性,譬如:width、height、padding、margin、定位的偏移值「top,left」,常常受到起包含块的影响。
谁是你的包含块
- position 属性为static,relative 包含块为最近祖先块元素。
- position 属性为absolute,包含块为不是static的祖先元素,这跟定位差不多。
- position 为 fixed,包含块就是 viewport,也就是整个屏幕大小
元素的width、padding、margin、定位的偏移值「top,left」百分比是根据包含块的宽度计算
如何画一个自适应宽高的正方形
div{ width: 100%; padding-bottom: 100%; } 复制代码
因为padding跟width的计算是根据包含块的宽度计算的,而height = content + padding 所以这样能画出一个正方形。
以上所述就是小编给大家介绍的《CSS盒子模型》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- CSS盒子模型
- 从头开始复习css之盒子模型
- 【Hello CSS】第二章-CSS的逻辑属性与盒子模型
- CSS——把“可以动的盒子”更优雅地展示:② “居中”盒子
- 斐讯 N1 盒子 部署 NKN 挖矿
- CSS——让“盒子”动起来:① 浮动
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
亚马逊跨境电商运营宝典
老魏 / 电子工业出版社 / 2018-6 / 69
《亚马逊跨境电商运营宝典》详细讲解亚马逊的平台知识和运营技巧,内容围绕亚马逊卖家的日常工作,系统讲解亚马逊账号注册、后台操作、选品、产品发布、Listing 优化、站内广告、FBA 发货、VAT 税务等内容,并且通过大量的案例分析,用生动翔实的案例为读者传递运营中必备的操作技巧和运营方法。 《亚马逊跨境电商运营宝典》内容针对性强,讲解的知识、技巧和方法都充分考虑到易学、易懂、易操作、易落地执......一起来看看 《亚马逊跨境电商运营宝典》 这本书的介绍吧!