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. Markdown Cheatsheet

    This is intended as a quick reference and showcase. For more complete info, see John Gruber's origin ...

  2. xml实体注入学习

    好久没学习技术了  很多东西都忘了  复习一下 测试代码 <?php $xml = file_get_contents("php://input"); $data = sim ...

  3. golang sort包使用

    https://studygolang.com/static/pkgdoc/pkg/sort.htm#StringSlice.Search package main import ( "fm ...

  4. 致备战noip2018的勇士

    戒骄戒躁,自律当先.稳扎稳打,颗粒归仓.目标高远,落实当下.无惧将来,无畏过往.愿你们承担一份荣耀,愿你们书写一段辉煌.——致备战noip2018的你们 ——退役学姐致gryz备战中的勇士 ——lpy ...

  5. eclipse配置文件乱码

    修改文件打开工具 安装文件编辑器插件 然后搜索

  6. 观察者模式--java

    写在前面 钩子函数.注册函数.回调函数,他们的概念其实是一样的. 观察者模式,又可以称之为发布-订阅模式,观察者,顾名思义,就是一个监听者,类似监听器的存在,一旦被观察/监听的目标发生的情况,就会被监 ...

  7. python初认识、基础数据类型以及 if 流程控制

    python初认识 CPU.内存.硬盘以及操作系统之间的关系 CPU:中央处理器,计算机的逻辑运算单元 硬盘:长期存储数据的地方,断电不会丢失 内存:位于CPU与硬盘之间,缓解高速CPU与低速硬盘之间 ...

  8. java操作数据库：增删改查

    不多bb了直接上. 工具:myeclipse 2016,mysql 5.7 目的:java操作数据库增删改查商品信息 test数据库的goods表 gid主键,自增 1.实体类Goods:封装数据库数 ...

  9. 默认约束（DEFAULT）

    默认值 当插入记录时,如果没有明确为字段赋值,则自动赋予默认值. mysql> CREATE TABLE tb8( -> id SMALLINT UNSIGNED AUTO_INCREME ...

  10. DWT在栅格数据嵌入不可见水印的应用

    1.1.1 嵌入水印 有意义的文字->二值图像->二值序列->置乱.加密->二值水印信息. 读取栅格数据,并进行M*M的分块处理,M为偶数.设分块区域,尺寸为偶数,满足DWT的 ...