# qq

**Repository Path**: maojiayao/qq

## Basic Information

- **Project Name**: qq
- **Description**: wacai项目——qq注册页
- **Primary Language**: HTML
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-07-27
- **Last Updated**: 2021-11-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# qq

#### 介绍
wacai项目——qq注册页

### 常见问题

- Q：手机行的样式怎么实现？

  > A：手机号这行 select 和手机号输入框可以放在一个 div 里，然后固定 select 的宽度，把手机输入框浮动到右边，父元素 div 进行浮动清除
  >
  > - [QQ 手机行布局和样式(codepen)](https://codepen.io/qiujiayao/pen/pmrgNb)
  > - [calc 的使用方法](https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc)

- Q：浮动后块级元素的宽度还是原来的 100%吗？

  > A：块级元素 div 设置浮动属性后宽度就不再是 100%， 而是由内容撑开的。可以看下面这个例子。
  > [设置 float 属性后的 div 宽度变化](https://codepen.io/qiujiayao/pen/OYjMgL)

- Q：浮动的清除应该写在设置浮动的元素上吗？

  > A：不，应该写在设置浮动的元素的父元素上。

- Q：`text-align`可以作用在哪些元素上？

  > A：`span`、`img`。它不能使`div`元素居中。

- Q：如何使`div`元素居中？

  > A：使用`margin: 0 auto`。

- Q：为什么有时候`margin: 0 auto`不能使`div`居中

  > A：因为块级元素默认宽度是父元素宽度的 100%，只有给块级元素设置一个小于父元素宽度的宽度才能用`margin: 0 auto`使其居中。

- Q：什么是块级元素，什么是行内（内联）元素？

  > A：块级元素：块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”，通常浏览器会在块级元素前后另起一个新行。
  > 行内元素：一个行内元素只占据它对应标签的边框所包含的空间。
  > 区别：1、格式上：默认情况下，行内元素不会以新行开始，而块级元素会新起一行。2、盒模型属性上：行内元素设置 width 无效，height 无效(可以设置 line-height)，margin 上下无效，padding 上下无效。这个很重要！！！3、内容模型上：一般块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。
  > [块级元素](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Block-level_elements) > [行内元素](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Inline_elemente)

- Q：常见的块级元素有哪些？

  > A：div, header, nav, main, footer, section, ul, ol, li, h1-h6, p, section...

- Q：常见的行内（内联）元素有哪些？

  > A：b, strong, a, br, img, span, button, input, label, select, textarea...

- Q：`select`里`option`的`value`值要写吗？

  > A：要写的。比如：

  ```
  <select id="select">
    <option value="A" url="http://www.baidu.com">第一个option</option>
    <option value="B" url="http://www.qq.com">第二个option</option>
  </select>
  ```

  显示值为‘第一个 option’和‘第二个 option’，表单提交的时候提交值为`A`或`B`。

* Q：如何获取网页中的图片？

  > A：在新页面中打开图片，然后复制链接。

* Q：var, let 和 const？

  > A：var,let 用来声明变量，const 声明常量。var 存在[变量提升](https://developer.mozilla.org/zh-CN/docs/Glossary/Hoisting)，可以重复声明。let 和 const 不允许变量提升，不可以重复声明，有块级作用域。
  > 函数也存在变量提升。

* Q：`not defined`和`undefined`的区别

  > A：`not defined`指变量未声明，`undefined`指变量声明了，但尚未赋值。

* Q：`===`和`==`的区别

  > A：`==`， 两边值类型不同的时候，要先进行类型转换，再比较。 `===`，不做类型转换，类型不同的一定不等。`1 === '1'` 结果是`false`，`1 == '1'` 结果是`true`。

* Q：如何在页面中显示密码未填写提示？

  > A：思路：方法一：在页面中插入一个提示节点，内容为提示信息；方法二：预先在页面中写好一个没有内容的空节点，当用户未填写的时候，将空节点的内容改为提示信息。
  >
  > - [QQ 密码未填写提示(codepen)](https://codepen.io/qiujiayao/pen/RmQVwy?editors=1010)

  - 左边的大图如果设置了 position:fixed 可以不用再设置 float:left
  - footer 用 margin： x auto 居中之后需要用 text-align:center 让其中的文字居中。
  - 浮动的清除需要加在设置（如下）浮动的父元素上
  - qq 注册页表单主体部分输入框比 form 的宽度要宽，这个是因为输入框的宽度为设置宽度 438px + 边框宽度 2px + 左右 padding。可以查一下 box-sizing 这个属性。
  - 手机号这一行 select 和 input 的高度差了两像素，可以查一下 box-sizing 这个属性。
  - <div></div>元素不需要设置宽度为100%，因为div默认宽度为100%。
  - apple 页面，如果要“<广告>”两个字到右边不需要用 float:right，只需要给外层<div></div>设置 text-align:right 就可以啦。

  - [navQQ 靓号参考](https://codepen.io/qiujiayao/pen/XwzRXe?editors=1100)；
  - [整体布局参考](https://codepen.io/qiujiayao/pen/dEzBjR)；
  - [表单布局参考](https://codepen.io/qiujiayao/pen/oRQVGX)；
  - [box-sizing](https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing)；