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. 用jquery的ajax方法获取return返回值的正确姿势

    如果jquery中,想要获取ajax的return返回值,必须注意两方面,ajax的同步异步问题,在ajax方法里面还是外面进行return返回值. 下面列举了三种写法,如果想成功获取到返回值,参考第 ...

  2. HDU 1115(求质量均匀分布的多边形重心 物理)

    题意是给一个 n 边形,给出沿逆时针方向分布的各顶点的坐标,求出 n 边形的重心. 求多边形重心的情况大致上有三种: 一.多边形的质量都分布在各顶点上,像是用轻杆连接成的多边形框,各顶点的坐标为Xi, ...

  3. SQL Server进阶（三）单表查询

    示例数据库 点我下载 一条完整的sql语句 select top | distinct 字段, 表达式, 函数, ... from 表表达式 where 筛选条件 group by 分组条件 havi ...

  4. 1、PHP入门二维数组与循环

    <?php $two=array(array(2,3),1=>array(1,2,3),2=>array(4,5,6)); echo $two[1][0];//输出1 echo $t ...

  5. Fetch诞生记

    Fetch作用? https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch Fetch API  提供了一个 Jav ...

  6. MySQL Out-of-Band 攻击

    概述 当涉及到MSSQL与Oracle时,Out-of-Band 注入是非常好的方式.但我注意到MySQL注入的情况并非如此,于是我准备以自己在SQL注入方面的经验做相关的研究.我们可以利用诸如loa ...

  7. .net DataTable序列化成Json

    /// <summary>/// DataTable序列化/// </summary>/// <param name="dt"></par ...

  8. springboo05-redis

    springboot中使用redis:(1).使用redis工具类手动操作缓存(2).使用cacheable注解到方法头,自动创建缓存数据 1.安装redis https://github.com/d ...

  9. for-each 格式

    public class D21LX { public static void main(String arge[]){ fish [] a1=new fish[3]; a1[0] = new fis ...

  10. HashMap中的TreeNode，红黑树源码分析

    在看HashMap的源码时候看到了TreeNode.因此需要对其进行一个了解.是一个红黑树.可以百度一下红黑树的数据结构.分析了下源码,还是比较枯燥的 红黑树的性质:本身是一个二叉查找树(所有左节点的 ...