From 2f436f2dbef2c4b30a113a69ba660e5a51d8c6eb Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Sat, 5 Oct 2019 11:59:34 +0800 Subject: [PATCH] =?UTF-8?q?update:=20=E5=AD=97=E4=BD=93=E5=8A=A0=E7=B2=97?= =?UTF-8?q?=E5=B1=9E=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 02-CSS基础/01-CSS属性：字体属性和文本属性.md | 93 ++-- 02-CSS基础/02-CSS属性：背景属性.md | 4 +- 02-CSS基础/03-CSS样式表和选择器.md | 7 +- 02-CSS基础/04-CSS选择器：伪类.md | 6 +- 02-CSS基础/05-CSS样式表的继承性和层叠性.md | 4 +- 02-CSS基础/06-CSS盒模型详解.md | 4 +- 02-CSS基础/07-浮动.md | 7 +- 02-CSS基础/08-CSS属性：定位属性.md | 5 +- 02-CSS基础/09-CSS案例讲解：博雅互动.md | 10 +- 02-CSS基础/11-CSS3选择器详解.md | 5 +- 02-CSS基础/12-CSS3属性详解（一）.md | 5 +- 02-CSS基础/13-CSS3属性详解：动画详解.md | 9 +- 02-CSS基础/14-CSS3属性详解：flex布局.md | 8 + 02-CSS基础/15-CSS3属性详解：Web字体.md | 8 + 03-CSS进阶/00-准备.md | 12 +- 03-CSS进阶/02-CSS中的非布局样式.md | 49 +- 03-CSS进阶/CSS面试题.md | 115 ++++ .../02-HTML和CSS相关.md => 03-CSS进阶/如何居中.md | 527 +++++++----------- 18-推荐链接/04-网站推荐.md | 5 + 18-推荐链接/2019-推荐文章.md | 9 +- 20 files changed, 458 insertions(+), 434 deletions(-) create mode 100644 03-CSS进阶/CSS面试题.md rename 15-面试题积累/02-HTML和CSS相关.md => 03-CSS进阶/如何居中.md (61%) diff --git a/02-CSS基础/01-CSS属性：字体属性和文本属性.md b/02-CSS基础/01-CSS属性：字体属性和文本属性.md index f1c975e..2772bb1 100644 --- a/02-CSS基础/01-CSS属性：字体属性和文本属性.md +++ b/02-CSS基础/01-CSS属性：字体属性和文本属性.md @@ -39,12 +39,25 @@ html中的单位只有一种，那就是像素px，所以单位是可以省略 ![](http://img.smyhvae.com/2015-10-03-css-17.png) -## 字体属性 +## 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（**在当前容器的中间**）、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（**在当前容器的中间**）、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;/*超出的部分将剪切掉*/ } @@ -439,10 +446,8 @@ p:hover{ ## 我的公众号 -想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 +想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： -![](http://img.smyhvae.com/2016040102.jpg) - - +![](http://img.smyhvae.com/20190101.png) diff --git a/02-CSS基础/02-CSS属性：背景属性.md b/02-CSS基础/02-CSS属性：背景属性.md index 82ddbe9..e160031 100644 --- a/02-CSS基础/02-CSS属性：背景属性.md +++ b/02-CSS基础/02-CSS属性：背景属性.md @@ -356,8 +356,8 @@ PS：以后的CSS3内容中，我们会接触到更多的background属性： bac ## 我的公众号 -想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 +想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： -![](http://img.smyhvae.com/2016040102.jpg) +![](http://img.smyhvae.com/20190101.png) diff --git a/02-CSS基础/03-CSS样式表和选择器.md b/02-CSS基础/03-CSS样式表和选择器.md index 1e1990c..c205c48 100644 --- a/02-CSS基础/03-CSS样式表和选择器.md +++ b/02-CSS基础/03-CSS样式表和选择器.md @@ -957,11 +957,10 @@ div的儿子p。和div的后代p的截然不同。 这种选择器作用不大。 +## 我的公众号 -##我的公众号 - -想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（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) diff --git a/02-CSS基础/04-CSS选择器：伪类.md b/02-CSS基础/04-CSS选择器：伪类.md index 019d6ca..7873592 100644 --- a/02-CSS基础/04-CSS选择器：伪类.md +++ b/02-CSS基础/04-CSS选择器：伪类.md @@ -328,10 +328,10 @@ a标签有4种伪类（即对应四种状态），要求背诵。如下： ![](http://img.smyhvae.com/2015-10-03-css-04.gif) -##我的公众号 +## 我的公众号 -想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 +想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： -![](http://img.smyhvae.com/2016040102.jpg) +![](http://img.smyhvae.com/20190101.png) diff --git a/02-CSS基础/05-CSS样式表的继承性和层叠性.md b/02-CSS基础/05-CSS样式表的继承性和层叠性.md index 153c720..87de386 100644 --- a/02-CSS基础/05-CSS样式表的继承性和层叠性.md +++ b/02-CSS基础/05-CSS样式表的继承性和层叠性.md @@ -389,8 +389,8 @@ ul li:last-child ## 我的公众号 -想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 +想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： -![](http://img.smyhvae.com/2016040102.jpg) +![](http://img.smyhvae.com/20190101.png) diff --git a/02-CSS基础/06-CSS盒模型详解.md b/02-CSS基础/06-CSS盒模型详解.md index af6c887..184df9e 100644 --- a/02-CSS基础/06-CSS盒模型详解.md +++ b/02-CSS基础/06-CSS盒模型详解.md @@ -529,10 +529,10 @@ div{ ## 我的公众号 -想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 +想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： -![](http://img.smyhvae.com/2016040102.jpg) +![](http://img.smyhvae.com/20190101.png) diff --git a/02-CSS基础/07-浮动.md b/02-CSS基础/07-浮动.md index 595f2d2..0c51cfa 100644 --- a/02-CSS基础/07-浮动.md +++ b/02-CSS基础/07-浮动.md @@ -965,15 +965,12 @@ text-indent: 2em; 上方属性中，单位比较奇怪，叫做em，em就是汉字的一个宽度。indent的意思是缩进。 - - ## 我的公众号 -想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 +想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： -![](http://img.smyhvae.com/2016040102.jpg) - +![](http://img.smyhvae.com/20190101.png) diff --git a/02-CSS基础/08-CSS属性：定位属性.md b/02-CSS基础/08-CSS属性：定位属性.md index ec2dc15..af20078 100644 --- a/02-CSS基础/08-CSS属性：定位属性.md +++ b/02-CSS基础/08-CSS属性：定位属性.md @@ -518,11 +518,10 @@ z-index属性的应用还是很广泛的。当好几个已定位的标签出现 （2）用`z-index`来控制层级数。 - ## 我的公众号 -想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 +想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： -![](http://img.smyhvae.com/2016040102.jpg) +![](http://img.smyhvae.com/20190101.png) diff --git a/02-CSS基础/09-CSS案例讲解：博雅互动.md b/02-CSS基础/09-CSS案例讲解：博雅互动.md index d1c01b7..78f4545 100644 --- a/02-CSS基础/09-CSS案例讲解：博雅互动.md +++ b/02-CSS基础/09-CSS案例讲解：博雅互动.md @@ -469,4 +469,12 @@ 工程文件如下： -- [2018-03-20-boya.rar](待审核通过) \ No newline at end of file +- [2018-03-20-boya.rar](https://download.csdn.net/download/smyhvae/11832612) + +## 我的公众号 + +想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 + +扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： + +![](http://img.smyhvae.com/20190101.png) diff --git a/02-CSS基础/11-CSS3选择器详解.md b/02-CSS基础/11-CSS3选择器详解.md index dec685f..7616ac9 100644 --- a/02-CSS基础/11-CSS3选择器详解.md +++ b/02-CSS基础/11-CSS3选择器详解.md @@ -492,9 +492,8 @@ CSS3又新增了其它的伪类选择器。这一小段，我们来学习CSS3中 ## 我的公众号 -想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 +想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： -![](http://img.smyhvae.com/2016040102.jpg) - +![](http://img.smyhvae.com/20190101.png) diff --git a/02-CSS基础/12-CSS3属性详解（一）.md b/02-CSS基础/12-CSS3属性详解（一）.md index 648db81..674c691 100644 --- a/02-CSS基础/12-CSS3属性详解（一）.md +++ b/02-CSS基础/12-CSS3属性详解（一）.md @@ -799,9 +799,8 @@ CSS3的更多属性，且看下文继续。 ## 我的公众号 -想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 +想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： -![](http://img.smyhvae.com/2016040102.jpg) - +![](http://img.smyhvae.com/20190101.png) diff --git a/02-CSS基础/13-CSS3属性详解：动画详解.md b/02-CSS基础/13-CSS3属性详解：动画详解.md index d4aa030..070c9a8 100644 --- a/02-CSS基础/13-CSS3属性详解：动画详解.md +++ b/02-CSS基础/13-CSS3属性详解：动画详解.md @@ -1436,17 +1436,12 @@ PS：图片的url是，图片较大， - - - ## 我的公众号 -想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 +想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： -![](http://img.smyhvae.com/2016040102.jpg) - - +![](http://img.smyhvae.com/20190101.png) diff --git a/02-CSS基础/14-CSS3属性详解：flex布局.md b/02-CSS基础/14-CSS3属性详解：flex布局.md index ed735f6..4571b69 100644 --- a/02-CSS基础/14-CSS3属性详解：flex布局.md +++ b/02-CSS基础/14-CSS3属性详解：flex布局.md @@ -601,6 +601,14 @@ PS：主轴和侧轴并不是固定不变的，通过flex-direction可以互换 +## 我的公众号 + +想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 + +扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： + +![](http://img.smyhvae.com/20190101.png) + diff --git a/02-CSS基础/15-CSS3属性详解：Web字体.md b/02-CSS基础/15-CSS3属性详解：Web字体.md index 28ee89c..ae1c565 100644 --- a/02-CSS基础/15-CSS3属性详解：Web字体.md +++ b/02-CSS基础/15-CSS3属性详解：Web字体.md @@ -371,6 +371,14 @@ SVG素材： +## 我的公众号 + +想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 + +扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： + +![](http://img.smyhvae.com/20190101.png) + diff --git a/03-CSS进阶/00-准备.md b/03-CSS进阶/00-准备.md index 6ccc901..12d2309 100644 --- a/03-CSS进阶/00-准备.md +++ b/03-CSS进阶/00-准备.md @@ -50,7 +50,7 @@ css 进阶的主要内容如下。 > 不会 css 的前端称之为伪前端。 -- html 元素的嵌套关系是怎么确定的？那些嵌套不可以发生？ +- html 元素的嵌套关系是怎么确定的？哪些嵌套不可以发生？ - 比如说，为什么 div 可以放在 a 标签里面？ @@ -64,13 +64,7 @@ css 进阶的主要内容如下。 - 如何解决 css 模块化过程中的选择器互相干扰的问题？ +## 总结 - - - - - - - - +单独看 css 属性并不难，难的是需要把这些思路和思想，想到它的应用场景。 diff --git a/03-CSS进阶/02-CSS中的非布局样式.md b/03-CSS进阶/02-CSS中的非布局样式.md index e085519..a5fdcc5 100644 --- a/03-CSS进阶/02-CSS中的非布局样式.md +++ b/03-CSS进阶/02-CSS中的非布局样式.md @@ -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 diff --git a/03-CSS进阶/CSS面试题.md b/03-CSS进阶/CSS面试题.md new file mode 100644 index 0000000..1dc1ea7 --- /dev/null +++ b/03-CSS进阶/CSS面试题.md @@ -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 + +``` + +控制页面在移动端不要缩小显示。 + +### 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) + + diff --git a/15-面试题积累/02-HTML和CSS相关.md b/03-CSS进阶/如何居中.md similarity index 61% rename from 15-面试题积累/02-HTML和CSS相关.md rename to 03-CSS进阶/如何居中.md index 7643b66..1992cee 100644 --- a/15-面试题积累/02-HTML和CSS相关.md +++ b/03-CSS进阶/如何居中.md @@ -1,331 +1,196 @@ - - - - - -## HTML 相关 - - -### 你是如何理解 HTML 语义化的？ - - -**语义化**：指对文本内容的结构化（内容语义化），选择合乎语义的标签（代码语义化）。 - - -**举例**：段落用 p，边栏用 aside，主要内容用 main 标签。 - - -**好处：** - -- 便于开发者阅读和维护 - -- 有利于SEO：让浏览器的爬虫和辅助技术更好的解析， - - -**语义化标签介绍**： - -在HTML5出来之前，我们习惯于用div来表示页面的章节或者不同模块，但是`div`本身是没有语义的。但是现在，HTML5中加入了一些语义化标签，来更清晰的表达文档结构。 - -20180322_1120.jpg - - - -参考链接： - -- [初探 · HTML5语义化](https://zhuanlan.zhihu.com/p/32570423) - - -### meta viewport 是做什么用的，怎么写？ - - - -```html - -``` - -控制页面在移动端不要缩小显示。 - - -### 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; - -``` - -另外，**让文字的行高 等于 盒子的高度**，可以让单行文本垂直居中。 - - -2、**块级元素：**（让标准流中的盒子水平居中） - -给元素设置：（让当前元素在父亲里剧中） - -``` - //方式一 - margin: auto; - - 方式二 - margin: 0 auto; -``` - -上面的代码， `margin: auto`相当于`margin: auto auto auto auto`。`margin: 0 auto`相当于`margin: 0 auto 0 auto`，四个值分别对应上右下左。 - -- 垂直方向：根据规范，margin-top: auto 和 margin-bottom: auto，其计算值为0。 - -- 水平方向：水平方向的 auto，其计算值取决于可用空间（**剩余空间**）。 - -参考链接： - -### 垂直居中/水平居中（元素的高度已知） - -方法：绝对定位 + margin-top - -如果盒子是绝对定位的，此时已经脱标了，`margin:auto`无效。如果还想让其居中（位于父亲的正中间），可以这样做： - -```html - - - - - Title - - - - - -
-
- 一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字 -
-
- - - -``` - -如上方代码所示，我们先让这个高度为100px的盒子，上边线居中，然后向上移动宽度的一半(50px)，就达到了垂直居中的效果。水平居中的原理类似。 - -效果： - -![](http://img.smyhvae.com/20180322_1843.png) - -### 垂直居中/水平居中（元素的高度未知） - -**方法1：**模拟表格法 - -将父元素设置为display:table，然后将子元素也（就是要垂直居中显示的元素）设置为display:table-cell，然后加上vertical-align:middle来实现。 - -html代码： - -```html - - - - - Title - - - - - -
-
-
-

测试垂直居中效果测试垂直居中效果测试垂直居中效果测试垂直居中效果

-
-
-
- - - - -``` - - - - -效果： - -![](http://img.smyhvae.com/20180322_1833.png) - - - -**方式二：**绝对定位 + `margin:auto` - -```css -.element { - position: absolute; - left: 0; top: 0; right: 0; bottom: 0; - margin: auto; /* 有了这个就自动居中了 */ -} -``` - - -代码两个关键点： - -- 上下左右均0位置定位； - -- margin: auto - - - - - -**方式三：**用绝对定位 + translate 位移来做 - -```css - div { - background-color: red; - position: absolute; 绝对定位的盒子 - top: 50%; 首先，让上边线居中 - transform: translateY(-50%); 然后，利用translate，往上走自己宽度的一半【推荐写法】 - } -``` - - -**方式四：**flex 布局 - -```css - .parent{ - display: flex;/*Flex布局*/ - display: -webkit-flex; /* Safari */ - align-items: center;/*设置子元素在侧轴方向上的布局*/ - } -``` - - -参考链接： - -- [七种方式实现垂直居中](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) - - + +## 如何居中（必考） + +### 水平居中 + +1、**行内元素：**（文字、图片等水平居中） + +给父亲设置： + +``` + text-align: center; + +``` + +另外，**让文字的行高 等于 盒子的高度**，可以让单行文本垂直居中。 + + +2、**块级元素：**（让标准流中的盒子水平居中） + +给元素设置：（让当前元素在父亲里剧中） + +``` + //方式一 + margin: auto; + + 方式二 + margin: 0 auto; +``` + +上面的代码， `margin: auto`相当于`margin: auto auto auto auto`。`margin: 0 auto`相当于`margin: 0 auto 0 auto`，四个值分别对应上右下左。 + +- 垂直方向：根据规范，margin-top: auto 和 margin-bottom: auto，其计算值为0。 + +- 水平方向：水平方向的 auto，其计算值取决于可用空间（**剩余空间**）。 + +参考链接： + +### 垂直居中/水平居中（元素的高度已知） + +方法：绝对定位 + margin-top + +如果盒子是绝对定位的，此时已经脱标了，`margin:auto`无效。如果还想让其居中（位于父亲的正中间），可以这样做： + +```html + + + + + Title + + + + + +
+
+ 一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字 +
+
+ + + +``` + +如上方代码所示，我们先让这个高度为100px的盒子，上边线居中，然后向上移动宽度的一半(50px)，就达到了垂直居中的效果。水平居中的原理类似。 + +效果： + +![](http://img.smyhvae.com/20180322_1843.png) + +### 垂直居中/水平居中（元素的高度未知） + +**方法1：**模拟表格法 + +将父元素设置为display:table，然后将子元素也（就是要垂直居中显示的元素）设置为display:table-cell，然后加上vertical-align:middle来实现。 + +html代码： + +```html + + + + + Title + + + + + +
+
+
+

测试垂直居中效果测试垂直居中效果测试垂直居中效果测试垂直居中效果

+
+
+
+ + + + +``` + +效果： + +![](http://img.smyhvae.com/20180322_1833.png) + + + +**方式二：**绝对定位 + `margin:auto` + +```css +.element { + position: absolute; + left: 0; top: 0; right: 0; bottom: 0; + margin: auto; /* 有了这个就自动居中了 */ +} +``` + +代码两个关键点： + +- 上下左右均0位置定位； + +- margin: auto + +**方式三：**用绝对定位 + translate 位移来做 + +```css + div { + background-color: red; + position: absolute; 绝对定位的盒子 + top: 50%; 首先，让上边线居中 + transform: translateY(-50%); 然后，利用translate，往上走自己宽度的一半【推荐写法】 + } +``` + +**方式四：**flex 布局 + +```css + .parent{ + display: flex;/*Flex布局*/ + display: -webkit-flex; /* Safari */ + align-items: center;/*设置子元素在侧轴方向上的布局*/ + } +``` + +参考链接： + +- [七种方式实现垂直居中](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/) + diff --git a/18-推荐链接/04-网站推荐.md b/18-推荐链接/04-网站推荐.md index d2a7492..209b074 100644 --- a/18-推荐链接/04-网站推荐.md +++ b/18-推荐链接/04-网站推荐.md @@ -23,3 +23,8 @@ css的各种效果实现（尤其是动画效果），关键时刻能救命。 - github排行： +### 2019-10-05 + +- 现代 JavaScript 教程： + + diff --git a/18-推荐链接/2019-推荐文章.md b/18-推荐链接/2019-推荐文章.md index b8dd201..d9e311e 100644 --- a/18-推荐链接/2019-推荐文章.md +++ b/18-推荐链接/2019-推荐文章.md @@ -17,4 +17,11 @@ - [https://www.yuque.com/sxc/front/kvokg4](https://www.yuque.com/sxc/front/kvokg4) -作者在语雀上的系列文章，都值得一看。 \ No newline at end of file +作者在语雀上的系列文章，都值得一看。 + +### 2019-10-05 + +- [前端学习网站和资源推荐](https://www.twblogs.net/a/5d400329bd9eee51fbf962b2) + +作者整理的一些基础性的学习资源，还可以。 +