Web前端基础学习-3

bfc（block formatting context）

块级格式化上下文

生成bfc的方式：

一、根元素；

二、float属性不为none（脱离文档流）；

三、position为absolute或者fixed的时候；

四、display为inline-block、table-cell、table-caption、flex、inline-flex；

五、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; }