盒模型 width height border padding margin 浏览器会给元素一个默认样式，一般我们会重置浏览器默认样式 * {padding: 0; margin: 0} 注意 1 行内元素没有上下外边距 也没有上内边距 2 外边距合并 垂直的块级盒子以最大的外边距为准(外边距塌陷)
CSS盒模型 元素占用的页面空间 根据W3C的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的 设置内边距和外边距可以放大缩小元素 CSS 内边距 padding 元素内容与元素边框之间的空白区域 单位 h1 {padding: 10px;} h1 {padding: 10px
两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。注意：相邻的盒子可能并非是由父子关系或同胞关系的元素生成。 但是边界的重叠也有例
在制作网页中,margin和padding的使用是必不可少的,在这里,我截了一张图. 在这张图中, 内部的蓝色区域是内容的区域, 再往外的绿色框是内填充,就是我们所说的padding, 往外有点浅黄色的就是边框, 最外层就是外边距,也就是margin. 在右下角的红色矩形框中也有对应的标注. 那
这里是修真院前端小课堂，每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能，本篇分享的是： 【什么是外边距重叠，重叠的结果是什么？ 】 1.什么是外边距重叠？ 外边距重叠指的
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。 解决方案： 可以为父元素定义1像素的上边框或上内边距。 border: 1px solid red; padding: 1px
Block Formatting Context，中文直译为块级格式上下文。 1. BFC的定义 是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。 在创建了 Block Formatting Context 的元素中，其子元素会一个接一个地放置。垂直方向上他们的起点是一个包含
外边距，块元素在网页中的布局 外边距是有负数的 margin:上 右 下 左 margin: 10px 20px 30px 40px margin-top: margin-left: margin-right: margin-bottom: 外边距，块元素水平居中 margin: 0 auto; 垂直居中：行高等于块高度 内边距 padding属性定义元素边框与元素内容之间的空间
外边距重叠就是margin-collapse 在CSS中，相邻的两个盒子的外边距可以结合成一个单独的外边距，这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距 1、两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值 2、两个相邻的外边距都是负数时，折叠结果是两者绝
offsetWidth //元素宽度、内边距和边框，不包括外边距 offsetHeight //元素高度、内边距和边框，不包括外边距 clientWidth //元素宽度、内边距，不包括边框和外边距 clientHeight //元素高度、内边距，不包括边框和外边距 style.width
什么是BFC 在一个web页面的CSS渲染中，块级格式化上下文（Block Formatting Context）是按照块级盒子布局的。W3C对BFC的定义如下： 浮动元素和绝对定位元素，非块级盒子的块级容器（例如inline-blocks,table-cells和table-captions），以及overflow值不为“visible”的块级盒子，都会为他们的内容创
1.外边距和内边 margin: 用于控制元素与元素之间的距离 外边距；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。 padding: 用于控制内容与边框之间的距离 内边距； Border(边框) 围绕在内边距和内容外的
外边距重叠是指两个垂直相邻的块级元素，当上下两个边距相遇时，起外边距会产生重叠现象，且重叠后的外边距，等于其中较大者。（水平方向不会发生） 相邻元素可为父子元素或同胞元素。 实例 （1）同胞元素 （2）父子元素 解决方案： （1）设置为BFC布局 根元素 float的值不为none overflow的
BFC BFC BFC 全称 Block Formatting Context。 每个渲染区域用formatting context表示，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用 在正常流中的盒子要么属于块级格式化上下文，要么属于内联格式化上下文 BFC的产生 根元素； float属性不为none； position为absol
