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

图片来源:w3school.com.cn

元素(element)是一个html文档的实际内容区域,依次由内边距(padding)、边框(border)、外边距(margin)包围。

注:

  1. 背景应用于元素和内边距、边框组成的区域。
  2. 内边距、边框、外边距是可选,默认值为0。

内边距(padding)

内边距位于边框和内容之间的空白区域,CSS中额padding属性可以定义内边距区域。

p {padding: 5px;}

元素p的各边都有5px的内边距,padding属性的属性值可以为长度值和百分比,但不能为负数。

我们也可以按照上右下左的顺序为各边设置内边距

p {padding: 5px 0.25em 2ex 20%;}

CSS 内边距属性

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

边框(border)

边框是包围着元素内容和内边距的一条或者多条,我们可以用border属性定义边框的样式、宽度、颜色。

可以为边框属性定义不同的属性值,可以得到各式各样的边框样式。

CSS 边框属性

属性 描述
border 简写属性,用于把针对四个边的属性设置在一个声明。
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 设置元素的上边框的宽度。

外边距(margin)

外边距是包围边框的空白区域,可以用margin属性来定义外边距的样式,margin属性可以接受长度、百分比、负数等属性值。

所以,外边距是一片空白区域。

和内边距、边框一样,可以根据上右下左的顺序分别定义不同的属性值

p {margin: 0.5em 1cm 20px 10%;}

有时会输入一些重复的值,这时就会用到属性值复制的功能了,可以精简代码,减少没必要的重复代码。

p {margin: 0.5em 1em 0.5em 1em;}

等价于

p {margin: 0.5em 1em;}

CSS 定义了一些规则,允许为外边距指定少于 4 个值。规则如下:

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

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

CSS 外边距属性

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

外边距合并

当两个垂直外边距(上下外边距)相遇时,它们将合并成一个外边距,合并后的外边距的高度等于两个外边距高度值较大的那个。

CSS自学笔记(6):CSS的模型的更多相关文章

  1. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  2. CSS自学笔记(10):CSS3盒子模型

    CSS3为CSS技术的升级版本.最新版本. 就CSS而言,它是一个模块,是一个庞大而又复杂的模块,但是在CSS3中,将这一个庞大的模块分解为一个个容易理解的同时又很精简的小模块,同时CSS3中又添加了 ...

  3. HTML+CSS学习笔记 (12) - CSS布局模型

    标签:HTML+CSS css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是 ...

  4. DIV+CSS学习笔记(CSS)

    css基础知识: css样式表的定义 css:(Cascading Style Sheets)层叠样式表: 分类及位置:内部样式-head区域style标签里面 外部样式-link调用 内联样式-标签 ...

  5. CSS学习笔记02 CSS选择器

    1.通配符选择器 通配符选择器用“*"号表示,是所有选择器中作用范围最广的,能匹配页面中所有的元素 /*设置当前页面中所有标签的颜色为红色*/ * { color: red; } 2.标签选 ...

  6. CSS学习笔记01 CSS简介

    1.CSS定义 CSS 指层叠样式表 (Cascading Style Sheets),是一种样式表语言,用来描述 HTML 或 XML(包括如 SVG.XHTML 之类的 XML 分支语言)文档的呈 ...

  7. HTML+CSS学习笔记 (11) - CSS盒模型

    元素分类 在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <di ...

  8. CSS学习笔记--Div+Css布局(div+span以及盒模型)

    1.DIV与SPAN 1.1简介 1.DIV和SPAN在整个HTML标记中,没有任何意义,他们的存在就是为了应用CSS样式 2.DIV和span的区别在与,span是内联元素,div是块级元素 内联元 ...

  9. CSS - 自学笔记

    2018-12-14 ----- 1 所有元素的锚点默认就是它的物理中心 2 改变锚点位置的方法: transform-origin: x-axis y-axis z-axis; 3 ps里在层级里选 ...

随机推荐

  1. c#操作sqlite

    一.添加选中dll引用如下图 二.下载一个sqlite建表建库工具sqlitedatabasebrowser如下图 三.使用sqlitedatabasebrowser建库建表 四.插入表数据如下图 四 ...

  2. phpstorm 设置多项目并存

    phpstorm 或 webstorm 设置多个项目可以并存: File -> settings -> Directories -> Add Content Root 中添加你当前的 ...

  3. Android_CodeWiki_04

    1.展开.收起状态栏      public static final void collapseStatusBar(Context ctx) { Object sbservice = ctx.get ...

  4. 05-3. 求a的连续和(15)

    输入两个整数a和n,a的范围是[0,9],n的范围是[1,8],求数列之和S = a+aa+aaa+...+aaa...a(n个a). 如a为2.n为8时输出的是2+22+222+...+222222 ...

  5. DELPHI 任务栏无EXE显示

    需要用到的一个函数: LONG SetWindowLong( HWND hWnd, int nIndex, LONG dwNewLong ); program Project; usesForms,  ...

  6. 从ASP.NET传递参数给水晶报表

    原文 http://www.cnblogs.com/insus/p/3281114.html 上次Insus.NET有简单写了一篇文章<Visual Studio 2012使用水晶报表Cryst ...

  7. java代码收藏:获取HttpServletRequest中某一前缀的参数

    public static Map getParametersStartingWith(ServletRequest request, String prefix) { Enumeration par ...

  8. perl 正则命名捕获

    #!/usr/bin/perl -w =pod 命名捕获--给匹配上的内容加上标签 捕获到的内容都会保存在%+散列中,这个散列的key为对应的标签: 方便之处就是利于程序扩展和阅读,不用繁琐的一个一个 ...

  9. mysql-bin.000001文件的来源及处理方法

    用ports安装了mysql以后,过一段时间发现/var空间不足了,查一下,会发现是mysql-bin.000001.mysql-bin.000002等文件占用了空间,那么这些文件是干吗的?这是数据库 ...

  10. 【Python】iiacm_filemaker ——简易的.cpp文件创建即初始化脚本,ACMer专用

    代码已全部重写,上次写的真是不忍直视…… 今天刚刚接触Python,本着学以致用的原则,就写了一个按照要求自动生成.cpp文件并初始化头文件的脚本. 确定你的linux中安装了Python,将下面的代 ...