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. HDU 1892(书架统计 二维树状数组)

    题意是在二维平面上在一些位置上进行数据的增删改查操作,使用树状数组(了解树状数组点这里) 原来的树状数组在求区间和时是 sum( x, y ) = getsum( y ) - getsum( x - ...

  2. json 模块 与 pickle 模块

    1 import json 3 dic={'name':'alvin','age':23,'sex':'male'} 4 print(type(dic))#<class 'dict'> 6 ...

  3. zookeeper的安装与使用

    zookeeper的安装与使用: Zookeeper简介 1.可以作为集群的管理工具使用. 2.可以集中管理配置文件. Zookeeper是一个高效的分布式协调服务,可以提供配置信息管理.命名.分布式 ...

  4. DBUtils数据库连接池

    DBUtils pip install DBUtils 模式一: 为每个线程创建一个连接.(内部是通过threading.local实现的) 模式二: 创建一定个数的连接,所有线程都来连接池中获取.( ...

  5. 使用Verilog HDL语言注意事项

    1.wire和reg区别,输入输出是wire型,表示硬件线的连接,要在always模块里被赋值需要中间reg型变量,两者通过: assign 输入/输出=reg型中间变量 2.case的default ...

  6. ES5新增内容

    一.数组API实际开发中forEach和map会多一些=>是es6语法中的arrow function举例:(x) => x + 6相当于function(x){return x + 6; ...

  7. luogu P2470 [SCOI2007]压缩

    传送门 dalao们怎么状态都设的两维以上啊?qwq 完全可以一维状态的说 设\(f[i]\)为前缀i的答案,转移就枚举从前面哪里转移过来\(f[i]=min(f[j-1]+w(j,i))(j\in ...

  8. 关于ajax及相关数据传输问题

    之前整理的ajax相关应用笔记,一直没有时间整理,今天突然翻到特此将初稿大概的整理了一下,可能有点乱,欢迎指出不足之处. jQuery的ajax请求:complete函数一般无论服务器有无数据返回都会 ...

  9. 登录mysql时的一些命令

    清屏: cls 只要输入cls然后回车运行命令,可以清屏. 查看版本号: mysql -V 注意:V一定要大写,如果不大写就错了... 登录: mysql -u用户名 -p密码 -P端口号 -h数据库 ...

  10. lambda创建匿名函数

    1)print map(lambda x: x + 1, [y for y in range(10)]) 输出:[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]map(lambda &l ...