《CSS世界》注2:四族盒模型
时间:2023-03-30 17:50:17
CSS
上一篇:《CSS世界》注1:Flow/Element/Size下一篇:《CSS世界》注3:内联元素和对齐写在前面阅读《CSS世界》前章4、我以为box模型无非就是margin/border/padding/content,无非是在不同的box-sizing下表现不同;但书中记录的替换元素、非替换元素、内容的一些用法、边距合并等,让我对“盒模型四族”有了新的认识1.替换元素和非替换元素根据对于“外部盒子”是行内还是块级,我们可以将元素分为内部Link元素和块级元素,根据是否有可替换内容,我们也可以将元素分为可替换元素和不可替换元素”替换元素”,常见的替换元素有:
、
.father{width:300px;}.son{边距:0-20px;}(2)经典不兼容二列layout.column-box{overflow:hidden;}.column-left,.column-right{margin-bottom:-9999px;padding-bottom:9999px;}布局原则:默认情况下,块级元素之间的垂直距离为0。一旦margin-bottom:-9999px表示后面的所有元素与上面的元素之间的空间距离变为-9999px,即后面的元素全部上移了9999px。这时候上帝的一笔padding-bottom:9999px增加了元素的高度,抵消了正负。它对布局层没有影响,但是带来了我们需要的——可视化层多了9999px的高度,可以使用背景色4.2margin合并块级元素的上外边距(margin-top)和下外边距(margin-bottom)有时会组合成一个单独的边距,这种现象称为“边距合并”。两种情况:块级元素和margin合并只发生在垂直方向的3种场景(1)相邻兄弟元素的margin合并。这是最常见最基本的
第一行
第二行
p{margin:1em0;}(2)parentandfirst/lastinmargin合并一个子元素