CSS 盒模型
基本概念:标准模型 + IE模型
标准模型和IE模型的区别
- 标准模型
- IE模型
- 二者区别,前者的宽度是内容宽度,后者的宽度是内容+内边距+border
CSS 如何设置这两种模型
- 标准模型:box-sizing: content-box; - IE模型:box-sizing: border-box;
JS 如何设置获取盒模型对应的宽和高
- dom.style.width/height - dom.currentStyle.width/height 仅IE兼容 - window.getComputedStyle(dom).width/height 兼容性好 - dom.getBoundingClientRect().width/height 用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置。
- 实例题「根据盒模型解释边距重叠」
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>CSS 盒模型</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html *{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<section id="sec">
<style media="screen">
#sec{
background: #f00;
/* 解决重叠,BFC */
/* overflow: hidden; */
}
.child{
height: 100px;
background: yellow;
margin-top: 10px;
}
</style>
<article class="child"></article>
</section>
</body>
</html>
BFC 「边距重叠解决方案」
- BFC的基本概念 - 块级元素格式化上下文 - BFC的原理 - 在 BFC 这个垂直方向的边距发生重叠 - BFC 的区域不会与浮动元素的box重叠 - BFC 在页面上是个独立的容器 - 计算 BFC 高度的时候,浮动元素也会参与计算 - 如何创建 BFC - 只要设置了 float,就会创建 - position 的值不是 static 或者 relative - display 属性 - overflow 相关
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>CSS 盒模型</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html * {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<section id="sec">
<style media="screen">
#sec {
background: #f00;
/* 解决重叠 */
/* overflow: hidden; */
}
.child {
height: 100px;
background: yellow;
margin-top: 10px;
}
</style>
<article class="child"></article>
</section>
<!-- BFC元素内垂直方向边距重叠(取最大的值)-->
<section id="margin">
<style>
#margin {
margin-top: 20px;
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 {
margin-top: 20px;
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>
#float {
margin-top: 20px;
background: red;
overflow: hidden;
}
#float .float {
float: left;
font-size: 30px;
}
</style>
<div class="float">我是浮动元素</div>
</section>
</body>
</html>
License
- 可以拷贝、转发,但是必须提供原作者信息,同时也不能将本项目用于商业用途。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。