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

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

一、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. flash 定义二维数组

      一种二维数组的定义方法   //假设二维数组为 [5][7]var  xn:Number = 5;var  yn:Number = 7; //定义一数值变量var  temp:Number = 0; ...

    2. ORA-00060:等待资源时检测到死锁的一种处理方法

      先执行脚本: SELECT p.sipid, a.serial#, c.object_name, b.session_id, b.oracle_username, b.os_user_name FRO ...

    3. 用sql取出来的list需要处理成map的两种情况

      1. 原生sql: select a.id,a.name from a SQLQuery sqlQuery=this.getSession().createSQLQuery(sb.toString() ...

    4. Software Testing hw1

      I still remember the error which I made in my java project last year. I spent a whole night solving  ...

    5. JAVA学习博客---2015-7

      @Updata 2015.7.17  开始熟悉API.WPS首字母自动大写,有的没有加#编号的,其实方法首字母不是大写例如Char charAt 实际上是char charAt.当然骆驼写法charA ...

    6. centos 后台执行C#控制台程序

      1. nohup nohup 无疑是我们首先想到的办法.顾名思义,nohup 的用途就是让提交的命令忽略 hangup 信号.让我们先来看一下 nohup 的帮助信息: NOHUP() User Co ...

    7. 计划参照mysql-proxy编写mssql-proxy

      目前使用haproxy做了mssql多个读库的负载均衡,在生产环境中运行得不错. 不过,这个方案有缺点:客户端需要选择是使用读库,还是写库.这样还是不够方便,如果能够实现自动路由就更好了,即让hapr ...

    8. 【读书笔记】javascript 继承

      在JavaScript中继承不像C#那么直接,C#中子类继承父类之后马上获得了父类的属性和方法,但JavaScript需要分步进行. 让Brid 继承 Animal,并扩展自己fly的方法. func ...

    9. Nim教程【九】

      向关注这个系列的朋友们,道一声:久违了! 它并没有被我阉掉,他一定会得善终的,请各位不要灰心 Set集合类型 为了在特殊场景下提高程序的性能设置了Set类型,同时也是为了保证性能,所以Set只能容纳有 ...

    10. Hello Mybatis 04 使用spring-mybatis

      顺着上一篇,这里介绍下spring-mybatis的配置. 我们使用mybatis去操作数据库的时候,每次都要不停地openSession,closeSession好烦躁哇--这样工作哪里有效率可言! ...