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

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

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

    属性值:

  • 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:规定应该从父元素继承外边距。

    四、外边距合并:

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

  • 后端码农谈前端(CSS篇)第六课:盒子模型的更多相关文章

    1. 后端码农谈前端(CSS篇)第二课:CSS的5个来源

      0.浏览器默认样式 当你不为html元素设置任何样式时,显示在浏览器上的(比如:<b>元素会显示粗体.<p>元素有纵向margin.<h1>元素字号比<p&g ...

    2. 后端码农谈前端(CSS篇)第八课:继承与层叠

      一.继承 继承:所谓CSS样式继承,就是子元素应用父元素的规则声明.(由这一特性,可将CSS属性分为可继承属性和非可继承属性.)可继承属性:属性值可由父元素继承给子元素的属性称之为可继承属性. 哪些属 ...

    3. 后端码农谈前端(CSS篇)第七课:定位与浮动

      一.定位: 1.定位的理解 (1)相对定位 相对定位是一个非常容易掌握的概念.如果对一个元素进行相对定位,它将出现在它所在的位置上.然后,可以通过设置垂直或水平位置,让这个元素"相对于&qu ...

    4. 后端码农谈前端(CSS篇)第五课:CSS样式

      一.背景: CSS 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果. 1.背景色 可以使用 background-color 属性为元素设置背景色.这个属性接受任何合法的颜色值. 例如: ...

    5. 后端码农谈前端(CSS篇)第四课:选择器补充(伪类与伪元素)

      一.伪类: 属性 描述 :active 向被激活的元素添加样式. :focus 向拥有键盘输入焦点的元素添加样式. :hover 当鼠标悬浮在元素上方时,向元素添加样式. :link 向未被访问的链接 ...

    6. 后端码农谈前端(CSS篇)第三课:选择器

      一.选择器 1.ID选择器: 语法:首先,ID 选择器前面有一个 # 号 - 也称为棋盘号或井号.请看下面的规则: *#intro {font-weight:bold;} 与类选择器一样,ID 选择器 ...

    7. 后端码农谈前端(CSS篇)第一课:CSS概述

      一.从扮演浏览器开始 扮演浏览器是Head First图书中很有意义的一个环节.可作者忘记了告诉我们扮演浏览器的台本.我们从这里开始. 上图是webkit内核渲染html和css的流程图.从该图我们可 ...

    8. 后端码农谈前端(HTML篇)第三课:常见属性

      一.HTML全局属性 1.核心属性 属性 描述 id 设置元素的唯一 id. class 设置元素的一个或多个类名(引用样式表中的类). style 设置元素的行内样式(CSS内联样式). title ...

    9. 后端码农谈前端(HTML篇)第二课:常见元素

      一.根元素 <doctype> 定义文档类型. <html> 定义 HTML 文档. 二.元数据元素 <head> 定义关于文档的信息. <meta> ...

    随机推荐

    1. 安装EPEL源

      安装EPEL源 官方源直接安装 rpm -Uvh http://dl.fedoraproject.org/pub/epel/7/x86_64/e/epel-release-7-5.noarch.rpm ...

    2. 读《我是IT小小鸟》后有感

      我是一名大一新生,在下半学期开学时,我迎来新课程——<大学生职业生涯规划与就业指导 >.这是一门既新颖,又有许多就业知识和理论的学科.在课上,老师向我们推荐了一本书,名叫<我是IT小 ...

    3. 反射实现 AOP 动态代理模式(Spring AOP 的实现 原理)

      好长时间没有用过Spring了. 突然拿起书.我都发现自己对AOP都不熟悉了. 其实AOP的意思就是面向切面编程. OO注重的是我们解决问题的方法(封装成Method),而AOP注重的是许多解决解决问 ...

    4. 更高效地提高redis client多线程操作的并发吞吐设计

      Redis是一个非常高效的基于内存的NOSQL数据库,它提供非常高效的数据读写效能.在实际应用中往往是带宽和CLIENT库读写损耗过高导致无法更好地发挥出Redis更出色的能力.下面结合一些redis ...

    5. Vmware配置

      1.网络 四种连接模式的区别:http://www.cnblogs.com/awpatp/archive/2009/07/24/1530471.html 如果网卡使用Nat模式,则需要启动服务: VM ...

    6. Android下集成Paypal支付

      近期项目需要研究paypal支付,官网上的指导写的过于复杂,可能是老外的思维和中国人不一样吧.难得是发现下面这篇文章: http://www.androidhive.info/2015/02/andr ...

    7. Mockito自定义verify参数Matcher

      在TDD开发中,也许我们会遇见对一些重要的无返回值的行为测试,比如在用户的积分DB中增加用户的积分,这个行为对于我们的业务具有重要的价值,所以我们也希望能测试覆盖这部分业务价值.这个时候我们就得使用m ...

    8. [Unity3D入门]入门级游戏项目"坦克狙击手"更新

      [Unity3D入门]入门级游戏项目"坦克狙击手"更新 在上一篇中我分享了一个尚未完全写好的入门级unity3d项目"坦克狙击手". 本文介绍最新版的" ...

    9. 用CSS实现居中的方式

      直接放链接吧,最近大量时间放在看书上了,不想玩游戏,不想看电影,只想看书,早日做出自己的网站卖广告. CSS居中

    10. ios 设置亮度、声音;调用发短信、邮件、打电话

      一,设置亮度 [[UIScreen mainScreen] setBrightness:0.5];//0.0~1.0 二,设置声音 1,添加 MediaPlayer.framework 框架 2,在需 ...