微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > html教程 > 正文

后端码农谈前端（CSS篇）第六课：盒子模型_html/css_WEB-ITnose

php中文网
发布： 2016-06-24 11:47:27
原创
1029人浏览过

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

提示：背景应用于由内容和内边距、边框组成的区域。

一、CSS 内边距属性

属性 描述
padding 简写属性。作用是在一个声明中设置元素的所内边距属性。
padding-bottom 设置元素的下内边距。
padding-left 设置元素的左内边距。
padding-right 设置元素的右内边距。
padding-top 设置元素的上内边距。

属性值：

  • auto：浏览器计算内边距。
  • length：规定以具体单位计的内边距值，比如像素、厘米等。默认值是 0px。
  • %：规定基于父元素的宽度的百分比的内边距。
  • inherit：规定应该从父元素继承内边距。

    二、CSS 边框属性

    1、border

    属性 描述
    border 简写属性，用于把针对四个边的属性设置在一个声明。
    border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。
    border-left 简写属性，用于把左边框的所有属性设置到一个声明中。
    border-right 简写属性，用于把右边框的所有属性设置到一个声明中。
    border-top 简写属性，用于把上边框的所有属性设置到一个声明中。

    2、border-style

    属性 描述
    border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
    border-bottom-style 设置元素的下边框的样式。
    border-left-style 设置元素的左边框的样式。
    border-right-style 设置元素的右边框的样式。
    border-top-style 设置元素的上边框的样式。

    属性值：

    立即学习“前端免费学习笔记（深入）”；

    可图大模型
    可图大模型

    可图大模型（Kolors）是快手大模型团队自研打造的文生图AI大模型

    可图大模型 32
    查看详情 可图大模型
  • none：定义无边框。
  • hidden：与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
  • dotted：定义点状边框。在大多数浏览器中呈现为实线。
  • dashed：定义虚线。在大多数浏览器中呈现为实线。
  • solid：定义实线。
  • double：定义双线。双线的宽度等于 border-width 的值。
  • groove：定义 3D 凹槽边框。其效果取决于 border-color 的值。
  • ridge：定义 3D 垄状边框。其效果取决于 border-color 的值。
  • inset：定义 3D inset 边框。其效果取决于 border-color 的值。
  • outset：定义 3D outset 边框。其效果取决于 border-color 的值。
  • inherit：规定应该从父元素继承边框样式。

    3、border-width

    属性 描述
    border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
    border-bottom-width 设置元素的下边框的宽度。
    border-left-width 设置元素的左边框的宽度。
    border-right-width 设置元素的右边框的宽度。
    border-top-width 设置元素的上边框的宽度。

    属性值：

  • thin：定义细的边框。
  • medium：默认。定义中等的边框。
  • thick：定义粗的边框。
  • length：允许您自定义边框的宽度。
  • inherit“规定应该从父元素继承边框宽度。

    4、border-color

    属性 描述
    border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
    border-bottom-color 设置元素的下边框的颜色。
    border-left-color 设置元素的左边框的颜色。
    border-right-color 设置元素的右边框的颜色。
    border-top-color 设置元素的上边框的颜色。
  • color_name：规定颜色值为颜色名称的边框颜色（比如 red）。
  • hex_number：规定颜色值为十六进制值的边框颜色（比如 #ff0000）。
  • rgb_number：规定颜色值为 rgb 代码的边框颜色（比如 rgb(255,0,0)）。
  • transparent：默认值。边框颜色为透明。
  • inherit：规定应该从父元素继承边框颜色。

    三、CSS 外边距属性

    属性 描述
    margin 简写属性。在一个声明中设置所有外边距属性。
    margin-bottom 设置元素的下外边距。
    margin-left 设置元素的左外边距。
    margin-right 设置元素的右外边距。
    margin-top 设置元素的上外边距。

    属性值：

  • auto：浏览器计算外边距。

  • length：规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。

  • %：规定基于父元素的宽度的百分比的外边距。

  • inherit：规定应该从父元素继承外边距。

    四、外边距合并：

    外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

    • 大家都在看：

    HTML速学教程(入门课程)
    HTML速学教程(入门课程)

    HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

    下载
    来源：php中文网
    收藏 点赞
    上一篇：java web有个小错误啊，不知道哪里有错，新手求大神_html/css_WEB-ITnose 下一篇：CSS 文本上下标_html/css_WEB-ITnose
    本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
    最新问题
    如何通过HTML5 Mark元素高亮文本的详细教程 mark元素用于高亮搜索词或重要内容，语义清晰且利于SEO；2.默认黄色背景可结合CSS自定义样式；3.适用场景包括搜索关键词、教程重点等；4.应避免滥用，不可替代strong或em，宜配合aria-label提升可访问性。
    2025-11-14 19:58:02
    164
    html如何使用otf_HTML使用OTF字体文件（@font-face）方法 通过@font-face引入OTF字体，需定义字体名称与路径，使用font-family调用，并提供WOFF、TTF等多格式以增强兼容性，同时压缩文件并设置font-display:swap优化加载性能。
    2025-11-14 19:53:02
    451
    Mac如何设置Safari始终用源码视图打开HTML？ 1、通过启用开发菜单可查看网页源码：进入Safari偏好设置→高级→勾选“在菜单栏中显示‘开发’菜单”；2、启用后点击“开发”→“显示网页源文件”或使用快捷键Option+Command+U快速查看；3、如需保存源码，选择“文件”→“存储为”→格式改为“页面源码”并保存为.html文件。
    2025-11-14 19:35:02
    843
    如何处理HTML图片优化加载的解决办法 使用合适格式、懒加载、响应式适配和预加载可优化HTML图片加载。①选用JPEG/PNG/WebP/AVIF格式并用提供备选；②通过loading="lazy"或IntersectionObserver实现懒加载；③利用srcset和sizes适配不同设备；④对首屏关键图使用提前加载，综合提升性能与体验。
    2025-11-14 19:25:34
    249
    html音频链接怎么打_html音频链接如何打操作步骤 准备音频文件并确保格式为MP3、WAV或OGG，存放于本地或服务器；2.使用插入音频；3.可添加多个提供兼容格式；4.按需使用autoplay、loop、muted实现自动播放与循环。
    2025-11-14 19:18:06
    114
    Linux用xdg-mime设置HTML文件默认用Code打开 1、确认Code的.desktop文件存在并路径正确；2、用file命令查得HTML的MIME类型为text/html；3、执行xdg-mimedefaultcode.desktoptext/html完成关联；4、通过xdg-mimequerydefaulttext/html验证返回code.desktop，设置成功。
    2025-11-14 19:12:06
    911
    html如何消息推送_HTML消息推送（WebSocket/Service Worker）实现方法 使用WebSocket、SSE和ServiceWorker可实现实时消息更新。首先，WebSocket通过全双工通信实现客户端与服务器双向实时交互，适用于聊天、通知等高频场景；其次，SSE基于HTTP流实现服务端单向推送，适合数据监控等无需频繁客户端请求的场景；最后，结合ServiceWorker与PushAPI可在后台及离线状态下接收系统级通知，提升用户体验。
    2025-11-14 19:09:44
    684
    html如何横向对齐_HTML元素水平对齐（margin/auto/flex）方法 使用margin:auto可使固定宽度块级元素水平居中；2.text-align:center能对齐内联或行内块元素；3.Flexbox通过justify-content实现灵活居中，适合现代布局。
    2025-11-14 18:56:03
    632
    在线HTML编辑器手机版 HTML编辑器手机版运行入口 HTML编辑器手机版可通过https://www.hellobi.com/codesandbox-mobile访问，支持手机浏览器直接运行HTML代码，无需下载应用。界面适配小屏幕，操作流畅，具备实时预览、语法高亮、错误提示功能，便于学习调试。支持HTML、CSS、JavaScript同步编辑，可创建多文件项目并分类保存，支持导出ZIP和链接分享，便于备份与协作。基于云端编译，运行不依赖手机性能，加载快，无需注册即可使用，自动保存编辑记录，节省存储且适应弱网环境，适合移动端前端开发与教学场景。
    2025-11-14 18:55:36
    597
    Mac Dock区如何放HTML模板一键新建页面？ 使用Automator创建快速操作，通过AppleScript复制HTML模板并保存为新文件，可将服务添加至Dock；2.直接将HTML模板文件拖入Dock，点击后用文本编辑器打开并另存为新页面；3.编写Shell脚本自动复制模板并用指定应用打开，再通过Automator封装为应用程序放入Dock。三种方法均可实现从Dock一键新建HTML页面。
    2025-11-14 18:53:32
    172
    相关专题
    更多>
    热门推荐
    开源免费商场系统广告
    热门教程
    更多>
    相关推荐
    热门推荐
    最新课程
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
    php中文网：公益在线php培训，帮助PHP学习者快速成长！
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送
    PHP中文网APP
    随时随地碎片化学习

    Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部