CSS 用户界面属性

轮廓线

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

输入框边缘外的线

outline简写

• 在一个声明中设置所有的轮廓属性。

• 可以设置的属性分别是（按顺序）： outline-color, outline-style, outline-width

• 说明：

  • 轮廓样式 outline-style

  • 轮廓颜色 outline-color

  • 轮廓宽度 outline-width

  • 语法：空格隔开

• 取值：参考边框

• 清除设置 input ，textarea的轮廓线

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

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

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

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

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

CSS 鼠标样式

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

• 常用值

  • 默认值：auto

  • default 通常是一个箭头

  • text 显示为光标

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

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

• 其他值

  e-resize    此光标指示矩形框的边缘可被向右（东）移动。
  ne-resize   此光标指示矩形框的边缘可被向上及向右移动（北/东）。
  nw-resize   此光标指示矩形框的边缘可被向上及向左移动（北/西）。
  n-resize    此光标指示矩形框的边缘可被向上（北）移动。
  se-resize   此光标指示矩形框的边缘可被向下及向右移动（南/东）。
  sw-resize   此光标指示矩形框的边缘可被向下及向左移动（南/西）。
  s-resize    此光标指示矩形框的边缘可被向下移动（南）。
  w-resize    此光标指示矩形框的边缘可被向左移动（西）。
  text    此光标指示文本。
  wait    此光标指示程序正忙（通常是一只表或沙漏）。
  help    此光标指示可用的帮助（通常是一个问号或一个气球）。

 <ul>
        <li style="cursor:auto">auto</li>
        <li style="cursor:crosshair">Crosshair</li>
        <li style="cursor:default"> Default</li>
        <li style="cursor:pointer"> Pointer</li>
        <li style="cursor:move"> Move</li>
        <li style="cursor:e-resize"> e-resize</li>
        <li style="cursor:ne-resize"> ne-resize</li>
        <li style="cursor:nw-resize"> nw-resize</li>
        <li style="cursor:n-resize"> n-resize</li>
        <li style="cursor:se-resize"> se-resize</li>
        <li style="cursor:sw-resize"> sw-resize</li>
        <li style="cursor:s-resize"> s-resize</li>
        <li style="cursor:w-resize"> w-resize</li>
        <li style="cursor:text"> text</li>
        <li style="cursor:wait"> wait</li>
        <li style="cursor:help"> help</li>
    </ul>

三、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就是页面上的一个隔离的独立容器，容器里面的子标签不会影响到外面标签， 反之亦然。

BFC解决的问题

1.清除浮动

原因： 浮动会让其所在的父元素撑不起来高度

解决办法(特性5)：计算BFC的髙度时，浮动子标签也参与计算。

触发bfc的几个条件都可以用