0

0

后端码农谈前端(CSS篇)第六课:盒子模型_html/css_WEB-ITnose

php中文网

php中文网

发布时间:2016-06-24 11:47:27

|

1035人浏览过

|

来源于php中文网

原创

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

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

一、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 设置元素的上边框的样式。

    属性值:

    立即学习前端免费学习笔记(深入)”;

    Uni-CourseHelper
    Uni-CourseHelper

    私人AI助教,高效学习工具

    下载
  • 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速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

    下载

    本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

    热门AI工具

    更多
    DeepSeek
    DeepSeek

    幻方量化公司旗下的开源大模型平台

    豆包大模型
    豆包大模型

    字节跳动自主研发的一系列大型语言模型

    通义千问
    通义千问

    阿里巴巴推出的全能AI助手

    腾讯元宝
    腾讯元宝

    腾讯混元平台推出的AI助手

    文心一言
    文心一言

    文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

    讯飞写作
    讯飞写作

    基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

    即梦AI
    即梦AI

    一站式AI创作平台,免费AI图片和视频生成。

    ChatGPT
    ChatGPT

    最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

    相关专题

    更多
    PHP高性能API设计与Laravel服务架构实践
    PHP高性能API设计与Laravel服务架构实践

    本专题围绕 PHP 在现代 Web 后端开发中的高性能实践展开,重点讲解基于 Laravel 框架构建可扩展 API 服务的核心方法。内容涵盖路由与中间件机制、服务容器与依赖注入、接口版本管理、缓存策略设计以及队列异步处理方案。同时结合高并发场景,深入分析性能瓶颈定位与优化思路,帮助开发者构建稳定、高效、易维护的 PHP 后端服务体系。

    5

    2026.03.04

    AI安装教程大全
    AI安装教程大全

    2026最全AI工具安装教程专题:包含各版本AI绘图、AI视频、智能办公软件的本地化部署手册。全篇零基础友好,附带最新模型下载地址、一键安装脚本及常见报错修复方案。每日更新,收藏这一篇就够了,让AI安装不再报错!

    12

    2026.03.04

    Swift iOS架构设计与MVVM模式实战
    Swift iOS架构设计与MVVM模式实战

    本专题聚焦 Swift 在 iOS 应用架构设计中的实践,系统讲解 MVVM 模式的核心思想、数据绑定机制、模块拆分策略以及组件化开发方法。内容涵盖网络层封装、状态管理、依赖注入与性能优化技巧。通过完整项目案例,帮助开发者构建结构清晰、可维护性强的 iOS 应用架构体系。

    33

    2026.03.03

    C++高性能网络编程与Reactor模型实践
    C++高性能网络编程与Reactor模型实践

    本专题围绕 C++ 在高性能网络服务开发中的应用展开,深入讲解 Socket 编程、多路复用机制、Reactor 模型设计原理以及线程池协作策略。内容涵盖 epoll 实现机制、内存管理优化、连接管理策略与高并发场景下的性能调优方法。通过构建高并发网络服务器实战案例,帮助开发者掌握 C++ 在底层系统与网络通信领域的核心技术。

    25

    2026.03.03

    Golang 测试体系与代码质量保障:工程级可靠性建设
    Golang 测试体系与代码质量保障:工程级可靠性建设

    Go语言测试体系与代码质量保障聚焦于构建工程级可靠性系统。本专题深入解析Go的测试工具链(如go test)、单元测试、集成测试及端到端测试实践,结合代码覆盖率分析、静态代码扫描(如go vet)和动态分析工具,建立全链路质量监控机制。通过自动化测试框架、持续集成(CI)流水线配置及代码审查规范,实现测试用例管理、缺陷追踪与质量门禁控制,确保代码健壮性与可维护性,为高可靠性工程系统提供质量保障。

    77

    2026.02.28

    Golang 工程化架构设计:可维护与可演进系统构建
    Golang 工程化架构设计:可维护与可演进系统构建

    Go语言工程化架构设计专注于构建高可维护性、可演进的企业级系统。本专题深入探讨Go项目的目录结构设计、模块划分、依赖管理等核心架构原则,涵盖微服务架构、领域驱动设计(DDD)在Go中的实践应用。通过实战案例解析接口抽象、错误处理、配置管理、日志监控等关键工程化技术,帮助开发者掌握构建稳定、可扩展Go应用的最佳实践方法。

    60

    2026.02.28

    Golang 性能分析与运行时机制:构建高性能程序
    Golang 性能分析与运行时机制:构建高性能程序

    Go语言以其高效的并发模型和优异的性能表现广泛应用于高并发、高性能场景。其运行时机制包括 Goroutine 调度、内存管理、垃圾回收等方面,深入理解这些机制有助于编写更高效稳定的程序。本专题将系统讲解 Golang 的性能分析工具使用、常见性能瓶颈定位及优化策略,并结合实际案例剖析 Go 程序的运行时行为,帮助开发者掌握构建高性能应用的关键技能。

    48

    2026.02.28

    Golang 并发编程模型与工程实践:从语言特性到系统性能
    Golang 并发编程模型与工程实践:从语言特性到系统性能

    本专题系统讲解 Golang 并发编程模型,从语言级特性出发,深入理解 goroutine、channel 与调度机制。结合工程实践,分析并发设计模式、性能瓶颈与资源控制策略,帮助将并发能力有效转化为稳定、可扩展的系统性能优势。

    26

    2026.02.27

    Golang 高级特性与最佳实践:提升代码艺术
    Golang 高级特性与最佳实践:提升代码艺术

    本专题深入剖析 Golang 的高级特性与工程级最佳实践,涵盖并发模型、内存管理、接口设计与错误处理策略。通过真实场景与代码对比,引导从“可运行”走向“高质量”,帮助构建高性能、可扩展、易维护的优雅 Go 代码体系。

    20

    2026.02.27

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送

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