update: 字体加粗属性
This commit is contained in:
qianguyihao
parent
5d97750592
commit
2f436f2dbe
@ -39,12 +39,25 @@ html中的单位只有一种，那就是像素px，所以单位是可以省略
|
||||
|
||||
|
||||
|
||||
## 字体属性
|
||||
## font 字体属性
|
||||
|
||||
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，绝对不是直接作用在文字上的，而是作用在“行”上的。
|
||||
@ -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）字号：
|
||||
|
||||
@ -117,7 +113,6 @@ p{
|
||||
|
||||
格式：
|
||||
|
||||
|
||||
```
|
||||
font: 加粗 字号/行高/ 字体
|
||||
|
||||
@ -134,7 +129,6 @@ PS：400是nomal，700是bold。
|
||||
上面这几个属性可以连写，但是有一个要求，font属性连写至少要有**字号和字体**，否则连写是不生效的（相当于没有这一行代码）。
|
||||
|
||||
|
||||
|
||||
**2、字体属性的说明：**
|
||||
|
||||
（1）网页中不是所有字体都能用，因为这个字体要看用户的电脑里面装没装，比如你设置：
|
||||
@ -143,11 +137,11 @@ PS：400是nomal，700是bold。
|
||||
font-family: "华文彩云";
|
||||
```
|
||||
|
||||
上方代码中，如果用户电脑里面没有这个字体，那么就会变成宋体。
|
||||
上方代码中，如果用户的 Windows 电脑里面没有这个字体，那么就会变成宋体。
|
||||
|
||||
页面中，中文我们只使用：微软雅黑、宋体、黑体。英文使用：Arial、Times New Roman。页面中如果需要其他的字体，就需要切图。
|
||||
页面中，中文我们一般使用：微软雅黑、宋体、黑体。英文使用：Arial、Times New Roman。页面中如果需要其他的字体，就需要单独安装字体，或者切图。
|
||||
|
||||
（2）为了防止用户电脑里，没有微软雅黑这个字体。就要用英语的逗号，隔开备选字体。如下：（可以备选多个）
|
||||
（2）为了防止用户电脑里，没有微软雅黑这个字体。就要用英语的逗号，提供备选字体。如下：（可以备选多个）
|
||||
|
||||
```
|
||||
font-family: "微软雅黑","宋体";
|
||||
@ -200,18 +194,32 @@ PS：400是nomal，700是bold。
|
||||
|
||||
反过来， `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。
|
||||
|
||||
## 文本属性
|
||||
|
||||
CSS样式中，常见的文本属性有以下几种：
|
||||
|
||||
- `letter-spacing: 0.5cm ;` 单个字母之间的间距
|
||||
- `word-spacing: 1cm;` 单词之间的间距
|
||||
- `text-decoration: none;` 字体修饰：none去掉下划线、**underline下划线**、line-through中划线、overline上划线、
|
||||
- `text-transform: lowercase;` 单词字体大小写。uppercase大写、lowercase小写
|
||||
- `color:red;` 字体颜色
|
||||
- `text-align: center;` 在当前容器中的对齐方式。属性值可以是：left、right、center（<font color="#0000FF">**在当前容器的中间**</font>）、justify
|
||||
- `text-transform: lowercase;` 单词的字体大小写。属性值可以是：`uppercase`（单词大写）、`lowercase`（单词小写）、`capitalize`（每个单词的首字母大写）
|
||||
- `letter-spacing: 0.5cm ;` 单个字母之间的间距
|
||||
- `word-spacing: 1cm;` 单词之间的间距
|
||||
- `text-decoration: none;` 字体修饰：none 去掉下划线、**underline 下划线**、line-through 中划线、overline 上划线
|
||||
- `text-transform: lowercase;` 单词字体大小写。uppercase大写、lowercase小写
|
||||
- `color:red;` 字体颜色
|
||||
- `text-align: center;` 在当前容器中的对齐方式。属性值可以是：left、right、center（<font color="#0000FF">**在当前容器的中间**</font>）、justify
|
||||
- `text-transform: lowercase;` 单词的字体大小写。属性值可以是：`uppercase`（单词大写）、`lowercase`（单词小写）、`capitalize`（每个单词的首字母大写）
|
||||
|
||||
这里来一张表格的图片吧，一览无遗：
|
||||
|
||||
@ -219,7 +227,7 @@ CSS样式中，常见的文本属性有以下几种：
|
||||
|
||||
## 列表属性
|
||||
|
||||
```html
|
||||
```css
|
||||
ul li{
|
||||
list-style-image:url(images/2.gif) ; /*列表项前设置为图片*/
|
||||
margin-left:80px; /*公有属性*/
|
||||
@ -244,11 +252,10 @@ ul li{
|
||||
|
||||
`overflow`属性的属性值可以是：
|
||||
|
||||
- `auto`：浏览器自己解决。在必需时裁切对象多余的内容或显示滚动条。一般采用这个属性值。
|
||||
- `visible`：默认值。多余的内容不剪切也不添加滚动条，会全部显示出来。
|
||||
- `hidden`：不显示超过对象尺寸的内容。
|
||||
对象将以包含对象的 window 或 frame 的尺寸进行裁切，并且 clip 属性设置将失效。
|
||||
- `scroll`：总是显示滚动条。
|
||||
- `visible`：默认值。多余的内容不剪切也不添加滚动条，会全部显示出来。
|
||||
- `hidden`：不显示超过对象尺寸的内容。
|
||||
- `auto`：如果内容不超出，则不显示滚动条；如果内容超出，则显示滚动条。
|
||||
- `scroll`：Windows 平台下，无论内容是否超出，总是显示滚动条。Mac 平台下，和 `auto` 属性相同。
|
||||
|
||||
针对上面的不同的属性值，我们来看一下效果：
|
||||
举例：
|
||||
@ -275,14 +282,14 @@ ul li{
|
||||
}
|
||||
|
||||
#div1{
|
||||
overflow:auto;/*超出的部分让浏览器自行解决*/
|
||||
overflow: auto;/*超出的部分让浏览器自行解决*/
|
||||
}
|
||||
#div2{
|
||||
overflow:visible;/*超出的部分会显示出来*/
|
||||
overflow: visible;/*超出的部分会显示出来*/
|
||||
}
|
||||
|
||||
#div3{
|
||||
overflow:hidden;/*超出的部分将剪切掉*/
|
||||
overflow: hidden;/*超出的部分将剪切掉*/
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -439,10 +446,8 @@ p:hover{
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -356,8 +356,8 @@ PS：以后的CSS3内容中，我们会接触到更多的background属性： bac
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
|
||||
|
||||
@ -957,11 +957,10 @@ div的儿子p。和div的后代p的截然不同。
|
||||
|
||||
这种选择器作用不大。
|
||||
|
||||
## 我的公众号
|
||||
|
||||
##我的公众号
|
||||
|
||||
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
|
||||
|
||||
@ -328,10 +328,10 @@ a标签有4种伪类（即对应四种状态），要求背诵。如下：
|
||||
|
||||
|
||||
|
||||
##我的公众号
|
||||
## 我的公众号
|
||||
|
||||
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
|
||||
|
||||
@ -389,8 +389,8 @@ ul li:last-child
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
|
||||
|
||||
@ -529,10 +529,10 @@ div{
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -965,15 +965,12 @@ text-indent: 2em;
|
||||
|
||||
上方属性中，单位比较奇怪，叫做em，em就是汉字的一个宽度。indent的意思是缩进。
|
||||
|
||||
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -518,11 +518,10 @@ z-index属性的应用还是很广泛的。当好几个已定位的标签出现
|
||||
|
||||
（2）用`z-index`来控制层级数。
|
||||
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
|
||||
|
||||
@ -469,4 +469,12 @@
|
||||
|
||||
工程文件如下：
|
||||
|
||||
- [2018-03-20-boya.rar](待审核通过)
|
||||
- [2018-03-20-boya.rar](https://download.csdn.net/download/smyhvae/11832612)
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
|
||||
@ -492,9 +492,8 @@ CSS3又新增了其它的伪类选择器。这一小段，我们来学习CSS3中
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -799,9 +799,8 @@ CSS3的更多属性，且看下文继续。
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1436,17 +1436,12 @@ PS：图片的url是<http://img.smyhvae.com/20180209_1245.gif>，图片较大，
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -601,6 +601,14 @@ PS：主轴和侧轴并不是固定不变的，通过flex-direction可以互换
|
||||
|
||||
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -371,6 +371,14 @@ SVG素材：
|
||||
|
||||
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -50,7 +50,7 @@ css 进阶的主要内容如下。
|
||||
|
||||
> 不会 css 的前端称之为伪前端。
|
||||
|
||||
- html 元素的嵌套关系是怎么确定的？那些嵌套不可以发生？
|
||||
- html 元素的嵌套关系是怎么确定的？哪些嵌套不可以发生？
|
||||
|
||||
- 比如说，为什么 div 可以放在 a 标签里面？
|
||||
|
||||
@ -64,13 +64,7 @@ css 进阶的主要内容如下。
|
||||
|
||||
- 如何解决 css 模块化过程中的选择器互相干扰的问题？
|
||||
|
||||
## 总结
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
单独看 css 属性并不难，难的是需要把这些思路和思想，想到它的应用场景。
|
||||
|
||||
|
||||
@ -31,7 +31,6 @@ CSS中，有很多**非布局样式**，这些样式（属性）和与布局无
|
||||
- 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月联合推出的一款开源字体。
|
||||
|
||||
|
||||
补充：
|
||||
|
||||
（1）海报设计、PPT不要用宋体。
|
||||
@ -74,7 +73,6 @@ css 中的字体族可以理解成是某一类字体。常见的字体族可以
|
||||
|
||||
（2）有些 Mac 用户会安装 Office 等软件，安装这些软件后，系统会顺带安装微软雅黑字体。此时，写 css 代码时，如果写成 `"Microsoft Yahei", "PingFang SC"`这种顺序，可能导致有些 Mac 用户用微软雅黑来显示字体。
|
||||
|
||||
|
||||
### 其他
|
||||
|
||||
- 网络字体
|
||||
@ -85,17 +83,40 @@ 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
115
03-CSS进阶/CSS面试题.md
Normal 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)
|
||||
|
||||
|
||||
@ -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、**行内元素：**（文字、图片等水平居中）
|
||||
|
||||
给父亲设置：
|
||||
|
||||
|
||||
```
|
||||
text-align: center;
|
||||
|
||||
@ -228,9 +145,6 @@ html代码：
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
@ -247,17 +161,12 @@ html代码：
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
代码两个关键点：
|
||||
|
||||
- 上下左右均0位置定位；
|
||||
|
||||
- margin: auto
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
**方式三：**用绝对定位 + translate 位移来做
|
||||
|
||||
```css
|
||||
@ -269,7 +178,6 @@ html代码：
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
**方式四：**flex 布局
|
||||
|
||||
```css
|
||||
@ -280,52 +188,9 @@ html代码：
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
参考链接：
|
||||
|
||||
- [七种方式实现垂直居中](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/)
|
||||
|
||||
|
||||
## 选择器的优先级如何确定
|
||||
|
||||
- 选择器越具体，优先级越高。 #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)
|
||||
|
||||
|
||||
@ -23,3 +23,8 @@ css的各种效果实现（尤其是动画效果），关键时刻能救命。
|
||||
|
||||
- github排行：<http://githubrank.com/>
|
||||
|
||||
### 2019-10-05
|
||||
|
||||
- 现代 JavaScript 教程：<https://zh.javascript.info/>
|
||||
|
||||
|
||||
|
||||
@ -18,3 +18,10 @@
|
||||
- [https://www.yuque.com/sxc/front/kvokg4](https://www.yuque.com/sxc/front/kvokg4)
|
||||
|
||||
作者在语雀上的系列文章，都值得一看。
|
||||
|
||||
### 2019-10-05
|
||||
|
||||
- [前端学习网站和资源推荐](https://www.twblogs.net/a/5d400329bd9eee51fbf962b2)
|
||||
|
||||
作者整理的一些基础性的学习资源，还可以。
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user