Margin(外边距) - 清除边框外的区域，外边距是透明的。/*上 右 下 左*/ 上 左右 下 /*上下 左右*/ 四方 /
Border(边框) - 围绕在内边距和内容外的边框.      可以用来画图形
Padding(内边距) - 清除内容周围的区域，内边距是透明的。与content共用背景颜色
Content(内容) - 盒子的内容，显示文本和图像。
总结:
标签块级元素设置宽度和高度属性时，写内容的区域--你只是设置内容区域（content）的宽度和高度
总元素的最终宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
总元素的最终高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

web@css盒模型详解的更多相关文章

  1. 2017年总结的前端文章——CSS盒模型详解

    CSS的盒模型是CSS的基础,同时也是难点,这个问题经常在面试中会被问到,属于经典问题了.很多博客里讲得也很模糊不清,于是,我在这里重新整理一下. 可以认为每个html标签都是一个方块,然后这个方块又 ...

  2. CSS盒模型详解（图文教程）

    本文最初发表于博客园,并在GitHub上持续更新.以下是正文. 盒子模型 前言 盒子模型,英文即box model.无论是div.span.还是a都是盒子. 但是,图片.表单元素一律看作是文本,它们并 ...

  3. css 06-CSS盒模型详解

    06-CSS盒模型详解 #盒子模型 #前言 盒子模型,英文即box model.无论是div.span.还是a都是盒子. 但是,图片.表单元素一律看作是文本,它们并不是盒子.这个很好理解,比如说,一张 ...

  4. 第94天：CSS3 盒模型详解

    CSS3盒模型详解 盒模型设定为border-box时 width = border + padding + content 盒模型设定为content-box时 width = content所谓定 ...

  5. CSS系列 (04)：盒模型详解

    盒模型 CSS盒模型分成W3C标准盒模型和IE模型 W3C标准盒模型(默认):box-sizing: content-box padding和border都会撑开盒子,改变盒子的宽度高度 总宽度:wi ...

  6. css盒子模型详解一

    什么是CSS的盒子模式呢?为什么叫它是盒子?先说说我们在网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属 ...

  7. 详解CSS盒模型（转）

    详解CSS盒模型   阅读目录 一些基本概念 盒模型 原文地址:http://luopq.com/2015/10/26/CSS-Box-Model/ 本文主要是学习CSS盒模型的笔记,总结了一些基本概 ...

  8. Css盒模型属性详解（margin和padding）

    Css盒模型属性详解(margin和padding) 大家好,我是逆战班的一名学员,今天我来给大家分享一下关于盒模型的知识! 关于盒模型的属性详解及用法 盒模型基本属性有两个:padding和marg ...

  9. 详解CSS盒模型

    原文地址:http://luopq.com/2015/10/26/CSS-Box-Model/ 本文主要是学习CSS盒模型的笔记,总结了一些基本概念,知识点和细节. 一些基本概念 HTML的大多数元素 ...

随机推荐

  1. MySQL mysqldump与source导入慢的解决方法

    Jquery中文网 >  数据库  >  mysql  >  正文 MySQL mysqldump与source导入慢的解决方法 MySQL mysqldump与source导入慢的 ...

  2. [leetcode-108，109] 将有序数组转换为二叉搜索树

    109. 有序链表转换二叉搜索树 Given a singly linked list where elements are sorted in ascending order, convert it ...

  3. Storm安装部署

    1.从官网下载安装包,并通过Xftp5上传到机器集群上 下载apache-storm-1.2.1.tar.gz 版本,并通过Xftp5上传到hadoop机器集群的第一个节点node1上的/opt/up ...

  4. python之所以强大很大一部分原因在于他众多的取之不尽的库

    GUI 的 自动任务用这个pyautogui库,web 页面的用 selenium + webdriver 同类型的还有 sikuli ,低配版 按键精灵 本教程译自大神Al Sweigart的PyA ...

  5. 如何使用Cygwin在Windows上运行OpenSSH SSHD服务器

    记录几款非常有趣, 但不怎么耳熟的软件: Cygwin 是可以安装 OpenSSH server 和 client 的, Mosh 也可以, 这对于 Linux 用户而言就非常方便了. 如何使用Cyg ...

  6. 安装Rational Rose后提示java.lang.ClassNotFoundException

    1. 在运行中输入regedit回车,打开注册表编辑器2. 搜索 TrustedClasspath [REG_SZ] ,因为64位和32位不一样. 4.添加值c:\windows\java\trust ...

  7. 二、linux IO 编程---系统调用和POSIX标准和标准IO

    2.1 系统调用 2.1.1 概念 所谓系统调用(system call)是指曹错系统提供给用户程序的一组“特殊”接口,用户程序可以通过这组“特殊”接口来获得操作系统内核提供的特殊服务. 应用程序可以 ...

  8. 多态（upcast）减少分支判断 以及 多态继承设计、具体类型判断。

    Influenced by <java 八荣八耻>,翻了下<java编程思想> 印象中多态产生的条件:1.子类继承父类 2.父类[指针]指向子类 3.父类引用调用重写(@Ove ...

  9. python 中： lambda

    lambda 定义了一个匿名函数,是代码更简洁 lambda x:x+1和def g(x): return x+1是相同的哦. python 中的map,filter, reduce 函数为序列内置函 ...

  10. linux下mysql 配置

    su root 加环境变量 在文件末尾加上如下两行代码 PATH=/usr/local/webserver/php/bin:$PATHexport PATH # /etc/profile 保存,重启 ...