CSS盒模型

时间 2019-11-08

标签 css 模型栏目 CSS 繁體版

原文原文链接

CSS盒模型的认识

标准模型和 IE模型

CSS盒模型包括content，padding，border，margin 标准模型跟IE模型的区别在于计算长宽的方式不同。标准模型的长宽是content的宽高，IE模型的宽高包括border之内的宽高。 html

如何设置切换这两种模型

通常默认的是标准模型，能够经过CSS3的新属性 box-sizing 来进行两种模式的切换浏览器

//标准模型
box-sizing: content-box

//IE模型
box-sizing: border-box
复制代码

JS如何获取盒模型对应的宽和高

//第一种只能获取内联样式的宽高
dom.style.width/height
//第二种得到最终渲染的宽高，可是只支持IE
dom.currentStyle.width/height
//第三种兼容其余浏览器
window.getComputedStyle(dom).width/height
//第四种dom.getBoundingClientRect()能够获取元素的绝对位置，返回四个值，width,height,top,left
dom.getBoundingClientRect().width/height
复制代码

CSS实例题

子元素的高是100px，margin-top是10，那么父元素的高度是多少？答案：100px和110px均可能。bash

由上面引出问题，边距重叠问题（父子元素，兄弟元素，空元素）

当上诉关系的边距重叠的时候，会取较大值做为二者的边距dom

边距重叠解决方案

BFC（块级格式化上下文）和IFC （内联格式化上下文）布局

BFC概念

BFC 即 Block Formatting Contexts (块级格式化上下文)，它是页面中的一块渲染区域，而且有一套渲染规则，它决定了其子元素将如何定位，以及和其余元素的关系和相互做用。flex

具备 BFC 特性的元素能够看做是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，而且 BFC 具备普通容器所没有的一些特性。ui

BFC原理

1.在BFC元素的垂直方向的边距不会发生重叠 2.BFC元素不会与浮动的元素的边距重叠 3.bfc能够看做一个独立的容器，容器内外各不影响。 4.计算宽高的时候浮动元素也参与计算。spa

如何建立BFC

body 根元素浮动元素：float 除 none 之外的值绝对定位元素：position (absolute、fixed) display 为 inline-block、table-cells、flex overflow 除了 visible 之外的值 (hidden、auto、scroll) 以上条件均可以建立一个BFC元素3d

应用场景

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS盒模型</title>
    <style media="screen">
      html *{
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
      <section class="box" id="sec">
        <style media="screen">
          #sec{
            background: #f00;
          }
          .child{
            height: 100px;
            margin-top: 10px;
            background: yellow
          }
        </style>
        <article class="child"></article>
      </section>

      <!-- BFC垂直方向边距重叠 -->

      <section id="margin">
        <style>
          #margin{
            background: pink;
            overflow: hidden;
          }
          #margin>p{
            margin: 5px auto 25px;
            background: red;
          }
        </style>
        <p>1</p>
        <div style="overflow:hidden">
          <p>2</p>
        </div>
        <p>3</p>
      </section>

      <!-- BFC不与float重叠 -->
      <section id="layout">
        <style media="screen">
          #layout{
            background: red;
          }
          #layout .left{
            float: left;
            width: 100px;
            height: 100px;
            background: pink;
          }
          #layout .right{
            height: 110px;
            background: #ccc;
            overflow: auto;
          }
        </style>
        <div class="left"></div>
        <div class="right"></div>
      </section>

      <!-- BFC子元素即便是float也会参与计算 -->
      <section id="float">
        <style media="screen">
          #float{
            background: red;
            overflow: auto;
            /*float: left;*/
          }
          #float .float{
            float: left;
            font-size: 30px;
          }
        </style>
        <div class="float">我是浮动元素</div>
      </section>

  </body>
</html>

复制代码

以上就是我对CSS盒模型的一些总结~~~

1. css盒模型
2. css－－盒模型
3. CSS盒模型
4. CSS 盒模型
5. CSS-盒模型
6. 【CSS】盒模型
7. CSS：盒模型
8. css 盒模型
9. 盒模型------CSS
更多相关文章...
• ASP.NET MVC - 模型 - ASP.NET 教程
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• 委托模式
• Kotlin学习（二）基本类型