标准模式和混杂模式下的盒模型

相关内容参考:
http://www.cnblogs.com/cchyao/archive/2010/07/12/1775846.html
http://www.runoob.com/css/css-boxmodel.html
总结:

IE盒子模型特点:
width=(border+padding+content)的宽度
height=(border+padding+content)的高度

标准盒模型:
width=content的宽度
height=content的高度

主要是针对标准模式下的盒模型进行学习
标准模式下设置元素的width实际上是对盒模型的content的宽度进行设置,而不包括border值和padding值


<html lang="en">
<head>
  <title>pullpage插件实现全屏效果title>
  <meta charset="utf-8" />

  <link rel="stylesheet" href="css/animate.min.css" />
  <link rel="stylesheet" href="css/jquery.fullPage.css">
head>
<style type="text/css">
    .spe{
      width:200px;
      height:200px;
      line-height:200px;
      background-color: pink;
      margin-bottom: 20px;
      text-align: center;
    }
    .special1{
          padding:20px;
          border:5px solid red;
    }
    .special2{
          padding:20px;
          border:5px solid red;
          box-sizing:border-box;
    }
style>
<body>
    <div class="spe">没有border和paddingdiv>
    <div class="spe special1">有border和paddingdiv>
    <div class="spe special2">border-boxdiv>
body>
html>

标准模式和混杂模式下的盒模型_第1张图片

border-box的属性
标准模式和混杂模式下的盒模型_第2张图片

你可能感兴趣的:(css基础)