html页面的盒子边框怎么做的,HTML+CSS入门 用三层盒子结构实现多边框详解

本篇教程介绍了HTML+CSS入门 用三层盒子结构实现多边框详解，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

<

如果想给每个盒子加上美观的border，实现如下效果

如果给每个li加border的话盒子就会被撑开，则依照浮动特性一行就容纳不下4个li,li会自动掉下来。这时，可以给ul一个宽度，li就不会掉下来，如下图所示

这时，刚好ul会比外面的盒子高几像素和几及像素(如果不清除浮动ul的高度是0)，这时再给最外面的盒子overflow-hidden就能达到目的。如图所示

把最外面盒子的border去掉就能得到想要的效果了。

代码如下

html>

消除多个边缘的margin

*{

margin: 0;

padding: 0;

}

li{

list-style: none;

}

.box{

height: 300px;

width: 400px;

margin: 40px auto;

overflow:hidden;

/*溢出的边界消除*/

/*            border:1px solid #000;*/

}

ul{

width: 500px;

overflow: hidden;/*触发bfc就可以在浏览器看到ul*/

}

li{

width: 100px;

height: 100px;

float: left;

border-bottom:1px solid #ccc;

border-right: 1px solid #ccc;

}

/*使用三层盒子模型做出效果

box给overflow:hideen消除右边和下面的总边距

ul拿来撑开以便一行能容纳4个li

li拿来给border

*/

本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！