【DIV + CSS 标准化页面布局实战】标准盒子模型与怪异盒子模型

一、盒子模型

盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。
W3C组织建议把网页上元素看成是一个个盒子。

盒模型主要定义四个区域：

内容content
内边距padding
边框border
外边距margin

转换到我们日常生活中，可以拿两个手机来对比

内容content=手机
内边距padding=盒子中的填充物
边框border=盒子的厚度
外边距margin=两个手机盒之间的距离

通常我们设置的宽和高是指"手机"content的宽高
一整个盒子还包含了填充物、盒子、盒子和盒子的距离

二、W3C盒模型

盒模型由内容content、填充padding、边框border、边界margin组成

对象实际宽度=左侧外边距+左侧边框+左侧内边距+宽度+右侧内边距+右侧边框+右侧外边距
在这里插入图片描述
接下来我们来实验一下

我们先简单的弄一个布局出来

<style>
    #box{
      width: 600px;
      height: 600px;
      background: pink;
      float: left;
    }
    #box>div:nth-child(1){
      width: 600px;
      height: 200px;
      background: blue;
      float: left;
    }
    #box>div:nth-child(2){
      width: 200px;
      height: 200px;
      background: red;
      float: left;
    }
    #box>div:nth-child(3){
      width: 200px;
      height: 200px;
      background: green;
      float: left;
    }
    #box>div:nth-child(4){
      width: 200px;
      height: 200px;
      background: yellow;
      float: left;
    }
    #box>div:nth-child(5){
      width: 600px;
      height: 200px;
      background: lemonchiffon;
      float: left;
    }
  </style>
</head>
<body>
  <div id="box">
    <div>顶部元素</div>
    <div>左侧元素</div>
    <div id="self">当前元素</div>
    <div>右侧元素</div>
    <div>底部元素</div>
  </div>
</body>

浏览器显示结果：
在这里插入图片描述
我们给当前元素加上外边距

margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;

上面的代码可以简写为

margin:10px;

如果四个值是不一样的

可以这样写

 margin:10px 20px 30px 40px;

它们分别代表上、右、下、左（顺时针哦）

还可以写三个代表上、左右、下

margin:10px 20px 30px;

可以写两个代表上下、左右

  margin:10px 20px;

margin还有一个作用：设置块状元素居中

  <!-- K可以设置块状元素居中 -->
  <div id="block"></div>

 body{
   background: lemonchiffon;
 }
 #block{
   width:1200px;
   background: yellow;
   border: 1px solid red;
   height: 40px;
   margin:20px auto;
 }

浏览器显示结果：
在这里插入图片描述
接下来我们来玩一玩外间距合并的问题

目前布局是这样

<div id="box1"></div>
<div id="box2"></div>

body{
  background: lemonchiffon;
}
#box1{
  width: 200px;
  background: rgb(128, 236, 137);
  height: 200px;
}
#box2{
  width:200px;
  background:yellow;
  height: 200px;
}

浏览器显示结果
在这里插入图片描述
当我们给第一个盒子加上底部边距的时候

在这里插入图片描述
这个时候我们如果给底部边距加上margin-top: 50px;
浏览器显示结果依旧那样，因为它以最大的那个边距为主

我们来试一试包含式外间距合并吧

<div id="father">
  <div id="son"></div>
</div>

 body{
   background: lemonchiffon;
 }
 #father{
   width: 500px;
   height: 200px;
   background: green;
 }
 #son{
   width: 200px;
   height: 200px;
   background: #000;
 }

浏览器显示结果
在这里插入图片描述
这个时候如果我们给子元素加如下代码

margin-top:100px;

浏览器显示结果
在这里插入图片描述
这个时候我们发现，它的父元素也下来了
这个也属于外边距合并的一种

那么要怎么解决这个问题呢？

我们给父元素加边框
在这里插入图片描述
这就是我们解决外边距合并的方式

小结：

外边距margin围绕在元素边框周围的空白区域

会在元素外创建额外的空白区域
外边距是透明的

语法：margin:value;

