首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

html三大盒子模型梳理

标准盒(W3C) html所有元素默认是标准盒。会被内间距和边框撑大。 宽度计算规则:设置的宽度+内间距+边框+外间距 怪异盒(IE盒) 怪异盒子,不会被内间距,边框撑大。...盒子内的内容也只会在减掉内间距+边框的剩余空间绘制。...转化为怪异盒: box-sizing:border-box 宽度计算规则:设置的宽度+外间距 弹性盒(flex) 弹性盒子是 CSS3 的一种新的布局模式。ie不支持。...父盒子设为 flex 布局以后,子元素的 float、clear 和 vertical-align 属性将失效。...转换为弹性盒子:display:flex 可选后续属性: flex-direction:设置主轴的方向 flex-wrap:设置子元素是否换行 flex-flow:复合属性,相当于同时设置了 flex-direction

1K30

HTML第五课——css盒子模型【2】

---- 继续讲我们的盒子模型 由于现在浏览器有可能会自动给你的代码加上margin或者padding,我们经常在css文件中先设置一下这两个属性值为0: html, body{ margin:...DOCTYPE html> Css盒子模型 Css盒子模型 <meta name="keywords...<em>两个</em><em>盒子</em>分别在两行出现,那么如果我想把这<em>两个</em><em>盒子</em>放到一行,我要怎么办呢?我的第一个想法是把display属性改为inline,但是发现改后样式变为: ?...现在又出现了另一个问题,就是大家发现上面<em>两个</em><em>盒子</em>中间多了一个空白的地方,而且空白地方无法选中,说实话如果你用inline-block那么中间这个间距就是默认自带的了(如果非要去掉就要加float: left

1.1K30

Android开发人员一次搞懂前端BFC原理

而块级格式化上下文(BFC)是页面中一个相对独立的模块,它定义了它内部的块级盒子(块级元素的盒子模型)如何排布和布局。html的根元素标签就会产生一个BFC区域。...BFC规则 1、内部的块级盒子会在垂直方向,一个接一个地放置。 2、块级盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻块级盒子的margin会发生重叠。...其实我们会发现我们当初学习HTML和CSS时,很多块级元素的规则其实就是BFC的规则。 2、块级盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻块级盒子的margin会发生重叠。...这就是BFC中经常发生的边距重叠的情况。而且重叠的情况会根据重叠的块级盒子的margin值有关,在这里即:div1的margin-bottom和div2的margin-top值有关系。...如何解决margin边距重叠 根据BFC规则:属于同一个BFC的两个相邻块级盒子的margin会发生重叠。因此我们只要使div1与div2不属于同一个BFC即可: 1<!

67820
领券