notebooks
  • notebooks
  • _planning
    • 2022 OKR
    • basketball
    • swimming
  • communication
    • Dubbo
    • Kafka
    • Messaging
    • RPC
    • Thrift
  • computation
    • map-reduce
  • cs-basic-knowledge
    • computer-architecture
    • data-structure-and-algorithms
    • networks
    • os
  • devops
    • Docker
    • Linux
    • Prometheus
    • operations
    • security
    • trouble-shooting
  • distributed-knowledge
    • Zookeeper_CMD
    • distributed-system
  • game-engine
    • Unity
  • others
    • appium使用
  • protocols
    • http(s)协议
    • 官方链接
    • sip
  • storage
    • Elasticsearch
    • GuavaCache
    • MySQL
    • MySQL_CMD
    • NoSQL
    • Redis
    • Redis_CMD
  • system-design
    • system-design
  • tools
    • Git
    • IDEA
    • Mac
    • VScode
    • Vim
  • _working
    • doc-template
      • backend-design-review
      • correction-of-error
      • service-review
    • process
      • domain-backup
      • oncall
  • blogs
    • history
      • 8088/8086微处理器
      • 8088/8086指令系统
      • CSS-DOM
      • CSS定位
      • CSS工作原理
      • CSS控制背景
      • CSS浮动布局
      • CSS盒模型
      • Chrome开发者工具使用方法
      • DOM
      • Django Model模型层学习
      • Django-REST-framework Serializers学习
      • Django-REST-framework Views和ViewSets学习
      • Django View视图层学习
      • Gvim下Emmet安装及使用教程
      • HTTP协议简介
      • HashMap原理初探
      • JavaScript简史
      • JavaScript语法
      • Java内存模型和GC机制
      • Java基础——Lambda学习
      • Java基础——方法引用
      • Java基础——枚举类型
      • Java类加载机制
      • KMP算法
      • Kafka学习
      • Linux下用命令行编译Java程序
      • MathJax简介和基本用法
      • Python实现常见数据结构
      • Python装饰器总结
      • TCP协议的三次握手和四次挥手
      • Thrift学习
      • asyncio学习
      • markdown的常用语法
      • 修改hosts文件实现翻墙
      • 充实文档的内容
      • 关系数据库
      • 关系数据库标准语言SQL(一)
      • 关系数据库标准语言SQL(二)
      • 关系数据理论
      • 关系查询处理和查询优化
      • 内联元素和块级元素
      • 剑指offer算法题练习
      • 动态创建标记
      • 图形化用户界面
      • 在Eclipse中使用Maven构建Java Web项目
      • 增加微博秀遇到的一些问题
      • 处理机调度
      • 如何用github和hexo搭建个人博客
      • 存储管理
      • 存储系统的层次结构
      • 学习模仿lionhit网站首页的过程总结
      • 实用的GitHub小技巧
      • 并发控制
      • 循环与分支程序设计
      • 指令系统的设计
      • 指令级并行及其开发——硬件方法
      • 搭建自己的VPN服务器
      • 操作系统用户界面
      • 数据库安全性
      • 数据库完整性
      • 数据库恢复技术
      • 数据库绪论
      • 数据库编程
      • 数据库设计
      • 数据抽象
      • 文件系统
      • 文法和语言
      • 最佳实践
      • 案例研究:JavaScript图片库
      • 案例研究:图片库改进版
      • 汇编语言程序格式
      • 汇编语言程序设计基础知识
      • 流水线技术
      • 深度优先搜索和广度优先搜索
      • 牛客网——网易2017秋招编程题集合
      • 用JavaScript实现动画效果
      • 第一篇博客
      • 经典排序算法总结(Java实现)
      • 经典查找算法总结(Java实现)
      • 综合示例
      • 编译原理引论
      • 背包、队列和栈
      • 虚拟机安装Linux系统及常用软件
      • 计算机操作系统绪论
      • 计算机系统结构的基础知识
      • 设备管理
      • 设计模式之代理模式
      • 设计模式之单例模式
      • 设计模式之工厂模式
      • 设计模式之策略模式
      • 设计模式之观察者模式
      • 词法分析
      • 进程管理
      • 闭包
      • 阻止Google自动跳转到香港服务器的方法
      • 项目部署过程
  • programming-language
    • C#
      • C#
    • C&C++
      • C
    • C&C++
      • C++
    • Java
      • GoogleGuice
    • Java
      • JVM
    • Java
      • Java
    • Java
      • Maven
    • Java
      • Mybatis
    • Java
      • Spring知识
    • Java
      • SpringBoot
    • Java
      • Tomcat
    • Python
      • Python
    • Shell
      • Shell
  • wheels
    • dcc
      • 产品调研
      • 方案设计
    • red-envelope
      • 方案设计
    • short-url
      • 短链接服务
    • sso
      • 方案设计
Powered by GitBook
On this page
  • CSS盒模型概述
  • CSS内边距
  • CSS边框
  • CSS外边距
  • CSS外边距合并
  • 示例
  1. blogs
  2. history

