盒子模型

简介: 盒子模型

1.边框

image.png

2.边框粗细

thin:默认边框厚度1px

medium:默认边框厚度3px

thick:默认边框厚度5px

border-style

image.png

3.边框样式

dashed:虚线ditted:点状虚线none:无轮廓。当定义了该值时,border-color将被忽略,border-width计算值为0,除非边框轮廓应border-image。hidden:隐藏边框。dotted:点状轮廓。dashed:虚线轮廓。solid:实线轮廓double:双线轮廓。两条单线与其间隔的和等于指定的border-width值groove:3D凹槽轮廓。ridge:3D凸槽轮廓。inset:3D凹边轮廓。outset:3D凸边轮廓

image.png

4.border简写:同时设置边框的颜色、粗细和样式

image.png

5.外边距

image.png

6.外边距的妙用

image.png

7.内边距

image.png

8.盒子模型的尺寸

image.png

9.box-sizing

image.png

image.png

9.圆角边框

image.png

10. 使用border-radius制作特殊图形

圆形:

image.png

半圆形:

image.png

扇形:

image.png


相关文章
|
数据采集 JavaScript 前端开发
Python 爬虫实战:抓取和解析网页数据
【8月更文挑战第31天】本文将引导你通过Python编写一个简单的网络爬虫,从网页中抓取并解析数据。我们将使用requests库获取网页内容,然后利用BeautifulSoup进行解析。通过本教程,你不仅能够学习到如何自动化地从网站收集信息,还能理解数据处理的基本概念。无论你是编程新手还是希望扩展你的技术工具箱,这篇文章都将为你提供有价值的见解。
|
12月前
|
Java 数据库连接 开发者
Spring 框架:Java 开发者的春天
【10月更文挑战第27天】Spring 框架由 Rod Johnson 在 2002 年创建,旨在解决 Java 企业级开发中的复杂性问题。它通过控制反转(IOC)和面向切面的编程(AOP)等核心机制,提供了轻量级的容器和丰富的功能,支持 Web 开发、数据访问等领域,显著提高了开发效率和应用的可维护性。Spring 拥有强大的社区支持和丰富的生态系统,是 Java 开发不可或缺的工具。
214 8
|
人工智能 分布式计算 物联网
操作系统的演变与未来趋势
【8月更文挑战第16天】本文将探讨操作系统从早期单任务到现代多任务、多用户的发展历程,以及它们如何适应不断变化的技术需求。我们将深入了解操作系统的设计哲学转变,并展望未来可能的发展趋势,包括人工智能和物联网技术对操作系统设计的影响。文章旨在为读者提供一个关于操作系统演化的宏观视角,并激发对这一领域未来发展的思考。
|
Ubuntu 数据安全/隐私保护
安装Ubuntu16.04卡在Ubuntu的logo界面解决方法
安装Ubuntu16.04卡在Ubuntu的logo界面解决方法
2292 0
安装Ubuntu16.04卡在Ubuntu的logo界面解决方法
|
运维
开发与运维数组问题之指针的加减法意义如何解决
开发与运维数组问题之指针的加减法意义如何解决
95 7
Flutter生命周期方法小技巧
Flutter生命周期方法小技巧
161 0
win桌面圣诞小插件分享
win桌面圣诞小插件分享
98 0
|
存储 索引 Python
Python 列表
Python 列表
60 0
|
JSON Java 应用服务中间件
使用 Caddy 代替 acme.sh 来为自己的网站颁发免费 SSL 证书
使用 Caddy 代替 acme.sh 来为自己的网站颁发免费 SSL 证书
使用 Caddy 代替 acme.sh 来为自己的网站颁发免费 SSL 证书