利用border实现等高布局

参考张鑫旭慕课网CSS视频border课程&＃xff1a;https://www.imooc.com/learn/755

利用border实现等高布局&＃xff08;边框宽度固定&＃xff09;&＃xff0c;效果图如下

HTML:

CSS:

.box {border-left:300px solid #222;background-color:pink;
}
.left {width:300px;float:left;margin-left:-300px;color:white;
}
.clearfix::after{content:"";display:block;visibility:hidden;clear:both;height:0;
}

当修改HTML结构后&＃xff0c;让左侧浮动区域宽度变小&＃xff0c;效果为

需要注意的地方&＃xff1a;

&＃xff08;1&＃xff09;利用了元素边框颜色和背景颜色的高度相等的原理&＃xff0c;因此background-clip应该为默认值border-box。背景颜色被边框颜色覆盖&＃xff0c;因此出现了这样的效果。

&＃xff08;2&＃xff09;