盒子模型包括:margin border padding content
在标准盒子模型中 conten不包括border和padding 就是他自身内容所包含的区域。
在IE盒子模型中 content包括border和padding 是内容和border padding之和。
关于盒子边框重叠颜色设置问题:
//就拿下列标签来说 <ul> <li class="on">房产</li> <li>家居</li> <li>二手房房</li> </ul> css: li{list-style: none; display: inline-block; border: 1px solid #4c6fe2; border-bottom: none; width:80px;} ul{border-bottom:2px solid #6e442c; height:px; width:400px; display: inline-block; } .on{ border-bottom:40px solid red; }
因为ul没设定宽度所有加border的时候会撑开父元素宽度:效果如下
给父元素ul设置height
ul{border-bottom:2px solid #6e442c; height:28px; width:400px; display: inline-block; }
效果如下:
再缩小ul的高度:
把颜色设置为#fff 白色:
。
由此可见content内容区域的大小是固定不变的。border变大也只是外面去增加,而不会往里面增加。
给父元素设置高度的时候,只要border的宽度超过父元素ul的时候就会覆盖父元素的边框。
刚好覆盖如何设置:
li{list-style: none; display: inline-block; height:28px; border: 1px solid #4c6fe2; border-bottom: none; width:80px; } ul{border-bottom:2px solid #6e442c; height:29px; width:400px; display: inline-block; } .on{ border-bottom:2px solid red;
上面把li的border-top设置为1px height设置为28 没有设置padding和下边框 那么只要把ul height设置为28+1 的时候 再把li的border设置为1px solid #fff;
时候刚好可以覆盖ul的的下边框。如下:
如果li没设置height怎么实现border覆盖?
li{list-style: none; display: inline-block; border: 1px solid #4c6fe2; border-bottom: none; width:400px; } ul{border-bottom:2px solid #6e442c; height:29px; width:400px; display: inline-block; } .on{ border-bottom:2px solid red; padding-bottom:10px; }
可以设置padding-bottom,把border往外退 效果如下:
时间: 2024-10-21 16:24:53