-
基本概念 + 标准模型 + IE模型
盒模型：本质上就是一个盒子，封装周围的html元素，它包括content, padding, border, margin几个部分
盒模型又分为标准模型和IE模型 -
标准模型和IE模型的区别
两者计算宽度和高度的方式不同
- 标准模型
width和height：只包括content部分的宽和高 - IE模型
width: content + padding + border的宽
height: content + padding + border的高
- CSS如何设置两种模型
box-sizing: content-box; /* 标准模型,浏览器默认的模型 */
box-sizing: border-box; /* IE模型 */
- JS如何设置获取盒模型对应的宽和高
先了解一下css的四种插入方式：
<!-- 1. 内联样式 -->
<p style="color: blur;">
<!-- 2. 内部样式 -->
<head>
<style>
p {
color: blur;
}
</style>
</head>
<!-- 3. 外联样式：先导入资源，再渲染页面 -->
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
<!-- 4. 导入式：先渲染页面，再导入资源 -->
<style type="text/css">
@import"mystyle.css"
</style>
dom.style.height/width // 只能取内联样式的宽和高
dom.currentStyle.width/height // 拿到渲染以后的宽和高，但只有ie9以下支持，除非做IE旧版本兼容，否则不要使用
window.getComputedStyle(dom).width/height // 支持基本浏览器，IE9以上
dom.getBoundingClientRect().width/height // 除了获取宽高，还能获取元素的位置信息,通常用来计算元素的绝对定位
- 实例题（根据盒模型解释边距重叠）
有一个父元素div，其中只有一个子元素，子元素高100px，margin-top: 10px，问父元素的高度？
答案：100px；
<style>
html * {
margin: 0;
padding: 0;
}
.father {
background: red;
overflow: hidden;
}
.child {
height: 100px;
margin-top:10px;
background: yellow;
}
</style>
<section class="father">
<article class="child"></article>
</section>
如果有上下两个div元素，上一个div的margin-bottm是5px，下一个div的margin-top是30px，问它俩之间的边距值是？
答案：30px;
- BFC 边距重叠解决方案
-
BFC基本概念
block formatting context, 块级格式化上下文，它是一个独立的布局容器，其中的元素不受外界影响，并且在一个BFC中，块盒与行盒都会垂直地沿其父元素的边框排列 -
BFC原理（渲染规则）
- 同个BFC容器内的元素垂直方向上的margin边距会重叠
- BFC不会与浮动元素的box重叠，这个经常用来清除浮动布局
- BFC是一个独立的容器，里面的元素和外面的元素互不影响
- 计算BFC高度的时候，浮动元素也会参与计算
-
怎么创建BFC
float: 不为none;
position: 不为static或relative;
display: 值为flex,inline-flex, inline-block,table-cell,table-caption;
overflow: 不为visible, 为hidden或auto;
- BFC的应用场景
<style>
/* 会发现子元素间，上下间距会重叠，即p1和p2间距为25px */
.bfc {
background: grey;
}
.bfc p {
background: greenyellow;
margin: 25px auto;
}
</style>
<!-- bfc -->
<section class="bfc">
<p>1</p>
<p>2</p>
<p>3</p>
</section>
<!-- BFC解决重叠问题，是在子元素外层再套一个父元素，并创建bfc -->
<style>
/* 给子元素创建一个bfc，p1和p2间的间距为50px了 */
.p2 {
overflow: hidden;
}
</style>
<!-- bfc -->
<section class="bfc">
<p>1</p>
<div class="p2">
<p>2</p>
</div>
<p>3</p>
</section>
<!-- 布局时利用BFC不与float重叠特性 -->
<style>
/*
布局时利用BFC不与float重叠
如果不使用BFC，右侧布局部分将会侵染左边float下边
在右部分使用BFC后，将不会侵染左边，左边下面部分由背影色填充
*/
.layout {
background: paleturquoise;
/* 注意，加在这是没有用的 */
/* overflow: auto; */
}
.layout .left {
width: 100px;
height: 100px;
float:left;
background:peachpuff;
}
.layout .right {
background: papayawhip;
height: 200px;
/* 要加在这 */
overflow: auto;
}
</style>
<section class="layout">
<div class="left">左边布局</div>
<div class="right">右边布局</div>
</section>
<!-- 清除浮动 -->
<style>
/* 需要清除浮动的父元素 */
.float-father {
background:pink;
/* 如果不清除浮动，浮动元素的高度并没有参与计算，父元素高度为0 */
overflow: auto;
}
.float-father .float {
float: left;
height: 100px;
background: yellow;
}
</style>
<section class="float-father">
<div class="float">浮动元素</div>
<!-- <div class="tt">其它元素</div> -->
</section>
</body>
网友评论