webcourse/Webcourse
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update: 字体加粗属性

Browse Source
This commit is contained in:
qianguyihao 2019-10-05 11:59:34 +08:00
parent 5d97750592
commit 2f436f2dbe
20 changed files with 458 additions and 434 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
02-CSS基础/01-CSS属性：字体属性和文本属性.md
View File

@ -39,12 +39,25 @@ html中的单位只有一种，那就是像素px，所以单位是可以省略
![](http://img.smyhvae.com/2015-10-03-css-17.png) ![](http://img.smyhvae.com/2015-10-03-css-17.png)
## 字体属性 ## font 字体属性
CSS中，有很多**非布局样式**（与布局无关），包括：字体、行高、颜色、大小、背景、边框、滚动、换行、装饰性属性（粗体、斜体、下划线）等。 CSS中，有很多**非布局样式**（与布局无关），包括：字体、行高、颜色、大小、背景、边框、滚动、换行、装饰性属性（粗体、斜体、下划线）等。
这一段，我们先来讲一下字体属性。 这一段，我们先来讲一下字体属性。
css样式中，常见的字体属性有以下几种：
```css
p{
font-size: 50px; /*字体大小*/
line-height: 30px; /*行高*/
font-family: 幼圆,黑体; /*字体类型：如果没有幼圆就显示黑体，没有黑体就显示默认*/
font-style: italic ; /*italic表示斜体，normal表示不倾斜*/
font-weight: bold; /*粗体*/
font-variant: small-caps; /*小写变大写*/
}
```
### 行高 ### 行高
CSS中，所有的行，都有行高。盒子模型的padding，绝对不是直接作用在文字上的，而是作用在“行”上的。 CSS中，所有的行，都有行高。盒子模型的padding，绝对不是直接作用在文字上的，而是作用在“行”上的。
@ -76,24 +89,7 @@ vertical-align: middle; /*指定行内元素（inline）或表格单元格（tab
``` ```
### font字体属性 ### 字号、行高、字体三大属性
css样式中，字体属性有以下几种：
```html
p{
font-size:50px; /*字体大小*/
line-height: 30px; /*行高*/
font-family:幼圆,黑体; /*字体类型：如果没有幼圆就显示黑体，没有黑体就显示默认*/
font-style:italic ; /*italic表示斜体，normal表示不倾斜*/
font-weight:bold; /*粗体：属性值写成bolder也可以*/
font-variant:small-caps; /*小写变大写*/
}
```
上面这些属性中，字号、行高、字体这三个属性是最常见的。我们继续看。
**1、字号、行高、字体三大属性：**
（1）字号： （1）字号：
@ -117,7 +113,6 @@ p{
格式： 格式：
``` ```
font: 加粗 字号/行高/ 字体 font: 加粗 字号/行高/ 字体
@ -134,7 +129,6 @@ PS：400是nomal，700是bold。
上面这几个属性可以连写，但是有一个要求，font属性连写至少要有**字号和字体**，否则连写是不生效的（相当于没有这一行代码）。 上面这几个属性可以连写，但是有一个要求，font属性连写至少要有**字号和字体**，否则连写是不生效的（相当于没有这一行代码）。
**2、字体属性的说明：** **2、字体属性的说明：**
（1）网页中不是所有字体都能用，因为这个字体要看用户的电脑里面装没装，比如你设置： （1）网页中不是所有字体都能用，因为这个字体要看用户的电脑里面装没装，比如你设置：
@ -143,11 +137,11 @@ PS：400是nomal，700是bold。
font-family: "华文彩云"; font-family: "华文彩云";
``` ```
上方代码中，如果用户电脑里面没有这个字体，那么就会变成宋体。 上方代码中，如果用户的 Windows 电脑里面没有这个字体，那么就会变成宋体。
页面中，中文我们只使用：微软雅黑、宋体、黑体。英文使用：Arial、Times New Roman。页面中如果需要其他的字体，就需要切图。 页面中，中文我们一般使用：微软雅黑、宋体、黑体。英文使用：Arial、Times New Roman。页面中如果需要其他的字体，就需要单独安装字体，或者切图。
（2）为了防止用户电脑里，没有微软雅黑这个字体。就要用英语的逗号，隔开备选字体。如下：（可以备选多个） （2）为了防止用户电脑里，没有微软雅黑这个字体。就要用英语的逗号，提供备选字体。如下：（可以备选多个）
``` ```
font-family: "微软雅黑","宋体"; font-family: "微软雅黑","宋体";
@ -200,6 +194,20 @@ PS：400是nomal，700是bold。
反过来， `font:16px/48px “宋体”;`等价于`font:16px/300% “宋体”`。 反过来， `font:16px/48px “宋体”;`等价于`font:16px/300% “宋体”`。
### 字体加粗属性
```css
.div {
font-weight: normal; /*正常*/
font-weight: bold; /*加粗*/
font-weight: 100;
font-weight: 200;
font-weight: 900;
}
```
在设置字体是否加粗时，属性值既可以填写`normal`、`bold`这样的加粗字体，也可以直接填写 100至900 这样的数字。`normal`的值相当于400，`bold`的值相当于700。
## 文本属性 ## 文本属性
@ -207,7 +215,7 @@ CSS样式中，常见的文本属性有以下几种：
- `letter-spacing: 0.5cm ;` 单个字母之间的间距 - `letter-spacing: 0.5cm ;` 单个字母之间的间距
- `word-spacing: 1cm;` 单词之间的间距 - `word-spacing: 1cm;` 单词之间的间距
- `text-decoration: none;` 字体修饰：none去掉下划线、**underline下划线**、line-through中划线、overline上划线、 - `text-decoration: none;` 字体修饰：none 去掉下划线、**underline 下划线**、line-through 中划线、overline 上划线
- `text-transform: lowercase;` 单词字体大小写。uppercase大写、lowercase小写 - `text-transform: lowercase;` 单词字体大小写。uppercase大写、lowercase小写
- `color:red;` 字体颜色 - `color:red;` 字体颜色
- `text-align: center;` 在当前容器中的对齐方式。属性值可以是：left、right、center（<font color="#0000FF">**在当前容器的中间**</font>）、justify - `text-align: center;` 在当前容器中的对齐方式。属性值可以是：left、right、center（<font color="#0000FF">**在当前容器的中间**</font>）、justify
@ -219,7 +227,7 @@ CSS样式中，常见的文本属性有以下几种：
## 列表属性 ## 列表属性
```html ```css
ul li{ ul li{
list-style-image:url(images/2.gif) ; /*列表项前设置为图片*/ list-style-image:url(images/2.gif) ; /*列表项前设置为图片*/
margin-left:80px; /*公有属性*/ margin-left:80px; /*公有属性*/
@ -244,11 +252,10 @@ ul li{
`overflow`属性的属性值可以是： `overflow`属性的属性值可以是：
- `auto`：浏览器自己解决。在必需时裁切对象多余的内容或显示滚动条。一般采用这个属性值。
- `visible`：默认值。多余的内容不剪切也不添加滚动条，会全部显示出来。 - `visible`：默认值。多余的内容不剪切也不添加滚动条，会全部显示出来。
- `hidden`：不显示超过对象尺寸的内容。 - `hidden`：不显示超过对象尺寸的内容。
对象将以包含对象的 window 或 frame 的尺寸进行裁切，并且 clip 属性设置将失效。 - `auto`：如果内容不超出，则不显示滚动条；如果内容超出，则显示滚动条。
- `scroll`：总是显示滚动条。 - `scroll`：Windows 平台下，无论内容是否超出，总是显示滚动条。Mac 平台下，和 `auto` 属性相同。
针对上面的不同的属性值，我们来看一下效果： 针对上面的不同的属性值，我们来看一下效果：
举例： 举例：
@ -439,10 +446,8 @@ p:hover{
## 我的公众号 ## 我的公众号
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： 扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/2016040102.jpg) ![](http://img.smyhvae.com/20190101.png)

4
02-CSS基础/02-CSS属性：背景属性.md
View File

@ -356,8 +356,8 @@ PS：以后的CSS3内容中，我们会接触到更多的background属性： bac
## 我的公众号 ## 我的公众号
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： 扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/2016040102.jpg) ![](http://img.smyhvae.com/20190101.png)

5
02-CSS基础/03-CSS样式表和选择器.md
View File

@ -957,11 +957,10 @@ div的儿子p。和div的后代p的截然不同。
这种选择器作用不大。 这种选择器作用不大。
## 我的公众号 ## 我的公众号
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： 扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/cnblogs/%E7%94%9F%E5%91%BD%E5%9B%A2%E9%98%9F%E5%85%AC%E4%BC%97%E5%8F%B7%E4%BA%8C%E7%BB%B4%E7%A0%81.jpg) ![](http://img.smyhvae.com/20190101.png)

4
02-CSS基础/04-CSS选择器：伪类.md
View File

@ -330,8 +330,8 @@ a标签有4种伪类（即对应四种状态），要求背诵。如下：
## 我的公众号 ## 我的公众号
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： 扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/2016040102.jpg) ![](http://img.smyhvae.com/20190101.png)

4
02-CSS基础/05-CSS样式表的继承性和层叠性.md
View File

@ -389,8 +389,8 @@ ul li:last-child
## 我的公众号 ## 我的公众号
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： 扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/2016040102.jpg) ![](http://img.smyhvae.com/20190101.png)

4
02-CSS基础/06-CSS盒模型详解.md
View File

@ -529,10 +529,10 @@ div{
## 我的公众号 ## 我的公众号
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： 扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/2016040102.jpg) ![](http://img.smyhvae.com/20190101.png)

7
02-CSS基础/07-浮动.md
View File

@ -965,15 +965,12 @@ text-indent: 2em;
上方属性中，单位比较奇怪，叫做em，em就是汉字的一个宽度。indent的意思是缩进。 上方属性中，单位比较奇怪，叫做em，em就是汉字的一个宽度。indent的意思是缩进。
## 我的公众号 ## 我的公众号
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： 扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/2016040102.jpg) ![](http://img.smyhvae.com/20190101.png)

5
02-CSS基础/08-CSS属性：定位属性.md
View File

@ -518,11 +518,10 @@ z-index属性的应用还是很广泛的。当好几个已定位的标签出现
（2）用`z-index`来控制层级数。 （2）用`z-index`来控制层级数。
## 我的公众号 ## 我的公众号
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： 扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/2016040102.jpg) ![](http://img.smyhvae.com/20190101.png)

10
02-CSS基础/09-CSS案例讲解：博雅互动.md
View File

@ -469,4 +469,12 @@
工程文件如下： 工程文件如下：
- [2018-03-20-boya.rar](待审核通过) - [2018-03-20-boya.rar](https://download.csdn.net/download/smyhvae/11832612)
## 我的公众号
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/20190101.png)

5
02-CSS基础/11-CSS3选择器详解.md
View File

@ -492,9 +492,8 @@ CSS3又新增了其它的伪类选择器。这一小段，我们来学习CSS3中
## 我的公众号 ## 我的公众号
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： 扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/2016040102.jpg) ![](http://img.smyhvae.com/20190101.png)

5
02-CSS基础/12-CSS3属性详解（一）.md
View File

@ -799,9 +799,8 @@ CSS3的更多属性，且看下文继续。
## 我的公众号 ## 我的公众号
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： 扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/2016040102.jpg) ![](http://img.smyhvae.com/20190101.png)

9
02-CSS基础/13-CSS3属性详解：动画详解.md
View File

@ -1436,17 +1436,12 @@ PS：图片的url是<http://img.smyhvae.com/20180209_1245.gif>，图片较大，
## 我的公众号 ## 我的公众号
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： 扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/2016040102.jpg) ![](http://img.smyhvae.com/20190101.png)

8
02-CSS基础/14-CSS3属性详解：flex布局.md
View File

@ -601,6 +601,14 @@ PS：主轴和侧轴并不是固定不变的，通过flex-direction可以互换
## 我的公众号
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/20190101.png)

8
02-CSS基础/15-CSS3属性详解：Web字体.md
View File

@ -371,6 +371,14 @@ SVG素材：
## 我的公众号
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/20190101.png)

12
03-CSS进阶/00-准备.md
View File

@ -50,7 +50,7 @@ css 进阶的主要内容如下。
> 不会 css 的前端称之为伪前端。 > 不会 css 的前端称之为伪前端。
- html 元素的嵌套关系是怎么确定的？那些嵌套不可以发生？ - html 元素的嵌套关系是怎么确定的？哪些嵌套不可以发生？
- 比如说，为什么 div 可以放在 a 标签里面？ - 比如说，为什么 div 可以放在 a 标签里面？
@ -64,13 +64,7 @@ css 进阶的主要内容如下。
- 如何解决 css 模块化过程中的选择器互相干扰的问题？ - 如何解决 css 模块化过程中的选择器互相干扰的问题？
## 总结
单独看 css 属性并不难，难的是需要把这些思路和思想，想到它的应用场景。

49
03-CSS进阶/02-CSS中的非布局样式.md
View File

@ -31,7 +31,6 @@ CSS中，有很多**非布局样式**，这些样式（属性）和与布局无
- San Francisco：Mac & iOS 平台的英文字体 - San Francisco：Mac & iOS 平台的英文字体
- [思源黑体](https://baike.baidu.com/item/%E6%80%9D%E6%BA%90%E9%BB%91%E4%BD%93/14919098)。是 Adobe 和 Google 在2014年7月联合推出的一款开源字体。 - [思源黑体](https://baike.baidu.com/item/%E6%80%9D%E6%BA%90%E9%BB%91%E4%BD%93/14919098)。是 Adobe 和 Google 在2014年7月联合推出的一款开源字体。
补充： 补充：
（1）海报设计、PPT不要用宋体。 （1）海报设计、PPT不要用宋体。
@ -74,7 +73,6 @@ css 中的字体族可以理解成是某一类字体。常见的字体族可以
（2）有些 Mac 用户会安装 Office 等软件，安装这些软件后，系统会顺带安装微软雅黑字体。此时，写 css 代码时，如果写成 `"Microsoft Yahei", "PingFang SC"`这种顺序，可能导致有些 Mac 用户用微软雅黑来显示字体。 （2）有些 Mac 用户会安装 Office 等软件，安装这些软件后，系统会顺带安装微软雅黑字体。此时，写 css 代码时，如果写成 `"Microsoft Yahei", "PingFang SC"`这种顺序，可能导致有些 Mac 用户用微软雅黑来显示字体。
### 其他 ### 其他
- 网络字体 - 网络字体
@ -85,17 +83,40 @@ css 中的字体族可以理解成是某一类字体。常见的字体族可以
如何用边框画一个三角形？详见《02-CSS基础/06-CSS盒模型详解》中的最后一段。 如何用边框画一个三角形？详见《02-CSS基础/06-CSS盒模型详解》中的最后一段。
## 文字换行
- ovferflow-wrap：通用的属性。用来说明当一个不能被分开的字符串（单词）太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词**中断换行**。
- word-break：指定了怎样在单词内断行。这里涉及到CJK（中文/日文/韩文）的文字换行。
- white-space：空白处是否换行。
上面这三个 css 属性进行组合，可以设置各种不同的属性。
当然，如果想让一段很长的文本不换行，可以直接设置`white-space: nowrap` 这一个属性即可。
## 常见的字体&文本属性
```css
font-style: italic; /* italic表示斜体，normal表示不倾斜*/
font-weight: bold; /* 字体加粗，100至900 */
text-decoration: underline; /* 下划线 */
cursor: pointer; /*鼠标悬停时，光标显示为手形*/
```
`font-weight`属性：在设置字体是否加粗时，属性值既可以填写`normal`、`bold`这样的加粗字体，也可以直接填写 100至900 这样的数字。`normal`的值相当于400，`bold`的值相当于700。
## CSS Hack
- CSS Hack 的方式：不合法但可以生效的写法。
- 可以用来解决一些浏览器的兼容性问题。
- 缺点：难理解、难维护、易失效（比如浏览器升级后，hack可能会失效）。
- 替代方案：特性检测。
- 替代方案：针对性加 class

115
03-CSS进阶/CSS面试题.md Normal file
View File

@ -0,0 +1,115 @@
## 常见问题
### 你是如何理解 HTML 语义化的？
**语义化**：指对文本内容的结构化（内容语义化），选择合乎语义的标签（代码语义化）。
**举例**：段落用 p，边栏用 aside，主要内容用 main 标签。
**好处：**
- 便于开发者阅读和维护
- 有利于SEO：让浏览器的爬虫和辅助技术更好的解析，
**语义化标签介绍**：
在HTML5出来之前，我们习惯于用div来表示页面的章节或者不同模块，但是`div`本身是没有语义的。但是现在，HTML5中加入了一些语义化标签，来更清晰的表达文档结构。
20180322_1120.jpg
参考链接：
- [初探 · HTML5语义化](https://zhuanlan.zhihu.com/p/32570423)
### meta viewport 是做什么用的，怎么写？
```html
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
```
控制页面在移动端不要缩小显示。
### canvas 元素是干什么的？
看 MDN 的 [canvas 入门手册](https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API)。
### 说一下CSS盒模型
可以参考本人的另外一篇文章：《02-CSS基础/06-CSS盒模型详解》。
### css reset 和 Normalize.css 有什么区别
> 此题考英文。
二者都是用来**统一**浏览器的默认样式：
- reset：重置。相对「暴力」，不管你有没有用，统统重置成一样的效果，且影响的范围很大，讲求跨浏览器的一致性。（一刀切）
- `Normalize.css` ：标准化。相对「平和」，注重通用的方案，重置掉该重置的样式，保留有用的 user agent 样式，同时进行一些 bug 的修复，这点是 reset 所缺乏的。（去伪存真）
参考链接：
- [Normalize.css 与传统的 CSS Reset 有哪些区别？](https://p.baidu.com/question/ab496162636234613761335c00)
- [CSS3初始化代码Normalize.css中文版](http://www.bbsxiaomi.com/html_css/html5_css3/177.html)
- [谈谈一些有趣的 CSS 话题](https://github.com/chokcoco/iCSS)
- [前端面试之CSS总结(上)](https://segmentfault.com/a/1190000006890725)
### 选择器的优先级如何确定
- 选择器越具体，优先级越高。 #xxx 大于 .yyy
- 同样优先级，写在后面的覆盖前面的。
- color: red !important; 优先级最高。
### BFC 是什么
overflow:hidden ：取消父子 margin 合并。 （另一种推荐做法：`padding-top: 0.1px;`）
### 如何清除浮动
（1）overflow: hidden
（2）.clearfix 清除浮动写在爸爸身上
```css
.clearfix::after {
content: '';
display: block;
clear: both;
}
/* 兼容 IE */
.clearfix {
zoom: 1;
}
```
### 伪类和伪元素的区别是什么？
概念上的区别：
- 伪类表示一种状态
- 伪元素是真的有元素。比如 ::after 是真的有元素，可以在页面上显示内容。
使用上的区别：
- 伪类：使用单冒号
- 伪元素：使用双冒号
## 参考链接
- [互联网公司招聘启事的正确阅读方式](https://zhuanlan.zhihu.com/p/33998813)

135
15-面试题积累/02-HTML和CSS相关.md → 03-CSS进阶/如何居中.md
View File

@ -1,95 +1,12 @@
## HTML 相关
### 你是如何理解 HTML 语义化的？
**语义化**：指对文本内容的结构化（内容语义化），选择合乎语义的标签（代码语义化）。
**举例**：段落用 p，边栏用 aside，主要内容用 main 标签。
**好处：**
- 便于开发者阅读和维护
- 有利于SEO：让浏览器的爬虫和辅助技术更好的解析，
**语义化标签介绍**：
在HTML5出来之前，我们习惯于用div来表示页面的章节或者不同模块，但是`div`本身是没有语义的。但是现在，HTML5中加入了一些语义化标签，来更清晰的表达文档结构。
20180322_1120.jpg
参考链接：
- [初探 · HTML5语义化](https://zhuanlan.zhihu.com/p/32570423)
### meta viewport 是做什么用的，怎么写？
```html
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
```
控制页面在移动端不要缩小显示。
### canvas 元素是干什么的？
看 MDN 的 [canvas 入门手册](https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API)。
## 说一下CSS盒模型
可以参考本人的另外一篇文章：[CSS盒模型及BFC](https://github.com/smyhvae/Web/blob/master/18/02-CSS%E7%9B%92%E6%A8%A1%E5%9E%8B%E5%8F%8ABFC.md)
### css reset 和 Normalize.css 有什么区别
> 此题考英文。
二者都是用来**统一**浏览器的默认样式：
- reset：重置。相对「暴力」，不管你有没有用，统统重置成一样的效果，且影响的范围很大，讲求跨浏览器的一致性。（一刀切）
- `Normalize.css` ：标准化。相对「平和」，注重通用的方案，重置掉该重置的样式，保留有用的 user agent 样式，同时进行一些 bug 的修复，这点是 reset 所缺乏的。（去伪存真）
参考链接：
- [Normalize.css 与传统的 CSS Reset 有哪些区别？](https://p.baidu.com/question/ab496162636234613761335c00)
- [CSS3初始化代码Normalize.css中文版](http://www.bbsxiaomi.com/html_css/html5_css3/177.html)
- [谈谈一些有趣的 CSS 话题](https://github.com/chokcoco/iCSS)
- [前端面试之CSS总结(上)](https://segmentfault.com/a/1190000006890725)
## 如何居中（必考） ## 如何居中（必考）
### 水平居中 ### 水平居中
1、**行内元素：**（文字、图片等水平居中） 1、**行内元素：**（文字、图片等水平居中）
给父亲设置： 给父亲设置：
``` ```
text-align: center; text-align: center;
@ -228,9 +145,6 @@ html代码：
``` ```
效果： 效果：
![](http://img.smyhvae.com/20180322_1833.png) ![](http://img.smyhvae.com/20180322_1833.png)
@ -247,17 +161,12 @@ html代码：
} }
``` ```
代码两个关键点： 代码两个关键点：
- 上下左右均0位置定位； - 上下左右均0位置定位；
- margin: auto - margin: auto
**方式三：**用绝对定位 + translate 位移来做 **方式三：**用绝对定位 + translate 位移来做
```css ```css
@ -269,7 +178,6 @@ html代码：
} }
``` ```
**方式四：**flex 布局 **方式四：**flex 布局
```css ```css
@ -280,52 +188,9 @@ html代码：
} }
``` ```
参考链接： 参考链接：
- [七种方式实现垂直居中](https://jscode.me/t/topic/1936) - [七种方式实现垂直居中](https://jscode.me/t/topic/1936)
- [margin:auto实现绝对定位元素的水平垂直居中](http://www.zhangxinxu.com/wordpress/2013/11/margin-auto-absolute-%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D-%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/) - [margin:auto实现绝对定位元素的水平垂直居中](http://www.zhangxinxu.com/wordpress/2013/11/margin-auto-absolute-%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D-%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/)
## 选择器的优先级如何确定
- 选择器越具体，优先级越高。 #xxx 大于 .yyy
- 同样优先级，写在后面的覆盖前面的。
- color: red !important; 优先级最高。
## BFC 是什么
overflow:hidden ：取消父子 margin 合并。 （另一种推荐做法：`padding-top: 0.1px;`）
## 如何清除浮动
（1）overflow: hidden
（2）.clearfix 清除浮动写在爸爸身上
```css
.clearfix::after {
content: '';
display: block;
clear: both;
}
/* 兼容 IE */
.clearfix {
zoom: 1;
}
```
## 参考链接
- [互联网公司招聘启事的正确阅读方式](https://zhuanlan.zhihu.com/p/33998813)

5
18-推荐链接/04-网站推荐.md
View File

@ -23,3 +23,8 @@ css的各种效果实现（尤其是动画效果），关键时刻能救命。
- github排行：<http://githubrank.com/> - github排行：<http://githubrank.com/>
### 2019-10-05
- 现代 JavaScript 教程：<https://zh.javascript.info/>

7
18-推荐链接/2019-推荐文章.md
View File

@ -18,3 +18,10 @@
- [https://www.yuque.com/sxc/front/kvokg4](https://www.yuque.com/sxc/front/kvokg4) - [https://www.yuque.com/sxc/front/kvokg4](https://www.yuque.com/sxc/front/kvokg4)
作者在语雀上的系列文章，都值得一看。 作者在语雀上的系列文章，都值得一看。
### 2019-10-05
- [前端学习网站和资源推荐](https://www.twblogs.net/a/5d400329bd9eee51fbf962b2)
作者整理的一些基础性的学习资源，还可以。