我们通常设置的宽度和高度，是指盒子模型中内容（content）的宽度和高度。元素的高度，还要加上上下padding和上下border,元素整个盒子的高度还要加上上下margin；宽度类似计算。

　　注意：

  • 父子元素包含情况下的计算，父亲元素会把儿子元素的整个盒子（包括margin）的大小作为内容。
  • 外边距塌陷(margin collapse)，块元素的 top 与 bottom 外边距有时会合并（塌陷）为单个外边距（合并后最大的外边距），这样的现象称之为 外边距塌陷。
  • 一般我们给元素设置背景色不会包括margin和border。

一、普通盒子

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

.divcss

{

    width:300px;

    border:5px solid #F00;

    margin:10px;

    padding:5px;

}

</style>

</head>

<body>

<div class="divcss">

 我是盒子1

</div>

<div class="divcss">

我是盒子2

</div>

</body>

</html>

　　运行结果：

二、 父子盒子

　　父子div盒子，外层div定义padding,内层div定义margin

　　父亲元素会把儿子元素的整个盒子（包括margin）的大小作为内容

　　html代码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

*{

    margin:0;

    padding:0px;

    }

.divcss

{

    width:300px;

    border:5px solid #eee;

    margin:10px;

    padding:5px;

}

.divcss1

{

    margin:20px;

}

</style>

</head>

<body>

<div class="divcss">

 <div class="divcss1">

    我是盒子

</div>

</div> 

</body>

</html>

　　运行结果：

　　内层盒子：

　　

　　外层盒子：

　　

三、外边距塌陷盒子

　　块元素的 top 与 bottom 外边距有时会合并（塌陷）为单个外边距（合并后最大的外边距）

　　两个上下相邻的DIV,margin都设置了，会重叠，且取大的那个，例子中1个10，一个20，取20

　　html代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

*{

    margin:0;

    padding:0px;

    }

.divcss

{

    background-color:red;

    margin:10px;

}

.divcss1

{

    background-color:green;

    margin:20px;

}

</style>

</head>

<body>

<div class="divcss">

 我是盒子1

</div>

<div class="divcss1">

我是盒子2

</div>

</body>

</html>

　　运行结果:

　　第一个盒子

　　

　　第二个盒子：

　　Body盒子：

CSS 基础 例子 盒子模型及外边距塌陷的更多相关文章

  1. [19/06/06-星期四] CSS基础_盒子模型

    一.盒子模型(框模型.盒模型) CSS处理网页时,它认为每个元素都在一个不可见的矩形盒子里. 为什么想象成盒子模型?因为把所有元素想象成盒子,那么我们对网页的布局就相当于摆放盒子.我们只需要把相应的盒 ...

  2. CSS基础之盒子模型及浮动布局

    盒模型 谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是 内容(content).填充(padding).边框(border).边界(margin): 这些属性我们可以把它转移到我们日常生活中的盒子( ...

  3. CSS基础-7 盒子模型大小

    在盒子模型当中,有些元素是影响盒子大小的. 首先border就会影响盒子的大小. 其次padding也会影响盒子的大小. 例子: .one { width:100px; height:100px; b ...

  4. CSS学习摘要-盒子模型

    注:全文摘要自网络开发者网站,当然间隔也会整理一些思路和格式排版添加进去. CSS框模型(译者注:也被称为"盒模型")是网页布局的基础 --每个元素被表示为一个矩形的方框,框的内容 ...

  5. CSS学习系列1 - CSS中的盒子模型 box model

    css中有一个盒子模型的概念. 主要是用来告诉浏览器如何来计算页面元素的宽度和高度, 比如该元素的宽度/高度 是否包括内边距,边框,外边距.  盒子模型有一个属性box-sizing属性来说明是否包括 ...

  6. CSS中的盒子模型与 box-sizing 属性

    盒子模型是css中一个重要的概念,是开发网页必须要用的布局方法.盒子模型有两种,分别是标准 w3c 盒子模型和 ie 盒子模型. 标准 w3c 盒子模型:包括 magin(外边距).border(边框 ...

  7. 【CSS学习】--- 盒子模型

    一.前言:这篇只作为本人的笔记,以后慢慢再补充. 页面中的所有元素都可以被看作一个一个的“盒子”.这些盒子都包含了:内容(content).内边距(padding).边框(border)以及外边距(m ...

  8. CSS学习之盒子模型

    1. 前言 盒子模型,英文即box model.无论是div.span.还是a都是盒子. 但是,图片.表单元素一律看作是文本,它们并不是盒子.这个很好理解,比如说,一张图片里并不能放东西,它自己就是自 ...

  9. css的外边距合并或者外边距塌陷问题

    第一种情况: 已知两个宽和高均为100px,margin均为20px的div垂直排列,现象如下图所示: 当设置css1的margin-bottom:40px:或者css2的margin-top:40p ...

随机推荐

  1. 服装类Web原型制作分享——Rodd & Gunn

    Rodd & Gunn是国外知名的服装类品牌,服装种类繁多,有衣服.帽子.穿戴饰品等. 本原型由国产Mockplus(原型工具)和iDoc(智能标注,一键切图工具)提供. 网站原型以图文排版为 ...

  2. 20155312 2016-2017-2 《Java程序设计》第五周学习总结

    20155312 2016-2017-2 <Java程序设计>第五周学习总结 课堂笔记 十个基本类型 命令:ascii打印ascii值, od -tx1 Test.java用十六进制查看代 ...

  3. ubuntu安装vmare tools

    在vm中安装vm tools, 点击安装 vmware tools cp  VMwareTools-10.0.10-4301679.tar.gz  /home/YOURNAME/    //因为cd ...

  4. Graphviz 环境变量设置

    今天晚上解决了一个错误,如下:

  5. php-fpm超时时间设置request_terminate_timeout分析

    之前发现一个php配置之后关于返回500和502的问题,今天看到一个兄弟写的非常不错,记录一下.   php日志中有一条超时的日志,但是我request_terminate_timeout中设置的是0 ...

  6. 2019.01.19 codeforces896C.Willem, Chtholly and Seniorious（ODT）

    传送门 ODTODTODT出处(万恶之源) 题目简述: 区间赋值 区间加 区间所有数k次方和 区间第k小 思路:直接上ODTODTODT. 不会的点这里 代码: #include<bits/st ...

  7. 2018.10.26 poj3421X-factor Chains（数论+排列组合）

    传送门 排列组合入门题. 令X=p1a1p2a2..pkakX=p_1^{a_1}p_2^{a_2}..p_k^{a_k}X=p1a1​​p2a2​​..pkak​​ 那么答案1就等于∑i=1kai\ ...

  8. 防止网站被镜像，被iframe

    1.防止网站被镜像 现象:他人域名访问到的是我的网站解析的ip地址我的 解决方法: http.ini里可以这样写 "RewriteCond Host: !^www.web\.cn$ Rewr ...

  9. s4-3 CSMA

    载波侦听多路访问协议  CSMA:Carrier Sense Multiple Access 特点:"先听后发" 改进ALOHA协议的侦听/发送策略  分类 非持续式 持 ...

  10. 微信小程序之下拉加载和上拉刷新

    微信小程序下拉加载和上拉刷新两种实现方法 方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新 首先要在json文件里设置window属性       ...