CSS盒模型
2019-01-16 本文已影响0人
翔阿翔阿翔
CSS盒模型的认识
标准模型 和 IE模型
CSS盒模型包括content，padding，border，margin
标准模型跟IE模型的区别在于计算长宽的方式不一样。标准模型的长宽是content的宽高，IE模型的宽高包括border以内的宽高。
标准模型
IE模型
如何设置切换这两种模型
一般默认的是标准模型，可以通过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都可能。
由上面引出问题，边距重叠问题（父子元素，兄弟元素，空元素）
当上诉关系的边距重叠的时候，会取较大值作为两者的边距
边距重叠解决方案
BFC（块级格式化上下文）和IFC （内联格式化上下文）
BFC概念
BFC 即 Block Formatting Contexts (块级格式化上下文)，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。
BFC原理
1.在BFC元素的垂直方向的边距不会发生重叠
2.BFC元素不会与浮动的元素的边距重叠
3.bfc可以看作一个独立的容器，容器内外各不影响。
4.计算宽高的时候浮动元素也参与计算。
如何创建BFC
body 根元素
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)
以上条件都可以创建一个BFC元素
应用场景
<!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>
