在 CSS 中,width 和 height 指的是内容区域的宽度和高度

增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。

假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。

如果希望这个元素框达到 100 个像素,就需要将内容的宽度设置为 70 像素,请看下图:

可以按照上、右、下、左的顺序分别设置各边的内边距,各边均可以使用不同的单位或百分比值:

可以为元素的内边距设置百分数值。

百分数值是相对于其父元素的 width 计算的,这一点与外边距一样

所以,如果父元素的 width 改变,它们也会改变。

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 设置元素的上边框的宽度。

CSS 框模型概述的更多相关文章

  1. CSS框模型(框模型概述、内边距、边框、外边距、外边距合并)

    CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景. ...

  2. CSS 框模型

    CSS 框模型 CSS 框模型概述 CSS 内边距 CSS 边框 CSS 外边距 CSS 外边距合并 一,CSS 框模型 (Box Model) 规定元素框处理元素内容.内边距.边框 和 外边距 的方 ...

  3. CSS 盒子模型概述

    一.简介   CSS 盒子模型(元素框)由元素内容(content).内边距(padding).边框(border).外边距(margin)组成.     盒子模型,最里面的部分是实际内容:直接包围内 ...

  4. CSS 框模型——规定了元素框处理元素内容、内边距、边框和外边距的方式

    转自:http://www.w3school.com.cn/css/css_boxmodel.asp 要知道在父元素:float, rel, abs位置情况下,box模型的变换情况,请见:http:/ ...

  5. CSS学习总结2:CSS框模型

    1.CSS框模型概述 CSS框模型规定了元素框处理元素内容.内边框.边框和外边框的方式. 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外 ...

  6. CSS 框模型( Box module )

    框和布局 在 KB005: CSS 层叠 中已经介绍了 CSS 的重要之处.CSS 可以说是页面表现的基础, CSS 可以控制布局,控制元素的渲染. 布局是讲在电影画面构图中,对环境的布置.人物地位的 ...

  7. KB006: CSS 框模型( Box module )

    框和布局 在 KB005: CSS 层叠 中已经介绍了 CSS 的重要之处.CSS 可以说是页面表现的基础, CSS 可以控制布局,控制元素的渲染. 布局是讲在电影画面构图中,对环境的布置.人物地位的 ...

  8. CSS框模型:一切皆为框 — 从行框说起

    一 行框 看图说话 css 行框 各部分详解 上图代表了框模型中的行框.line-height 属性设置行间的距离(行高).该属性会影响行框的布局.在应用到一个块级元素时,它定义了该元素中基线之间的最 ...

  9. CSS| 框模型-定位及相關屬性

    CSS 定位 (Positioning) 属性允许你对元素进行定位. CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多 ...

随机推荐

  1. angularjs file upload插件使用总结

    之前由于项目需要,决定使用angularjs做前端开发,在前两个项目中都有文件上传的功能,因为是刚接触angularjs,所以对一些模块和模块间的依赖不是很了解.都是由其他大神搭好框架,我只做些简单的 ...

  2. KbmMemTable的简单应用(增删改查示例)

    //kbmMemTable unit Unit1;   interface   uses   Windows, Messages, SysUtils, Variants, Classes, Graph ...

  3. GridView行中按钮的使用

    转载自:http://blog.csdn.net/hongdi/article/details/6455947 GridView行中按钮的使用 在web项目的过程中,特别是开发ASP.NET应用程序, ...

  4. 十二 Django框架,自定义分页

    自定义分页模块 #!/usr/bin/env python #coding:utf-8 from django.utils.safestring import mark_safe #封装分页类模块 c ...

  5. codeforces 622A A. Infinite Sequence (二分)

    A. Infinite Sequence time limit per test 1 second memory limit per test 256 megabytes input standard ...

  6. 查看字符串的编码chardet

    The Universal Character Encoding Detector chardet.detect("str") 返回:{‘confidence’:1.0,'enco ...

  7. PPAS数据库备份与恢复

    PPAS数据库备份不同于普通的Postgresql数据库的备份,因为PPAS数据库是兼容Oracle数据库的,所以会涉及到同义词.包.存储过程等,这个时候用Postgresql社区的备份与恢复工具时, ...

  8. Skype SILK codec overview

    最近简单看了一下Skype SILK codec 算法, 基本原理和流程大体明白了, 以后有时间再仔细研究一下细节,今天就简单说说. SILK Codec是一个语音和音频编解码算法, 对于音频带宽.网 ...

  9. A唐纳德先生和假骰子(华师网络赛)

    Time limit per test: 1.0 seconds Memory limit: 256 megabytes 在进行某些桌游,例如 UNO 或者麻将的时候,常常会需要随机决定从谁开始.骰子 ...

  10. ACM学习历程——ZOJ 3822 Domination (2014牡丹江区域赛 D题)(概率,数学递推)

    Description Edward is the headmaster of Marjar University. He is enthusiastic about chess and often ...