weixin_53278262的博客

目录 结构划分以及组成 代码实现 规划网格 定位格子区域 隐形网格 效果展示 Grid专为布局而生。Flexbox是沿着两条轴排列分布，定义空间的分配。Grid则是把子结点布到网格中，这个网格可以是预设好的几行几列，也可能是自动生成的隐式的网格，总之头脑中始终要有一个“网格”的意象。Grid的规则属性很多，其中不乏一些是shorthands。我们需要先充分理解Grid模型，才能得心应手。在布局上，它绝对是一柄利器。兼容性前面说了，目前PC端上支持还是比较成熟的，移动端上不建议用。 结..

关于margin-top兼容(传递)问题,我相信不少小伙伴在日常生活中经常遇到吧,我先举个栗子吧,这样便于大家理解 html代码: <div class="box"> <div class="child"></div> </div> css代码: * { margin: 0; padding: 0; } .box {

打工人，打工魂，打工都是人上人 边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。 很多前端小伙伴在学习或者工作过程中会碰到上下盒子外边距重叠的问题，之前小编碰到这类问题也是琢磨了好久没弄出来----------这波大意了，没有闪，今天让小编给大伙避避坑，我先讲讲在规范文档中，2个或2个以上的块级盒模型相邻的垂直margin重叠的计算方法吧 1.全部都为正值，取最大者； 2.不全是正值，则都取绝对值，然后用正值减去最大值； 3.

众所周知，我们常见的两种盒模型，一种是W3C盒模型（标准盒模型），另外一种是IE盒模型（怪异盒模型），很多小伙伴分不清楚这两个到底有什么区别呢 标准盒模型 从图中不难看出，在标准盒模型中 盒子的宽：width= content的width 盒子的高：height=content的高 怪异盒模型 在怪异盒模型中， 盒子的宽：width = content的width+padding+border 盒子的高:height = content的height+padding+border 上面的内容小伙伴可能知

** BFC的个人见解 ** 　　BFC全称块级格式化上下文，BFC是css中一个隐含的属性，开启BFC该元素会变成一个独立的布局区域。 BFC的布局规则 内部的box会在垂直方向，一个接一个地放置。 box垂直方向的距离由margin决定。属于同一个BFC的两个相邻box的margin会发生重叠。 BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。 计算BFC的高度时，浮动元素也参与计算。 BFC不会与浮动发生重叠 触发BFC的条件： 设置