前端第十二天-CSDN博客

本文链接：https://blog.csdn.net/a2167321334/article/details/126220703

本文详细介绍了HTML中的文本框和按钮对齐问题的解决方案，以及CSS用户界面属性如轮廓线、文本域的resize属性和鼠标样式的设定。此外，深入探讨了BFC（块级格式化上下文）的概念、生成方式及其在清除浮动、防止margin塌陷和阻止文本环绕等方面的应用。最后，提到了HTML参考手册的重要性，并提供了相关网址。

摘要由CSDN通过智能技术生成

# 一、文本框和按钮不对齐现象(高度得设置一样)

- input 设置左浮动 (float:left)。

取消input 默认的2px边框和上下1px内边距

设置1px的边框

设置高

- button设置高度比input的高度大2px

```html

input {

/* 直接设置1px边框覆盖 */

border: 1px solid red;

/* 取消默认的上下1px内边距 */

padding: 0;

height: 60px;

float: left;

}

button,

.sub,

.sub1 {

height: 62px;

}

按钮：

```

# 二、CSS 用户界面属性

## 轮廓线

概述：轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。

输入框边缘外的线

outline简写

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

- 可以设置的属性分别是（按顺序）：

outline-color, outline-style, outline-width

- 说明：

- 轮廓样式 outline-style

- 轮廓颜色 outline-color

- 轮廓宽度 outline-width

- 语法：空格隔开

- 取值：参考边框

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

```css

input, textarea {

/* 清除轮廓线 */

outline: none;

/* 设置轮廓线 */

outline: 1px solid red;

}

```

## 用户界面

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

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

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

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

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

## CSS 鼠标样式

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

- 常用值

- 默认值：auto

- default 通常是一个箭头

- text 显示为光标

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

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

- 其他值

```html

e-resize 此光标指示矩形框的边缘可被向右（东）移动。

ne-resize 此光标指示矩形框的边缘可被向上及向右移动（北/东）。

nw-resize 此光标指示矩形框的边缘可被向上及向左移动（北/西）。

n-resize 此光标指示矩形框的边缘可被向上（北）移动。

se-resize 此光标指示矩形框的边缘可被向下及向右移动（南/东）。

sw-resize 此光标指示矩形框的边缘可被向下及向左移动（南/西）。

s-resize 此光标指示矩形框的边缘可被向下移动（南）。

w-resize 此光标指示矩形框的边缘可被向左移动（西）。

text 此光标指示文本。

wait 此光标指示程序正忙（通常是一只表或沙漏）。

help 此光标指示可用的帮助（通常是一个问号或一个气球）。

```

```html

<ul>

<li style="cursor:crosshair">Crosshair</li>

<li style="cursor:default"> Default</li>

<li style="cursor:pointer"> Pointer</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>

</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的几个条件都可以用

```html

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.wrap {

width: 400px;

/* height: 300px; */

background-color: pink;

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

/* overflow: hidden;

overflow: scroll;

overflow: auto;

float: left;

float: right; */

/* display: inline-block; */

/* position: absolute; */

position: fixed;

}

.wrap div {

width: 100px;

height: 100px;

background-color: yellowgreen;

float: left;

}

.wrap .box2 {

background-color: tomato;

}

</style>

</head>

<body>

</div>

</body>

</html>

```

##### 2.兄弟塌陷

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

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

触发bfc只有overflow属性能用

```html

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.box1,

.box2 {

width: 200px;

height: 200px;

}

.box1 {

background-color: tomato;

margin-bottom: 100px;

}

.box2 {

background-color: green;

margin-top: 100px;

margin-top: 200px;

}

/* 解决方法，给盒子套一个父盒子，加 overflow: hidden;*/

.father {

/* 触发bfc */

overflow: hidden;

overflow: scroll;

overflow: auto;

}

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

</style>

</head>

<body>

</div>

</div>

<!-- 兄弟关系外间距塌陷问题

现象：元素呈并列关系，在垂直方向相邻的margin外间距相遇，会出现叠加现象；

两个值一样大，取当前值

两个值不同，取较大值

原因：并列关系的两个元素共用了一个外间距区域

解决办法：

分别给这两个元素套一个父元素，并为父元素设置overflow:'hidden' -->

</body>

</html>

```

##### 3.防止字体环绕

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

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

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

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

```html

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.wrap {

width: 700px;

height: 500px;

border: 2px solid red;

}

.wrap .box1 {

width: 200px;

height: 200px;

background: pink;

float: left;

}

.wrap .box2 {

width: 300px;

height: 200px;

background: yellowgreen;

/* 触发bfc */

/* float: left;

float: right; */

overflow: hidden;

overflow: scroll;

overflow: auto; */

display: inline-block;

/* 不能用 */

/* position: absolute;

position: fixed; */

}

</style>

</head>

<body>

<div class="box2">box23.防止字体环绕3.防环绕3.防环绕3.防止字体环绕</div>

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

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

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

</div>

</body>

</html>

```

##### 4.两栏自适应

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

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

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

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

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

* 两栏自适应

```html

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.wrap .left {

width: 200px;

height: 300px;

background-color: red;

float: left;

}

.wrap .right {

height: 350px;

background-color: aquamarine;

/* 触发bfc */

overflow: hidden;

overflow: scroll;

overflow: auto;

/* 以下不能用 */

/* float: left;

float: right; */

/* display: inline-block; */

/* position: absolute;

position: fixed; */

}

</style>

</head>

<body>

<div class="right">出师表出师表出师出师表出师出师表出师出师表出师出师表出师出师表出师出师表出师出师表出师出师表出师表出师表出师表</div>

</div>

</body>

</html>

```

# HTML参考手册

- 作用

- 帮助我们快速查阅完整的html元素并给出目标元素的相应释义

- 方便我们学习和使用

- 经常查阅文档是一个好的学习习惯

- 推荐的网址

- W3C : http://www.w3school.com.cn/

- MDN: https://developer.mozilla.org/zh-CN/

扩展

```html

word-wrap: break-word; 单词,数字强制换行

white-space: nowrap; 文字强制不换行

```