盒子模型
盒子模型定义：
当对一个盒子模型进行文档布局的时候，浏览器的渲染引擎会根据标准之一的CSS盒子模型（CSS basic box model），将所有元素表示成一个个矩阵盒子。
一个盒子通常由四部分组成：border padding content margin
html
<style>
.box {
width: 200px;
height: 100px;
padding: 20px;
}
</style>
<div class="box">
盒子模型
</div>
标准盒子模型
IE 盒子模型：
Box-Sizing:
css
box-sizing: content-box|border-box|inherit:
css
<style>
.box {
width: 200px;
height: 100px;
padding: 20px;
box-sizing: border-box;
}
</style>
<div class="box">
盒子模型
</div>如何理解BFC
什么是BFC
BFC触发条件
应用场景
1 防止margin重叠（塌陷）
html
<style>
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
</style>
<body>
<p>Haha</p >
<p>Hehe</p >
</body>
html
<style>
.wrap {
overflow: hidden;// BFC
}
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
</style>
<body>
<p>Haha</p >
<div class="wrap">
<p>Hehe</p >
</div>
</body>
清除内部浮动
html
<style>
.par {
border: 5px solid #fcc;
width: 300px;
}
.child {
border: 5px solid #f66;
width:100px;
height: 100px;
float: left;
}
</style>
<body>
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
css
.par {
overflow: hidden;
}
自适应多栏布局
html
<style>
body {
width: 300px;
position: relative;
}
.aside {
width: 100px;
height: 150px;
float: left;
background: #f66;
}
.main {
height: 200px;
background: #fcc;
}
</style>
<body>
<div class="aside"></div>
<div class="main"></div>
</body>
css
.main {
overflow: hidden;
}
响应式设计
什么是响应式设计
实现方式
html
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
媒体查询
css
@media screen and (max-width: 1920px) { ... }
css
@media screen (min-width: 375px) and (max-width: 600px) {
body {
font-size: 18px;
}
}
百分比
vm/vh
rem
css
@media screen and (max-width: 414px) {
html {
font-size: 18px
}
}
@media screen and (max-width: 375px) {
html {
font-size: 16px
}
}
@media screen and (max-width: 320px) {
html {
font-size: 12px
}
}为了更加准确的监听前端可视窗口的变化，可以在css之前插入javaScript标签。
javascript
//动态设置元素字体的大小
function init () {
var width = document.documentElement.clientWidth
document.documentElement.style.fontSize = width / 10 + 'px'
}
// 首次加载只加载 只加载一次
init()
window.addEventListener('orientationchange', init);
window.addEventListener('resize', init);
小结
