web前段

轮廓线：概述：轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。 轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。

• 轮廓样式 outline-style

• 轮廓颜色 outline-color

• 轮廓宽度 outline-width

• 语法：空格隔开

文本域的resize属性：用户是否可以对元素尺寸进行调整

• resize: none; 不允许用户手动调整元素的尺寸

• resize: both; 用户可以调整元素的宽度和高度

• resize: horizontal; 用户可以调整元素的宽度

• resize: vertical; 用户可以调整元素的高度

css鼠标样式 通过在CSS中，cursor属性指定鼠标指针放在一个元素边界范围内时所用的光标形状

• 常用值

  • 默认值：auto

  • default 通常是一个箭头

  • text 显示为光标

  • pointer 光标呈现为指示链接的指针（一只手）

  • move 此光标指示某对象可被移动。

css块级格式化 

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box(块级标签)参与， 它规定了内部的Block-level Box(块级标签)如何布局，并且与这个区域外部毫不相干。

通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

怎样生成BFC

• 根标签（html标签）

• float的值不为none

• overflow 的值不为 visible

• display 的值为 inline-block

• position 的值为 absolute 或 fixed

BFC的特性

1、内部的标签默认会在垂直方向上一个接一个的放置。

2、垂直方向上的距离由margin决定，属于同一个BFC的两个相邻标签的margin会发 生重叠。

3、每个标签的左外边距与包含块的左边界相接触（从左向右），即使浮动标签也是如此。

4、BFC 的区域不会与 float 的标签区域重叠。

5、计算BFC的髙度时，浮动子标签也参与计算。

6、BFC就是页面上的一个隔离的独立容器，容器里面的子标签不会影响到外面标签， 反之亦然。

2.兄弟塌陷

原因：垂直方向上的距离由margin决定，属于同一个BFC的两个相邻标签的margin会发 生重叠

解决办法(特性6)： BFC就是一个独立的容器，容器内部的元素不会影响到容器外面 反之亦然

触发bfc只有overflow属性能用

3.防止字体环绕

原因：浮动 不会脱离文本流 浮动的盒子会遮盖下面的盒子，但是下面盒子里的文字是不会被遮盖的，文字 反而还会环绕浮动的盒子。

解决办法(特性6，4)：bfc就是页面上的一个独立容器，容器里面的子标签不会影响外面标签

BFC 的区域不会与 float 的标签区域重叠

触发bfc除了（绝对，固定定位）属性其余都能用

4.两栏自适应

两栏自适应：左侧固定宽度 右侧自适应的状态 随着浏览器的窗口改变大小（左侧浮动，右侧触发BFC）

原因：浮动的标签提升层级会覆盖正常标签,脱离标准流不会脱离文本流

解决办法(特性6，4)：bfc就是页面上的一个独立容器，容器里面的子标签不会影响外面标签

BFC 的区域不会与 float 的标签区域重叠

触发bfc的条件 触发bfc只有overflow属性能用