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. 解决IP地址被占用问题

    问题背景: 在公司一直有同事在抱怨IP地址总是被占用的问题,我决定用技术解决这个问题 解决方案: 1 最开始想在防火墙里面做IP和mac地址绑定,做了几个之后,还是有同事在说IP被占用,后来 分析了一 ...

  2. HTML 5 JavaScript初步 编译运行.doc

    编译运行 解释运行 JavaScript:只有一种变量类型,var.数据类型:整型,小数,字符串,布尔型 1.如何把数值型字符串变成数字型: parseInt("字符串")——把字 ...

  3. 学习java的视频资源(尚学堂)(比较老旧,但是还是挺好用)

    本人新手,转入IT,一开始在学校的时候看过尚学堂 马士兵讲过的java基础视频教程,这次深入学习呢,就从百度云盘找了一整套的视频资源.之后越深入的学习呢,发现这些视频资源VeryCD上都发布了,地址 ...

  4. 接触CrackMe 第一个

    今天刚接触这个 做了一个简单的. 用Onlydbg加载之后,对GetDlgItemTextA函数下断点,因为程序是在控件上获取数据的. Register输入Name和Serial点击Ok之后,断点响应 ...

  5. hdu 1908

    题意:一个人有一个代号K和一个优先等级P,一共有4种操作,0:结束,1:新建一个人,代号为K,优先等级为P,2:输出优先等级最大的人的代码,并删除该人,3:输出优先等级最小的人的代码,并删除该人. 用 ...

  6. 初学swift笔记 函数(六)

    import Foundation /* func 函数名 (参数名:参数类型) { } func 函数名 (参数名:参数类型) ->Void{ } func 函数名 (参数名:参数类型) -& ...

  7. 浅析C++内存分配与释放操作过程——三种方式可以分配内存new operator, operator new,placement new

    引言:C++中总共有三种方式可以分配内存,new operator, operator new,placement new. 一,new operator 这就是我们最常使用的 new 操作符.查看汇 ...

  8. Java - 字符串和Unicode互转 - 解析小米pm.min.js

    小米JS地址: http://p.www.xiaomi.com/zt/20130313/huodong/pm.min.js 上面这个JS是小米抢手机页面的代码.和抢手机有直接关联.. 虽然我3次都没抢 ...

  9. 04737_C++程序设计_第3章_函数和函数模板

    例3.1 传对象不会改变原来对象数据成员值的例子. #define _SCL_SECURE_NO_WARNINGS #include <iostream> #include <str ...

  10. UITableView进阶,cell刷新,界面返回 保持所选cell

    1.cell 刷新 NSIndexPath *indexPath_1=[NSIndexPath indexPathForRow:1 inSection:0]; NSArray *indexArray= ...