单边设置

mergin-top/right/bottom/left:value
value可取值为像素，%，auto，负值

可以设置为负值，例如下面的代码，代表的是向上移动100像素

margin-top:-100px;

小结外间距简写

margin:value(四个方向相同)
margin:value(上下) value(左右)
margin:value(上) value(左右) value(下)
margin:value(上) value(右) value(下) value(左)

小结外间距合并

当两个垂直外边距相遇时他们将形成一个外边距，成为外边距合并
合并后的外边距的高度等于两个发生合并的外边距的高度中较大者

margin设置元素外边距的宽度，它有这么几个特点:

块级元素的垂直相邻外边距会合并
行内元素实际上不占上下外边距，行内元素的左右外边距不合并
浮动元素的外边距也不会合并
允许指定负外边距，不过使用时要小心

接下来是边框border

<style>
    div{
      width: 200px;
      height: 200px;
      background: green;
      border-right-color:red;
      border-right-width: 4;
      border-right-style: solid;
    }
  </style>
</head>
<body>
  <div></div>
</body>

在这里插入图片描述
border属性设置一个元素的边框border
它有三个要素:宽，样式，颜色，统称"边框三要素"

三要素书写时一般按照如下顺序
border:宽度样式颜色

border: 1px solid red

不过不按照这个顺序来写依然可以正常显示

border的三要素可以统一写在"border"属性中，也可以单独设置
在这里插入图片描述
统一的写法:

border: 1px solid red

单独的设置
border-width:;
border-style:;
border-color:;

要注意，在style属性为空的情况下，整个边框说不会出现的
这不论是统一写或是单独设置都是这样的

不写width会有默认3像素的值
不写颜色会默认为黑色

border-style设置边框的样式，有五种常用的样式可以选

点状dotted
实线solid
双线double(需要最起码设置为3像素，不然显示不下)
虚线dashed
无边框node

内边距

内容区域和边框之间的空间
会扩大元素边框所占用的区域
语法:padding:value;

单边设置

padding-top/right/bottom/left:value
value可取值为像素，%，但不能为负值

内边距简写

padding:value(四个方向相同)
padding:value(上下) value(左右)
padding:value(上) value(左右) value(下)
padding:value(上) value(右) value(下) value(左)

进行尝试

 span{
   border: 1px solid grey;
   float: left;
   padding-top:10px;
   padding-left: 10px;
   padding-right:10px;
   padding-bottom: 10px;

   /* padding:10px; */
 }

<span>这是内容</span>

在这里插入图片描述
值得注意的是
在设置内间距和边框的时候，注意对应地减去我们的宽度，否则它会全部占用

在这里插入图片描述

在这里插入图片描述
小结：

padding的宽高要记录在盒子模型的宽高之内，于此相同的是border也要记录在盒子模型的宽高之内
但是margin并不算在宽高之内所以在书写宽高的时候要注意减掉内边距和边框(标准盒模型)

三、怪异盒模型

盒子模型分两种

一种是符合W3C规范的标准例子模型
另一种是IE的盒子模型，IE的盒子模型也被叫做怪异盒子

可以看见IE盒子模型也包括margin、border、padding、content
不过，和标准盒子不同的是:IE盒子模型的宽包含了border和padding
在这里插入图片描述

Box-sizing: border-box

box-sizing属性允许你以"W3C的盒模型"或"IE盒模型"来定义元素，以适应区域

也就是说，当前元素使用哪种盒模型，可以由box-sizing属性来指定

它有两个值

content-box(标准)
padding和border不被包含在width和height内
元素的实际大小为宽高+border+padding，此为标准模式下的盒模型
border-box(怪异)
padding和border被包含在定义的width和height中，元素实际的大小为你定义了多宽就是多宽
此属性为怪异模式下的盒模型

在这里插入图片描述
这是默认的标准盒模型
现在我们设置一下，让第二个元素成为怪异盒模型

在这里插入图片描述

Dwell_hls

发布了227 篇原创文章 · 获赞 41 · 访问量 2万+

私信关注