CSS盒模型

PreviousCSS浮动布局NextChrome开发者工具使用方法

Last updated 3 years ago

CSS盒模型(Box Model)规定了元素框处理元素内容、内边距、边框和外边距的方式。

CSS盒模型概述

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

注意:背景应用于由内容和内边距、边框组成的区域。不包括外边距区域。

内边距、边框和外边距都是可选的,默认值是零。在 CSS 中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。

例如: 如下代码设置盒模型:

#box{
	width: 70px;
	margin: 10px;
	padding: 5px;
}

各边距如下:

CSS内边距

元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。CSS padding 属性定义元素边框与元素内容之间的空白区域。

CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值,但不允许使用负值。

  • padding: 10px;内边距为10像素

  • padding: 10%;内边距是父元素width的10%

CSS内边距属性

  • padding:简写属性。作用是在一个声明中设置元素的所有内边距属性

  • padding-bottom:设置元素的下内边距

  • padding-left:设置元素的左内边距

  • padding-right:设置元素的右内边距

  • padding-top:设置元素的上内边距

CSS边框

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。每个边框有 3 个方面:宽度、样式,以及颜色。CSS border 属性允许你规定元素边框的样式、宽度和颜色。

CSS 规范指出,边框绘制在“元素的背景之上”。这很重要,因为有些边框是“间断的”(例如,点线边框或虚线框),元素的背景应当出现在边框的可见部分之间。

CSS边框属性

  • border:简写属性,用于把针对四个边的属性设置在一个声明(例如设置为10px solid red)

  • border-style:用于设置元素所有边框的样式,或者单独地为各边设置边框样式

  • border-width:简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度

  • border-color:简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色

  • border-bottom:简写属性,用于把下边框的所有属性设置到一个声明中

  • border-bottom-color:设置元素的下边框的颜色

  • border-bottom-style:设置元素的下边框的样式

  • border-bottom-width:设置元素的下边框的宽度

  • border-left:简写属性,用于把左边框的所有属性设置到一个声明中

  • border-left-color:设置元素的左边框的颜色

  • border-left-style:设置元素的左边框的样式

  • border-left-width:设置元素的左边框的宽度

  • border-right:简写属性,用于把右边框的所有属性设置到一个声明中

  • border-right-color:设置元素的右边框的颜色

  • border-right-style:设置元素的右边框的样式

  • border-right-width:设置元素的右边框的宽度

  • border-top:简写属性,用于把上边框的所有属性设置到一个声明中

  • border-top-color:设置元素的上边框的颜色

  • border-top-style:设置元素的上边框的样式

  • border-top-width:设置元素的上边框的宽度

注意:简写属性时同样遵循top-right-bottom-left顺序。

常见border-style属性值有

  • solid:实线边框

  • dotted:点线边框

  • dashed:虚线边框

  • double:双线边框

CSS外边距

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位、百分数值甚至负值。

  • margin: 10px;外边距为10像素

  • margin: 10%;外边距为父元素width的10%

  • margin: auto;

margin 的默认值是 0,所以如果没有为 margin 声明一个值,就不会出现外边距。但是,在实际中,浏览器对许多元素已经提供了预定的样式,外边距也不例外。例如,在支持 CSS 的浏览器中,外边距会在每个段落元素的上面和下面生成“空行”。因此,如果没有为 p 元素声明外边距,浏览器可能会自己应用一个外边距。当然,只要你特别作了声明,就会覆盖默认样式。

CSS外边距属性

  • margin:简写属性。在一个声明中设置所有外边距属性

  • margin-bottom:设置元素的下外边距

  • margin-left:设置元素的左外边距

  • margin-right:设置元素的右外边距

  • margin-top:设置元素的上外边距

margin简写规则

  • 如果缺少左外边距的值,则使用右外边距的值

  • 如果缺少下外边距的值,则使用上外边距的值

  • 如果缺少右外边距的值,则使用上外边距的值

注意,margin简写属性如果只设置左外边距,做法:margin: auto auto auto 10px;

利用margin属性实现盒模型居中:margin: 0 auto;

CSS外边距合并

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

注释:只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

示例

用CSS画三角形: 代码:

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>test</title>
		<style>
			#triangle1{
					width:0;
					height:0;
					border-top:100px solid red;
					border-right:100px solid blue;
					border-bottom:100px solid yellow;
					border-left:100px solid green;
			}
			#triangle2{
					width:0;
					height:0;
					border-top:100px solid white;
					border-right:100px solid white;
					border-bottom:100px solid yellow;
					border-left:100px solid white;

			}
		</style>
</head>
<body>
		<div id="triangle1"></div>
		<div id="triangle2"></div>
</body>
</html>

当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并

当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并

效果:

参考文档:

www.w3school.com.cn
CSS盒模型3
CSS盒模型1
CSS盒模型2
CSS盒模型4
CSS盒模型5