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知识！

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

CSS入门三、盒子模型
零.文章目录 CSS入门三.盒子模型 1.网页布局的本质网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子 Box . 利用 CSS 设置好盒子样式,然后摆放到相应位置. 往盒子里面装内容 ...
CSS入门三（盒子模型）
文章目录前言一.盒子模型是什么? 二.盒子模型的总宽度与总高度三.盒子模型的属性 1.边框属性 (1)边框样式 (2)边框宽度 (3)边框颜色 (4)边框综合属性 (5)圆角属性 (6)图片边框 ...
CSS三栏布局的7种方式代码详解 | 圣杯布局 | 双飞翼布局 | 弹性盒子
CSS三栏布局代码详解写在前面:博主最近在转头复习最前面学的CSS,整理一下CSS三栏布局的笔记,正好也捋顺自己的逻辑思路.解析我尽量按照思路详细的写了,代码均可正确运行,留给需要的小伙伴进行参考, ...
python做估值模型_通证估值模型-费雪模型与净现值模型详解
通证估值模型-费雪模型与净现值模型详解一.费雪模型,适合货币型通证 1)公式:MV= PQ M: 货币供应量 V: 货币流通速度 P:劳务平均价格 V:劳务总数维基百科地址:Equation of ...
rac的crs进程是做什么的_RAC 管理(crs_stat、crsctl、srvctl各种命令详解)
RAC 管理(crs_stat.crsctl.srvctl各种命令详解) 命令集可以分为以下4种: 节点层:osnodes 网络层:oifcfg 集群层:crsctl, ocrcheck,ocrdum ...
零基础CSS入门教程(19)–盒子模型简述
点此查看所有教程.项目.源码导航本文目录 1. 前言 2. 实例解析 3. 小结 1. 前言之前我们讲过CSS的尺寸.边框.内边距.外边距. 其实这些都是占用网页空间,在CSS中,我们将网页元素 ...
requestmapping配置页面后_Spring MVC 入门指南（二）：@RequestMapping用法详解
一.@RequestMapping 简介在Spring MVC 中使用 @RequestMapping 来映射请求,也就是通过它来指定控制器可以处理哪些URL请求,相当于Servlet中在web.x ...
鸣礼炮21响的含义c语言,健身21响礼炮什么意思？怎么做？一次适合练几组？ 21响礼炮做法详解...
在之前小编给大家介绍了21响礼炮的前身'一个半'训练法.这个训练方法当然很不错,但是它的进阶版,也就是我们今天要介绍的21响礼炮,那才是真正的力竭神器!大家首次接触到这个高级训练法则应该是在阿诺德施瓦 ...
无线网盒子怎么连接电脑连接服务器,网络机顶盒怎么用设置连接wifi？图文详解手把手教你...
小编是过来人,最先接触机顶盒的时候,不知如何将盒子联网,ADSL连接到机顶盒上并不能自动获取IP,这给初次接触盒子的用户造成了不小的困惑.想必大家的家里都有WiFi吧,就是无线路由器,有了它,就好办啦 ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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