盒子模型
HTML中的每一个元素都可以看做是一个盒子，具备这4个属性：
内容（content）
元素的内容width/height
内边距（padding）
元素和内容之间的间距
边框（border）
元素自己的边框
外边距（margin）
元素和其他元素之间的间距
精灵图
清除浮动
- 给父元素设置固定高度
- 在父元素最后增加一个空的块级子元素，并且让它设置 clear: both
- 伪元素清除浮动
.clear-fix::after {
content: "";
display: block;
clear: both;
visibility: hidden;/* 浏览器兼容性 */
height: 0;/* 浏览器兼容性 */
}
.clear-fix {
*zoom: 1;/* ie6/7兼容性 */
}
flex和grid
<style>
.container {
width: 400px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
width: 110px;
height: 110px;
}
.container>span {
width: 100px;
}
</style>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<!-- 添加的span的个数是 列数 - 2 -->
<span></span>
</div>
</body>
解决图片下边缘的间隙方法
- vertical-align 设置成 top/middle/bottom
- 将图片设置为 block 元素
web fonts
@font-face {
font-family: 'ciclefina';
src: url('fonts/cicle_fina-webfont.eot');
src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/cicle_fina-webfont.woff2') format('woff2'),
url('fonts/cicle_fina-webfont.woff') format('woff'),
url('fonts/cicle_fina-webfont.ttf') format('truetype'),
url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg');
font-weight: normal;
font-style: normal;
}
防止上下margin的传递
- 给父元素设置 padding-top\padding-bottom
- 给父元素设置 border
- 触发 BFC：设置 overflow 为 auto
FC
Formatting Context，元素在标准流里面都属于一个FC
- 块级元素的布局属于 Block Formatting Context（BFC），也就是 block level box 都是在 BFC 中布局的
- 会创建 BFC 的情况，developer.mozilla.org/zh-CN/docs/…
- BFC 的作用：
- 解决折叠问题
- 在同一个 BFC 中，相邻两个 box 之间的 margin 会折叠（collapse）
- 解决浮动高度塌陷
- BFC 解决高度塌陷需要满足两个条件：
- 浮动元素的父元素触发 BFC，形成独立的块级格式化上下文（Block Formatting Context）
- 浮动元素的父元素的高度是 auto
- BFC 的高度是 auto 的情况下，是如下方法计算高度的：
- 如果只有 inline-level，是行高的顶部和底部的距离
- 如果有 block-level，是由最底层的块上方边缘和最底层块盒子的下边缘之间的距离
- 如果有绝对定位元素，将被忽略
- 如果有浮动元素，那么会增加高度以包括这些浮动元素的下边缘
- 行内级元素的布局属于 Inline Formatting Context（IFC），而 inline level box 都是在 IFC 中布局的
