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. internet信息服务(iis)无法删除的解决方法

    internet信息服务(iis)无法删除的解决方法: 1.进入控制面板: 2.然后点击添加删除程序: 3.接着点击“添加/删除windows组件”: 4.点击“internet信息服务(iis)”, ...

  2. java如何调用对方http接口(II)

    java如何调用接口 在实际开发过程中,我们经常需要调用对方提供的接口或测试自己写的接口是否合适,所以,问题来了,java如何调用接口?很多项目都会封装规定好本身项目的接口规范,所以大多数需要去调用对 ...

  3. IO流----操作文件的9种方法代码实现

    IO流----操作文件的9种方法代码实现: 1:使用字节流读写数据: 四种方式: method1:          每次读写一个字节,边读边写: /* * 复制文本文件. * * 数据源:从哪里来 ...

  4. Vertica系列:性能优化

    Vertica 性能非常好, 平时基本不会碰到性能问题, 即使碰到, 优化也很容易, 而且效果往往会很好. ======================优化工具==================== ...

  5. UML图的使用

    UML(Unified Modeling Language)中文统一建模语言,是一种开放的方法,用于说明.可视化.构建和编写一个正在开发的.面向对象的.软件密集系统的制品的开放方法. 类之间的关系 在 ...

  6. ASP.NET Web API 2 之文件下载

    Ø  前言 目前 ASP.NET Web API 的应用非常广泛,主要承载着服务端与客户端的数据传输与处理,如果需要使用 Web API 实现文件下载,该 实现呢,其实也是比较简单,以下示例用于下载安 ...

  7. Hero Patterns - 聚合各种 SVG 背景纹理素材的网站

    Hero Patterns 是一个聚合了各种 SVG 背景纹理素材的网站,提供的多样的素材可以给你的网站带去特色. SVG 是一种分辨率无关的图形(矢量图形).这意味着它在任何类型的屏幕都不会遭受任何 ...

  8. 对div的操作

    链接:https://blog.csdn.net/wide288/article/details/34116495 判断DIV的内容改变的方法 近日,在帮朋友写一段小程序的时候,用到了iframe,在 ...

  9. lua与C/C++交互概要

    转 http://blog.csdn.net/wildfireli/article/details/22307635 Lua生来就是为了和C交互的,因此使用C扩展Lua或者将Lua嵌入到C当中都是非常 ...

  10. luogu P4183 [USACO18JAN]Cow at Large P

    传送门 首先考虑N^2做法,每次从一个点出发,如果到达一个点,然后到达这个点的时间\(\le\)离这个点最近的叶子距离\(di_x\),那么答案+1,否则继续找点 这个暴力很不好优化.可以这样认为,如 ...