[TOC] # link 标签和 @import 的区别 * link 属于 html 标签，而 @import 是 css 提供的，用于在样式文件中引入其他样式文件 * 页面被加载时，link 会同时被加载，而 @import 引用的 css 会等到页面加载结束后加载。 * link 是 html 标签，因此没有兼容性，而 @import 只有 IE5 以上才能识别。 * link 方式样式的权重高于 @import 的 简而言之，使用 @import 的关键点在于其可以先加载 HTML，后加载 CSS；另外，如果要动态地添加 CSS 样式的话（比如切换主题的实现）还是得用 link 标签； 另外，我们写 sass 时也是使用 @import "mixin.scss" 而不是 link "mixin.scss"，scss 拓展了 @import 的功能使得其可以导入 .scss 文件。 # BFC 及其应用 <span style="font-size: 20px;">定义</span> BFC(Block formatting context) 直译为"块级格式化上下文"。它是一个独立的渲染区域，只有 Block-level box 参与，它规定了内部的 Block-level Box 如何布局，并且与这个区域外部毫不相干。 <span style="font-size: 20px;">生成</span> CSS2.1 中规定满足下列 CSS 声明之一的元素便会生成 BFC。 1. 根元素 2. float 的值不为 none 3. overflow 的值不为 visible 4. display 的值为 inline-block、table-cell、table-caption 中的任何一个; display：table也认为可以生成 BFC，其实这里的主要原因在于 table 会默认生成一个匿名的 table-cell，正是这个匿名的 table-cell 生成了 BFC 5. position 的值为 absolute 或 fixed <span style="font-size: 20px;">约束</span> 1. 内部的 Box 会在垂直方向上一个接一个的放置 2. 属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠（塌陷），与方向无关。（重叠后的 margin 取大者） 3. 每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明 BFC 中子元素不会超出他的包含块，而 position 为 absolute 的元素可以超出他的包含块边界） 4. BFC 的区域不会与 float 的元素区域重叠 5. 计算 BFC 的高度时，浮动子元素也参与计算 6. BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然 <span style="font-size: 20px;">应用</span> - 解决垂直和水平方向上 margin 重叠，一般设置 overflow:hidden - 清除内部浮动（根据规则5 -“计算 BFC 的高度时，浮动元素也参与计算”）   # 清除浮动 参考链接：[https://blog.csdn.net/h\_qingyi/article/details/81269667](https://blog.csdn.net/h_qingyi/article/details/81269667) 方案1：触发 BFC 实现清除浮动 ```css .fahter{ width: 400px; overflow: hidden; } ``` 缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素 ***** 方案2：使用 after 伪元素清除浮动 ```css .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/ content: ""; display: block; height: 0; clear:both; visibility: hidden; } .clearfix{ *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/ } ``` 优点：符合闭合浮动思想，结构语义化正确 缺点：ie6-7 不支持伪元素：after，使用 zoom:1 触发 hasLayout. ***** 方案3：使用 before 和 after 双伪元素清除浮动 ```css .clearfix:after,.clearfix:before{ content: ""; display: table; /* ??? */ } .clearfix:after{ clear: both; } .clearfix{ *zoom: 1; } ``` # 内联元素与块级元素 **块级元素**：记忆方式（H5 语义化标签、p、div、h 标题） | 标签 | 用途 | 标签 | 用途 | | --- | --- |--- | --- | --- | |\<address\>| 联系方式信息| \<article>| 文章内容| |\<aside> |伴随内容| \<audio> |音频播放| |\<blockquote>| 块引用 |\<canvas> |绘制图形| |\<dl> |定义列表| \<dt>|\<dd>| 定义列表上层/下层项目| |\<div>| 分档分区 |\<fieldset>| 表单元素分组| |\<figure> |图文信息组| \<footer> |区段尾或页尾| |\<form> |表单 |\<h1~h6> |标题| |\<header>| 区段头或页头 |\<hgroup> |标题组| |\<hr> |水平分割线| \<noscript> |不支持脚本或禁用脚本时显示的内容| |\<ol>| 有序列表 |\<output>| 表单输出| |\<p> |行 |\<pre> |预格式化文本| |\<section>| 一个页面区段 |\<table> |表格| |\<ul> |无序列表| \<video>| 视频| **内联元素**：记忆方式（链接 a、文本样式之类 span、small，表单相关 input、 button） 只列出常见的，MDN 上诡异的就不列出来了： - b, big, i, small, tt - abbr, cite, code, em, strong - a, br, img, q, script, span, sub, sup - button, input, label, select, textarea 内联元素与块级元素的主要区别： |块级元素 | 内联元素 | | --- | --- | |独占一行,默认情况下，其宽度自动填满其父元素宽度 |相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化| |可以设置 width，height 属性 |行内元素设置 width，height 属性无效| |可以设置 margin 和 padding 属性 |行内元素起边距作用的只有 margin-left、margin-right、padding-left、padding-right，其它属性不会起边距效果。| |对应于 display: block |对应于 display: inline；| > 使用了 display: flex 后行内元素设置上下边距是有效的，why？ # JS 帧动画和 CSS3 动画的比较 - 功能涵盖面，JS 比 CSS3 大 - 定义动画过程的 @keyframes 不支持递归定义，如果有多种类似的动画过程，需要调节多个参数来生成的话，将会有很大的冗余，而 JS 则天然可以以一套函数实现多个不同的动画过程 - 时间尺度上，@keyframes 的动画粒度粗，而 JS 的动画粒度控制可以很细 - CSS3 动画里被支持的时间函数非常少，不够灵活 - 以现有的接口，CSS3 动画无法做到支持两个以上的状态转化 - 实现/重构难度不一，CSS3 比 JS 更简单，性能调优方向固定 - 对于帧速表现不好的低版本浏览器，CSS3 可以做到自然降级，而 JS 则需要撰写额外代码 - CSS 动画有天然事件支持（TransitionEnd、AnimationEnd，但是它们都需要针对浏览器加前缀），JS 则需要自己写事件 - CSS3 有兼容性问题，而 JS 大多时候没有兼容性问题 # 水平垂直居中 ## 水平居中 1.行内元素：父元素设置`text-align: center;` 2.块级元素：设置`margin: 0 auto;` 3.行内或块级元素都可用以下方法： - 使用 flex 实现 ```css .son { display: flex; justify-content: center; } ``` - 使用 CSS3 的 transform 属性，子元素设置如下 ```css .son { position:absolute; left:50%; transform:translate(-50%,0); } ``` ## 垂直居中 1.单行文本：设置`line-height`等于父元素高度 2.多行的行内元素：父元素设置`display:table-cell;`和`vertical-align: middle;` ```css .father { display: table-cell; vertical-align:middle; } ``` 3.使用 flex ```css .father { display: flex; align-items: center; } ``` ## 水平垂直居中 1.设置父元素为相对定位，给子元素设置绝对定位 ```css .father { position: relative; } .son { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } ``` 2.使用 flex ```css .father { display: flex; justify-content: center; align-items: center; } ``` 3.利用位移，用 margin 也行（注意 margin-left 使用百分比是相对于父元素的，而 translate 是相对于元素自身） ```css .father { position: relative; } .son { position: absolute; left: 50%; /* 该百分比相对于父元素 */ top: 50%; transform: translate(-50%, -50%); /* 该百分比相对于元素自身 */ } ``` # 两侧宽度固定、中间宽度自适应的三栏布局 参考链接 [https://blog.csdn.net/Cinderella\_hou/article/details/52156333](https://blog.csdn.net/Cinderella_hou/article/details/52156333) [https://chokcoco.github.io/CSS-Inspiration/#/./layout/holy-grail-layout](https://chokcoco.github.io/CSS-Inspiration/#/./layout/holy-grail-layout) [https://www.cnblogs.com/hfdj/p/7554933.html](https://www.cnblogs.com/hfdj/p/7554933.html) [https://www.jianshu.com/p/81ef7e7094e8](https://www.jianshu.com/p/81ef7e7094e8) 解决方案：绝对定位、圣杯布局及双飞翼布局方案、 flex 方案 <span style="font-size: 20px;">圣杯布局</span> 原理： * 圣杯布局的关键点是通过 margin-left 与 left 属性将左右两列放置到准确的位置 * 圣杯布局的关键点父元素需要设置 padding * 圣杯布局的关键点 margin-left 取值为百分比时，是以其父元素的宽度为基准的 缩放浏览器能看到自适应效果，分析过程见链接1 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>三栏自自适应布局</title> </head> <style> body { min-width: 550px; margin: 0; padding: 0; } #container { padding-left: 200px; padding-right: 150px; } #container .column { float: left; height: 100vh; } #center { width: 100%; background: red; } #left { width: 200px; margin-left: -100%; position: relative; right: 200px; background: green; } #right { width: 150px; margin-right: -150px; background: blue; } #footer { clear: both; } </style> <body> <div id="header"></div> <div id="container"> <div id="center" class="column"></div> <div id="left" class="column"></div> <div id="right" class="column"></div> </div> <div id="footer"></div> </body> </html> ``` <span style="font-size: 20px;">双飞翼布局</span> 双飞翼布局左中右三列布局，渲染顺序中间列书写在前保证提前渲染，左右两列定宽，中间列自适应剩余宽度。 双飞翼布局与圣杯布局的不同之处，圣杯布局的的左中右三列容器，中间middle多了一个子容器存在，**通过控制 middle 的子容器的 margin 或者 padding 空出左右两列的宽度**。 * 双飞翼布局的关键点是通过 margin-left 属性将左右两列放置到准确的位置，通过控制 middle 的子容器的 margin 或者 padding 空出左右两列的宽度 * 双飞翼布局的关键点父元素不需要设置 padding * 双飞翼布局的关键点 margin-left 取值为百分比时，是以其父元素的宽度为基准的 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>三栏自自适应布局</title> </head> <style> body { min-width: 500px; margin: 0; padding: 0; } #container { width: 100%; } .column { float: left; height: 100vh; } #center { margin-left: 200px; margin-right: 150px; background: orange; height: 100vh; } #left { width: 200px; margin-left: -100%; background: greenyellow; } #right { width: 150px; margin-left: -150px; background: skyblue; } #footer { clear: both; } </style> <body> <div id="header"></div> <div id="container" class="column"> <div id="center"></div> </div> <div id="left" class="column"></div> <div id="right" class="column"></div> <div id="footer"></div> </body> </html> ``` > 我感觉 float 布局就是玄学吧....... <span style="font-size: 20px;">使用 flex </span> ```html <!-- DOM结构 --> <div id="container"> <div id="center"></div> <div id="left"></div> <div id="right"></div> </div> ``` ```css #container { display: flex; } #center { flex: 1; // 1 1 auto } #left { flex: 0 0 200px; order: -1; } #right { flex: 0 0 150px; } ``` # 隐藏元素的几种方式及其区别 [参考文章](http://www.divcss5.com/jiqiao/j50687.shtml) 1.`display: none;` 会移除 DOM（不占据页面空间），触发回流与重绘 2.`visibility: hidden;` 不会移除 DOM，只会触发重绘不会触发回流 3.`opacity: 0;` 不会移除 DOM，只触发重绘不会触发回流 其还有如下一些差异性： | 方案 | 事件绑定 | 动画属性 | | :---- | :---- | :---- | | display: none | 绑定的事件不再生效 | 定义 transition 无效 | | visibility: hidden | 元素不再触发绑定的事件 | 会在 transition 设置的时间内消失，但是没有动画效果 | | opacity: 0 | 元素仍然会触发绑定的事件 | 与正常元素一样有动画效果 | # calc 方法的使用 calc 是 CSS3 中新增的一个方法，可以通过该方法来自动计算元素的宽度、高度等数值类型的样式属性值。可以使用 calc() 给元素的 border、margin、pading、font-size 和width 等属性设置动态值。 运算规则： - 使用“+”、“-”、“*” 和 “/”四则运算； - 可以使用百分比、px、em、rem等单位； - 可以混合使用各种单位进行计算； - 表达式中有“+”和“-”时，其前后必须要有空格，如 `widht: calc(12%+5em)` 这种没有空格的写法是错误的； - 表达式中有 '*' 和 '/' 时，其前后可以没有空格，但建议留有空格。 可以用来处理“元素撑破容器”和一些自适应布局的情况 # 媒体查询 ***** 语法：@media 设备类型 and （设备特性） {样式代码} 常用的设备类型 | 取值 | 描述 | | --- | --- | |all| 用于所有设备| |print| 用于打印机和打印预览| |screen| 用于电脑屏幕，平板电脑，智能手机等。| |speech| 应用于屏幕阅读器等发声设备| 常用的设备特性（大部分接受 min / max 前缀，用来表示大于等于或小于等于的逻辑，以避免使用 < > 这些字符） |特性 |可指定值 |是否允许 min / max 前缀| 特性说明| | :---- | :---- | :---- | :---- | |width |带单位的长度数值如 px| 允许| 浏览器窗口的宽度| |height| 同上| 允许 |浏览器窗口的高度| |device-width| 同上 |允许| 设备屏幕分辨率的宽度值| |device-height| 同上| 允许| 设备屏幕分辨率的高度值| |orientation| portrait \| landscape |不允许| 浏览器窗口的方向是纵向还是横向，当窗口的高度值大于宽度值时该特性为 portrait,否则为 landscape| 使用 and 关键字来指定当某种设备类型的某种特性的值满足某个条件时所使用的样式 ```css @media screen and (max-width: 639px) {…} // 指定了当设备窗口宽度小于 640px 时的样式 ``` 可以使用多条语句来将同一个样式应用于不同的设备类型和设备特性中 ```css @media handheld and (min-width:360px), screen and (min-width:480px) {…} ``` 可以在表达式中加上 not 关键字或 only 关键字，not 关键字表示对后面的表达式执行取反操作 ```css @media not handheld and (color) {…} // 样式代码将被使用在除便携设备之外的其他设备或非彩色便携设备中 @media all and (not color) {…} // 样式代码将被使用在所有非彩色设备中 ``` 可以支持对外部样式表的引入 ```css @import url(color.css) screen and (min-width: 1000px); <link rel="stylesheet" type="text/css" media="screen and (min-width: 1000px)" href="style.css" /> ```