CSS怪异，弹性盒子模型与浏览器内核

盒子模型之外边距

定义

CSS margin(外边距)属性定义元素周围的空间

取值

Auto
定义一个固定的margin
定义一个使用百分比的边距

单边外边距属性

在CSS中，它可以指定不同的侧面不同的边距

html 复制代码

div{
  margin-top:100px;
  margin-bottom:100px;
  margin-right:50px;
  margin-left:50px;
}

简写属性

为了缩短代码，有可能使用一个属性中margin指定的所有边距属性

所有边距属性的简写属性是 margin

html 复制代码

div{
    margin:100px 50px;
}

margin属性可以有一到四个值

html 复制代码

margin:25px 50px 75px 100px; // 顺序：上 右 下 左
margin:25px 50px 75px; // 顺序：上 (左右) 下
margin:25px 50px; // 顺序：上下 左右
margin:25px; // 顺序：所有方向

margin需要注意的问题

外边距合并问题

垂直方向上外边距相撞时，取较大值

html 复制代码

<div class="one"></div>
<div class="two"></div>

html 复制代码

<style>
  .one,.two{
    width: 200px;
    height: 200px;
   }
  .one{
    background-color: red;
    margin-bottom: 50px;
   }
  .two{
    background-color: blueviolet;
    margin-top: 100px;
   }
</style>

html 复制代码

<body>
  <div class="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</body>

html 复制代码

<style>
  .box {
    width: 1240px;
    margin: 0 auto;
   }


  .box>div {
    width: 303px;
    height: 375px;
    background-color: red;
    float: left;
    margin-bottom: 10px;
    margin-right: 9px;
   }


  .box>div:nth-child(4n) {
    margin-right: 0;
   }
</style>

怪异盒模型

怪异盒模型(IE盒子模型)

在该模式下，浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和；即在怪异模式下的盒模型，盒子的（content）宽度+内边距padding+边框border宽度=我们设置的width(height也是如此)，盒子总宽度/高度=width/height + margin

Box-sizing

CSS3指定盒子模型种类

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素

box-sizing: content-box;宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框

box-sizing: border-box; 为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度

即box-sizing属性可以指定盒子模型种类，content-box指定盒子模型为W3C（标准盒模型），border-box为怪异盒模型

弹性盒模型（flex box）

定义

弹性盒子是 CSS3 的一种新的布局模式

CSS3 弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间

CSS3弹性盒内容

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成

弹性容器通过设置 display属性的值为 flex将其定义为弹性容器

弹性容器内包含了一个或多个弹性子元素

温馨提示

弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局

html 复制代码

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div> 
</div>
<style>
  .flex-container {
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
   }
  .flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
   }
</style>

html 复制代码

.flex-container {
  display: flex;
  flex-direction: column;
  width: 400px;
  height: 250px;
  background-color: lightgrey;
}

子元素上的属性

flex-grow

flex-grow 根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间

默认为0，即如果存在剩余空间，也不放大

如果只有一个子元素设置，那么按扩展因子转化的百分比对其分配剩余空间。0.1即10%，1即100%，超出按100%

html 复制代码

<div class="flex-container">
   <div class="flex-item1">flex item 1</div>
   <div class="flex-item2">flex item 2</div>
   <div class="flex-item3">flex item 3</div> 
</div>
<style>
    .flex-container {
    display: flex;
    width: 400px;
    height: 250px;
    background-color: gold;
   }
  .flex-item1 {
    height: 150px;
    background-color: red;
    flex-grow: 1;
   }
  .flex-item2 {
    height: 150px;
    background-color: green;
    flex-grow: 2;
   }
  .flex-item3 {
    height: 150px;
    background-color: blue;
    flex-grow: 1;
   }
</style>