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

最新推荐文章于 2023-01-05 14:35:51 发布

长安古意

最新推荐文章于 2023-01-05 14:35:51 发布

阅读量1.3k

点赞数

分类专栏： css基础

本文链接：https://blog.csdn.net/aiyishengyishi/article/details/54907817

版权

css基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

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

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

<!DOCTYPE html>
<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和padding</div>
    <div class="spe special1">有border和padding</div>
    <div class="spe special2">border-box</div>
</body>
</html>

这里写图片描述

border-box的属性
这里写图片描述

长安古意

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
标准模式和混杂模式下的盒模型

IE盒子模型特点：width=(border+padding+content)的宽度height=(border+padding+content)的高度标准盒模型：width=content的宽度height=content的高度
复制链接

扫一扫

专栏目录