![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端开发细节问题记录
文章平均质量分 83
前端开发,一些细节问题处理,及一些特殊情况处理
晨爱衿文
倾注前端,致力提升自我
展开
-
详细剖析外边距折叠,轻松摆脱margin带来父子元素和相邻元素外边距塌陷
外边距折叠,其实就是字面意思,可能大家没有接触这个名词,但是大家在码css时一定会遇到过,可能没深入了解,就是外边距和实际预想的不一样,比如相邻元素外边距会相互影响,子元素外边距会导致父元素共享子元素边距等,其实就是外边距折叠;没有设定边框、内边距、行级内容、高度(height)或最小高度(min-height)来分隔块级元素的下边距(margin)与其内部的一个或多个后代后代块元素的下边距(margin-bottom),则会出现这些外边距的折叠,重叠部分最终会溢出到父代元素的外面。原创 2023-09-26 14:36:47 · 333 阅读 · 0 评论 -
弹性布局flex或者grid元素平分,实际会被内容撑大,问题剖析
控制flex元素,有三个属性控制,flex-basis,flex-shrink,flex-grow。通过上面弹性布局和元素width分析,当元素支持收缩时,min-width默认是auto,即元素内容的宽度,所以会导致item撑出平分的宽度!如果设置宽度,由于是弹性布局,宽度也会被伸缩!flex-grow 值为整数,默认是0, 分配可用空间,如果其他元素也被允许延展,那么他们会各自占据可用空间的一部分;元素item平分,就需要在每个item设置flex:1,即自动伸缩,每个item伸缩等级都一样!原创 2023-09-22 16:50:23 · 986 阅读 · 1 评论