Web前端基础学习-3

Posted 2022-09-12 h-kj9527

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:beforecontent:"前缀"

:after(IE7-浏览器不支持)

在元素内容的最后插入生成内容

注意：默认这个伪元素是行内元素，且继承元素可继承的属性；IE7-浏览器中必须声明!DOCTYPE，否则不起作用

示例：

div:aftercontent:"后缀"

::selection(IE8-浏览器不支持)

匹配被用户选择的部分

注意1：firefox浏览器需要添加-moz-前缀

注意2：只支持双冒号写法

注意3：只支持颜色和背景颜色两个样式

div::selectioncolor: 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;