简述css盒模型概念_css盒模型和ie盒模型

大家好，又见面了，我是你们的朋友全栈君。
<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>html基础复习</title>
</head>
<body>
   <!-- 前端: 用户可见的所有界面均是前端(PC端/移动端) -->
   <!-- html: 页面架构搭建 | css: 页面布局样式 | js: 页面交互渲染 -->
   <!-- 编辑器: webstrom | sublime | atom | pycharm  -->

   <!-- 标签: <字母开头 + 合法字符(数字|-)> => (标签具有作用域,有头有尾)  <abc> | <num1> | <nav-title> -->
   <!-- 指令: <!doctype html> 注释 -->
   <!-- 转移字符: &gl; &nbsp; -->

   <!-- 基本标签: div | span | hn | p | ul>li | hr | br | form>input | table>tr>th(td) | a | img | b | i | meta | link | script | style -->

   <!-- 分类: 单双 | dispaly -->
   <!-- inline: span | b | i | a -->
   <!-- inline-block: img | input -->
   <!-- block: div | hn | p | ul | hr | br -->
</body>
</html>


<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>css复习</title>
</head>
<body>
   <!-- 1.css三种引入: 行间式 | 内联式 | 外联式 -->
   <!-- 选择器 作用域 样式块 -->


   <!-- 2.长度单位: px | em | rem | cm | mm | vw | vh | in -->

   <!-- 3.颜色: rgb(0, 255, 189) | rgba(0,0,0, 0~1) | red | #000000~#FFFFFF -->

   <!-- 4.文本样式 -->
   <style>
      span {
  
  
         font: 900 normal 30px/100px '首选字体', '备用字体1', '备用字体2';
         text-align: center;
         color: red;
         text-decoration: underline;
         letter-spacing: 3px;
         word-spacing: 10px;
         text-indent: 2em;
      }
   </style>

   <!-- 5.选择器 -->
   <style type="text/css">
      /*选择器： css连接html标签的桥梁，建立连接后就可以控制标签样式*/
      /*标签 类 id*/
      /*组合选择器*/
      /*伪类选择器*/

      /*优先级：*/
      /*基础选择器： !important > id > 类[属性] > 标签 > 通配*/
      /*组合选择器: 权重(同类型个数比较)*/
      .b > .s {}
      .b .s {}
      .b + .s {}
      .b.s {}
      .b[class] {}

      #ss { font-size: 50px; }
      span.s2 { font-size: 40px; }
      [class] { font-size: 35px; }
      .s1 { font-size: 30px; }
      span { font-size: 20px!important; }

      /* 标签名 | . | # */
      /*后代"空格"(子代) | 兄弟"~"(相邻) | 群组"," | 交集"紧挨着"*/
      /* [属性名="属性值"] */

   </style>

   <span class="s1 s2" id="ss" style="font-size: 60px;">12345</span>

   <style type="text/css">
      /* 伪类选择器 */
      /* :link :hover(鼠标悬浮) :active(鼠标点击中) :visited */
      /* :nth-child() 先位置后类型 :nth-of-type() 先类型后位置 */
      /* :not() */
      /* :before(盒子渲染前) :after(盒子渲染后) :focus(表单标签获取焦点) */
      p:nth-child(3) { font-size: 100px }
      p:nth-of-type(2n) { font-size: 50px }
   </style>
   <div class="box">
      <span>span</span>
      <p>pp1</p>
      <p>pp2</p>
   </div>

   <!-- 6.精灵图 -->
   <style type="text/css">
      .pg {
  
  
         width: 200px;
         height: 200px;
         border: 1px solid black;
         position: absolute;
         top: 10px;
         left: calc(50vw - 100px);
      }
      .pg {
  
  
         background: url('img/bg.png') no-repeat;
         /*将背景图片的具体位置移至显示区域*/
         background-position: -300px -350px;
      }
   </style>
   <div class="pg"></div>
</body>
</html>


