CSS盒子模型

目录

1
2
3
4
5
6
基本概念
标准盒子模型和IE盒子模型区别
CSS如何设置这两种模型
JS如何设置和获取盒模型对应的宽和高
盒模型解释边距重叠问题
边距重叠解决方案:BFC

1- 基本概念

盒子模型包括:content,padding,border,margin

2- 标准盒子模型和IE盒子模型区别

标准盒子模型的content不包含padding和border,而怪异盒子模型则包含padding和border。

3- CSS如何设置这两种模型

  • 设置标准盒子模型的方法:
    box-sizing:content-box;

  • 设置怪异盒子模型的方法:
    box-sizing:border-box;

    4- JS如何设置和获取盒模型对应的宽和高

    • oDom.style.width/height;
      只有设置内联样式的元素才能用此方法取到其宽和高,外链式和style样式表取不到宽高

    • oDom.currentStyle.width/height;
      只有ie支持这个方法

    • window.getComputedStyle(oDom).width/height;
      兼容性和通用性比较好
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    * {
    margin: 0;
    padding: 0;
    }

    #box {
    width: 300px;
    height: 200px;
    background: pink;
    }
    </style>
    </head>
    <body>
    <div id="box"></div>
    <script>
    var oBox = document.getElementById('box');
    console.log(oBox, 'oBox...');//<div id="box"></div>
    console.log(window.getComputedStyle(oBox).width, 'oBox...width');//300px
    console.log(window.getComputedStyle(oBox).height, 'oBox...height');//200px
    </script>
    </body>
    </html>

5- 盒模型解释边距重叠问题

布局描述:

1.一个父容器里面嵌套一个子容器

2.父容器设置一个blue背景色,子容器设置yellow背景色,高度100px,margin-top:10px

问题:父元素的高度是多少?

答案:100px或则110px

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}

#father {
background: blue;
/*overflow: hidden;*/
/*有这行就是110px,没这行就是100px*/
}
#son{
height: 100px;
margin-top: 10px;
background: yellow;
}
</style>
</head>
<body>
<div id="father">
<div id="son">

</div>
</div>
</body>
</html>

blockchain
blockchain

5- 边距重叠解决方案:BFC

BFC的概念:块级格式化上下文

BFC的原理(即渲染规则)
  • 1-BFC的元素垂直方向上边距会发生重叠
  • 2-BFC的区域不会与浮动元素box重叠
  • 3-BFC在页面是一个独立的容器,外面元素与里面元素不会相互影响
  • 4-计算BFC高度的时候,浮动元素也会参与计算

    何创建BFC
    • overflow:hidden/auto 不能为visible
    • float:不为none
    • Position:不为static,或relative
    • display:table-cell,table都可以
    BFC的使用场景
    • 解决margin边距重叠问题
    • 解决浮动重叠
    • 清楚浮动的原理:BFC,解决父级塌陷问题
-------------本文结束感谢您的阅读-------------