盒子模型

简介: 盒子模型

一、盒子的组成:

1.网页内容:位于最中间,网页的主要显示内容

2.边框(border):位于内边距外面。

3.内边距(paddind):位于内容与边框之间的空隙

4.外边距(margin):边框与外面元素的空隙

二、边框:

1.颜色color:black,red

2.大小:1px

3.类型:实线solid,虚线dashed,点线dotted

4.上边框设置:border-top:1px solid black

5.下边框设置:border-bottom:1px solid black

6.左边框设置:border-left:1px solid black

7.右边框设置:border-right:1px dashed black

三、margin:

外边距:

margin-top:上外边距

margin:15px,表示当前元素的四格外边距都是15px

margin:15px 20px 10px 15px:表示上边距15px,右边距20px,下边距10px,左边距15px

四、padding:

内边距:

padding-bottom:下内边距

padding:10px,表示4个内边距都是10px;

padding:15px 20px 10px 10px,表示上内边距15px,右内边距20px,下内边距10px,左内边距10px;

五、border-radius:表示边框的圆角。eg:border-radius:10px

圆形:border-radius:50% 50%;

六、一个盒子的总宽度=左外边距+左边框+左内边距+内容+右内边距+右边框+右外边距

七、盒子的总高度=上外边距+上边框+上内边距+内容的高度+下内边距+下边框+下外边距

相关文章
|
10月前
|
存储 安全 物联网
浅析Kismet:无线网络监测与分析工具
Kismet是一款开源的无线网络监测和入侵检测系统(IDS),支持Wi-Fi、Bluetooth、ZigBee等协议,具备被动监听、实时数据分析、地理定位等功能。广泛应用于安全审计、网络优化和频谱管理。本文介绍其安装配置、基本操作及高级应用技巧,帮助用户掌握这一强大的无线网络安全工具。
724 9
浅析Kismet:无线网络监测与分析工具
|
机器学习/深度学习 索引 Python
python机器学习classification_report()函数 输出模型评估报告
python机器学习classification_report()函数 输出模型评估报告
2331 0
python机器学习classification_report()函数 输出模型评估报告
|
C语言
c语言编程练习题:7-51 求奇数分之一序列前N项和
c语言编程练习题:7-51 求奇数分之一序列前N项和
173 0
|
运维 算法 测试技术
通用研发提效问题之实现研发提效,如何解决
通用研发提效问题之实现研发提效,如何解决
|
存储
树和二叉树
树和二叉树
139 0
聊天框(番外篇)—如何实现@功能的整体删除
上一篇文章中,我们已经初步实现了聊天输入框,但其@功能是不完善的,例如无法整体删除、无法获取除用户名以外的数据(假设用户名不是唯一的)。有问题就要想办法解决,在网上百度了一圈后,倒是有一些收获。本文就着重解决@的整体删除以及获取额外数据。
1381 0
聊天框(番外篇)—如何实现@功能的整体删除
|
Java Linux 网络安全
bigdata-03-Linux命令系统学习
bigdata-03-Linux命令系统学习
207 3
|
C语言
Makefile基础教学(include的使用方法)
Makefile基础教学(include的使用方法)
283 0
|
Web App开发 编解码 固态存储
camtasia有效密钥2022有哪些?
camtasia有效密钥2022有哪些?camtasia是TechSmith旗下一款专门录制屏幕动作的工具,这款软件是一款付费软件,用户需要激活密钥才可以激活,所以很多的用户都在网上求有效的密钥,所以下面小编就给大家带来camtasia有效密钥2022通用有效。
12284 2
camtasia有效密钥2022有哪些?
node子进程(Child Process)获取硬盘分区
node子进程(Child Process)获取硬盘分区
122 0