<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>盒模型复习</title>
   <style type="text/css">
      abc {
  
  
         display: inline-block;
      }

      .box {
  
  
         background: orange;

         /*文本类型的样式具有继承关系*/
         font-size: 30px;
         font-weight: 900;
         /*inline-block不会继承*/
         text-decoration: underline;
         text-indent: 2em;
         line-height: 60px;
      }
   </style>
</head>
<body>
   <!-- 文本属性通过拥有继承关系: 子标签没有设置文本属性时,值会从父级中获取(父级如果没有设置,会找到html) -->

   <div class="box">
      <span>inline</span>
      <div>block</div>
      <abc>inline-block</abc>
   </div>

   <!-- 1.盒子的四个组成部分 -->
   <!-- content | padding | border | margin -->
   <!-- display: inline | inline-block | block -->

   <!-- content: 提高给内容(文本,图片,子标签整个盒子)的显示区域 -->

   <!-- padding: 介于border与content之间的距离, 可以撑开border与content之间的距离, 没有自身颜色(透出背景颜色),只有区域 -->
   <!-- 注: padding-top可以将自身与自身第一个子级分离 -->
   <style type="text/css">
      .p {
  
  
         width: 20px;
         height: 20px;
         background: red;
      }
      .b {
  
  
         width: 100px;
         padding-bottom: 100px;
         border-bottom: 1px solid black;
      }
      .c {
  
  
         background: pink;
         /*border: 1px solid black;*/
         border-style: solid;
         padding-left: 32px;
         padding-bottom: 32px;
         margin-left: 32px;
         /*text-indent: 2em;*/
      }
   </style>
   <div class="b">
      <div class="p"></div>
   </div>
   <div class="c">123</div>

   <!-- border: 边框, 有宽度颜色样式, 如果给颜色设置透明也可以透出背景颜色 -->

   <!-- margin: 控制盒子位置 => 盒模型布局 -->

   <!-- 2.边界圆角 -->
   <style type="text/css">
      .bj {
  
  
         width: 100px;
         height: 100px;
         background: pink;
      }
      .bj {
  
  
         /*border-radius: 20px;*/
         /*border-radius: 40%;*/
         /*border-radius: 10px 30px 50px;*/
         border-radius: 10px / 50px;
      }
   </style>
   <div class="bj"></div>

   <!-- 3.display -->

   <!-- 4.margin布局 -->
   <!-- i) margin-top | margin-left 完成自身布局, 右下两个方向影响兄弟 -->
   <style type="text/css">
      .hh {
  
  
         width: 30px;
         height: 30px;
         background: black;
         /*display: inline-block;*/
         float: left;
         /*自身动,控制自身布局*/
         /*margin-top: 30px;*/
         /*margin-left: 30px;*/

         /*右兄弟动,辅助兄弟布局*/
         margin-right: 100px;
         /*下兄弟动,辅助兄弟布局*/
         /*margin-bottom: 30px;*/
      }
      .xx {
  
  
         width: 30px;
         height: 30px;
         background: red;
         /*display: inline-block;*/
         float: left;
      }
   </style>
   <div class="hh"></div>
   <div class="xx"></div>

   <!-- ii) 上下间距会重叠取大值, 左右间距会叠加 -->
   <!-- 坑1: 父子联动 坑2: 上兄弟下margin和下兄弟上margin重叠取大值 -->
   <style type="text/css">
      .x, .z {
  
  
         width: 50px;
         height: 50px;
         background: blue;
      }
      .x {
  
  
         /*margin-bottom: 40px;*/
      }
      .z {
  
  
         margin-top: 10px;
         background: yellow;
      }
      .y {
  
  
         width: 10px;
         height: 10px;
         background: red;
         /*margin-top: 10px;*/
      }
      /*坑1解决方案*/
      .y {
  
  
         /*方案1*/
         /*float: left;
         margin-top: 10px;*/

         /*方案2*/
         /*position: relative;*/
         position: absolute;
         /*top: auto;*/
         /*top: 20px;*/
         margin-top: 20px;
      }
      .z {
  
  
         /*position: relative;*/
      }
   </style>
   <div class="x"></div>
   <div class="z">
      <div class="y"></div>
   </div>
</body>
</html>