bfc（block formatting context）
块级格式化上下文
生成bfc的方式：
1、根元素；
2、float属性不为none（脱离文档流）；
3、position为absolute或者fixed的时候；
4、display为inline-block、table-cell、table-caption、flex、inline-flex；
5、overflow不为visible（默认）。
渲染的流程：
文档解析成对象模型（dom），通过选择器给对应的元素加上样式，根据渲染规则到显存区域，渲染过程中用到的数据通过上下文来获取。
bfc：渲染时用于保存临时数据和获取外部数据的容器。
HTML和body都是bfc。
bfc的应用：
自适应两栏布局；
清除内部浮动；
防止垂直margin塌陷；
.......
响应式布局：
三要素：弹性图片、媒体查询、弹性布局
响应式布局开发概念：移动端优先和PC端优先
根据当前项目的用户比例进行设计，项目的主要用户为移动端用户时采用移动端优先布局，否则采用PC端优先布局。
视口：
布局视口：网页在移动端中渲染出的区域，用来加载网页；
可视视口：浏览器的窗口；
理想视口：由乔布斯提出，当布局视口大小与可视视口大小相同的时候就是理想视口。
css伪元素
伪元素根据字面理解就是伪装成元素，但是
伪元素并不是元素，而是于生成的内容相关联。生成内容主要指由浏览器创建的内容，而不是由标志或内容来表示。生成内容主要由:before和:after伪元素来实现，当然伪元素还包括:first-line,:first-letter和::selection。
:first-letter
:first-letter设置一个元素第一个字母的样式。
注意1：所有前导标点符号应与第一个字母一同应用该样式
注意2：只能与块级元素关联
注意3：只有当选择器部分和左大括号之间有空格时，IE6-浏览器才支持。因为first-letter中存在连接符的原因
示例：
div:first-letter {
color:red;
}:first-line
:first-line设置元素内容第一行文本的样式。
注意1：只能与块级元素关联
注意2：只有当选择器部分和左大括号之间有空格时，IE6-浏览器才支持。因为first-line中存在连接符的原因
示例:
div:first-line {color:red;}:before(IE7-浏览器不支持)
在元素内容的最开始插入生成内容
注意：默认这个伪元素是行内元素，且继承元素可继承的属性；IE7-浏览器中必须声明!DOCTYPE，否则不起作用
示例：
div:before{content:"前缀"}:after(IE7-浏览器不支持)
在元素内容的最后插入生成内容
注意：默认这个伪元素是行内元素，且继承元素可继承的属性；IE7-浏览器中必须声明!DOCTYPE，否则不起作用
示例：
div:after{content:"后缀"}::selection(IE8-浏览器不支持)
匹配被用户选择的部分
注意1：firefox浏览器需要添加-moz-前缀
注意2：只支持双冒号写法
注意3：只支持颜色和背景颜色两个样式
div::selection{color: red;}下面是伪类元素速查表：
/* Typographic Pseudo-elements */
::first-line /* 选取文字块首行字符 */
::first-letter /* 选取文字块首行首个字符 */
/* Highlight Pseudo-elements */
::selection /* 选取文档中高亮(反白)的部分*/
::inactive-selection /* 选取非活动状态时文档中高亮(反白)的部分*/
::spelling-error /* 选取被 UA 标记为拼写错误的文本 */
::grammar-error /* 选取被 UA 标记为语法错误的文本 */
/* Tree-Abiding Pseudo-elements */
::before /* 在选中元素中创建一个前置的子节点 */
::after /* 在选中元素中创建一个后置的子节点 */
::marker /* 选取列表自动生成的项目标记符号 */
::placeholder /* 选取字段的占位符文本(提示信息) */
/* WebVTT Format */
::cue /* 匹配所选元素中 WebVTT 提示 */
/* Fullscreen API */
::backdrop /* 匹配全屏模式下的背景 */注意提示
content属性
content属性应用于before和after伪元素。
content:normal;(默认)
content:<string>|<uri>|attr(<identifier>)【1】<string>里面的内容会原样显示，即使包含某种标记也不例外。
注意1：如果希望生成内容中有一个换行，则需要使用\A
注意2：若是一个很长的串，需要它拆分成多行则需要用\对换行符转义
div:before{
content: "第一段 第二段";
}
div:after{
content:"\A后缀";
}【2】
div:before{
content: url("arrow.gif");
}【3】attr(<identifier>)
div:before{
content: attr(data-before);
}下面是案例：
html代码：
<div class="box"></div>css代码：
/*使用before伪元素画圆*/
.box:before{
display:block;
content:"钉子";
height: 50px;
width: 50px;
border-radius: 50%;
background-color: black;
color: white;
font-weight:bold;
text-align: center;
line-height: 50px;
}
/*使用after伪元素画三角*/
.box:after{
display: block;
content: "";
width: 0;
height: 0;
border: 25px solid transparent;
border-top: 50px solid black;
margin-top: -20px;
}原文地址：https://www.cnblogs.com/h-kj9527/p/11428689.html