CSS
1. <link />引入CSS的方式可以利用浏览器的缓存，提高访问速度；
2. <a />可以包含任何元素，但<p>除了它自身，不可以包含任何块元素；
3. 复合/交集选择器：用于选中同时满足多个选择器的元素，选择器1选择器2 { ... }
1. span.p3 { background-color: yellow; } -->只对使用了类选择器p3的span有效
2. id是标签的唯一标识，所以id选择器通常不会再使用复合的形式。
4. 伪类选择器
1. a:link { color: black; } --> 为没访问过的链接设置一个颜色；
2. a:visited{ color: red; } ->设置访问过的链接的颜色，浏览器根据历史纪录判断；
3. a:active{ color: green; } --> 设置超链接被点击时的颜色；
4. input:focus {background-color: red;} ->设置<input />获得焦点后的背景色；
5. p::selection{background-color: red;} -> 设置鼠标选中时的背景色；
6. 兼容Firefox：p::-moz-selection { ... }
7. IE6不支持<a />以外的元素设置:hover和:active，也不支持:focus和::selection；
8. 针对段落<p>的伪元素：:first-letter(首字母)，:first-line(首行)
5. H5规定的一些语义标签：对于不需要着重的内容、而是单纯的加粗/斜体，就可以使用<b>和<i>
1. <small>用于表示一些细则一类的内容，如合同中的小字、网站的版权声明；
2. <cite>：网页中所有的加"《》"的内容，表示引用的参考，如书名、电影名、歌名
3. <q>：行内引用的内容，为该内容加引号，<p>子曰：<q>温故而知新！</q></p>
4. <sup>：上标，<p>2<sup>3</sup><p> --> 2的3次方的形式；
5. <sub>：下标，<p>H<sub>2</sub>O<p> --> 水的化学方程式；
6. <del>：加删除线，<p><del>17.8</del><p>
7. <ins>：表示一个插入的内容，自动添加下划线；
8. <pre>：预格式标签，会保存内容的格式，不会忽略前后的空格；
9. <code>：专用于表示代码，但不会保留格式，所以通常配合<pre>表示代码。
6. RGB表示颜色时，有两种方式：rgb(255,0,100)、rgb(100%,0%,100%)
1. text-transform：设置文本的大小写，默认值为none
1. capitalize：每个单词的首字母大写，通过空格识别单词；
2. uppercase/lowercase：所有字母都大写/小写。
2. text-decoration：设置文本的修饰，下划线、删除线、上划线，如<a>默认带下划线；
3. text-indent：设置文本的首行缩进，通常使用em作为单位；
1. 如果设置一个足够大的负数，可以把文本隐藏，供搜索引擎查看，而不让用户看到。
4. user-select:none; -->不允许鼠标以任何方式选中文本，包括按住鼠标拖动选中、双击选中
CSS2.1
1. div+CSS布局的原因：<div>是块级元素，在所有浏览器的解析都是一样的，而且<div>的样式
是很干净的，所以选择用<div>作为包含块(父级元素)；
2. 包含块：根元素(html)的包含块也称为初始包含块，有些浏览器会使用body作为根元素；
1. 对于大多数浏览器，初始包含块就是一个视窗大小的矩形，但不等于视口；
2. 对于浮动元素，其包含块为最近的块级父元素，定位元素则更为复杂；
3. position为relative/static的非根元素，包含块由最近的块级框、表单元格或行内块
祖先框的内容边界构成；
4. position为absolute的非根元素，包含块设置为最近的、使用了定位的父元素，如果没有
任何父元素使用定位，则以初始包含块为参照。
3. 默认值与百分比的参考值
1. width和height都不可继承，默认值为auto，而不是100%！
2. 没有设置width和height的情况下，内联元素和内联块元素的宽高由内容撑起，所以如果没有
内容，其width和height的实际值都是0px，而块元素独占一行，如果没有内容，其width仍撑满
父元素，即width的实际值与父元素的width相同，但其height的实际值也是0px
<div id="outter"> --> #outter{ width: 100px; height: 100px; }
<div id="inner"></div> --> #inner{ height: 50px; margin: 0 20px; }
</div> --->inner的width=100-20-20=60px
3. width的默认值为auto，实际值为父级width-自身margin-自身padding-自身border
4. margin和padding的默认值为0，使用百分比时都参照最近父级元素的width
5. left和top的默认值是auto，而不是0，使用百分比时，分别参照包含块的width和height
<div id="outter"></div>
<div id="box"></div> --> #box{ position: absolute; } --> box位于outter下方
6. 相对定位的包含块为父元素；对于绝对/固定定位，包含块为最近的、使用定位的父级元素。
4. 浮动：浮动只会提升半层层级，而定位提升1个层级；
1. 文字绕图：浮动只提升半层层级的体现，只浮动下半层；
2. 只有在浮动的时候才会考虑盒子的分层问题，上层为文字相关，下层为盒模型相关。
固定定位的扩展理解
1. 绝对定位参照的是包含块，固定定位参照的是视口；
2. 视口、html、body的高度实现三合一，必须一层层继承，只设置body{ height:100%; }是无效的
html, body { height: 100% } --> 让body能够充当视口的大小
4. 滚动条：可分为系统滚动条和元素上的滚动条；
1. 系统滚动条属于document，作用在整个HTML文档上，也就是浏览器窗口；
2. 只设置<html>或<body>中的一个overflow，都会传递给document
3. 禁用系统滚动条：html{ height: 100%; overflow: hidden }
5. 初始包含块是一个视口大小的矩形，但并不是视口，它也在文档的最外层，包裹整个文档；
1. 拖动系统滚动条，视口不会移动，但初始包含块会随之移动，整个文档也随之移动；
2. 拖动其他元素上的滚动条，影响的都只是该元素内的子元素，并不会影响初始包含块的位置；
3. 如果没有任何父元素使用定位，绝对定位则参照初始包含块；
4. 系统滚动条能影响初始包含块的位置，也就能间接影响绝对定位的元素位置。
6. 解决固定定位不兼容IE6
1. 如果当前拖动的不是系统滚动条，那也就不影响初始包含块，绝对定位的元素也就不会移动；
2. 因此，可以用绝对定位间接实现固定定位的效果；
html{ height: 100%; overflow: hidden; } --> 禁止系统滚动条
body{ height: 100%; overflow: auto; } --> 让<body>充当视口，使用<body>的滚动条
经典布局
1. 三列布局：两边固定、中间自适应，中间列要完整显示，且中间列要优先加载
1. 定位实现过于复杂，还会影响后续的布局，所以不建议用定位做框架布局；
2. 浮动实现：中间列不能优先加载
div{ height: 100px; } body{ min-width: 600px; }-->最小宽度：2*left+right
<div class="left">LEFT</div> --> .left{ width: 200px; float: left; }
<div class="right">RIGHT</div> --> .right{ width: 200px; float: right; }
<div class="middle">MIDDLE</div> --> 只能排在最后面，导致中间列不能优先加载
2. 圣杯布局实现三列布局：浮动、margin为负值、相对定位
1. margin：外边距，控制盒子边框之间的距离，把margin设置为负值是布局中的重要应用；
2. margin改变的其实是盒子的边界位置，并不会主动改变盒子本身的大小和位置，盒子本身的
位置只能由定位(left,top)进行改变，但margin会影响盒子的盒模型变化；
3. 对于两个并列的盒子(内联元素)，后者的margin-left设置为负值，在表象上会覆盖前者；
4. margin-left设置为负值，改变盒子的边界，就是圣杯布局实现的关键
body { min-width: 600px; margin: 0; padding: 0; } -->最小宽度2*left+right
.content { padding: 0 200px; } -->为父元素设置左右padding，显现middle
#middle { width: 100%; float: left; } --> 中间列也要左浮动，且手动设置宽度100%
#left, #right { width: 200px; float: left; }
#left { margin-left: -100%; position: relative; left: -200px; } -->left的
原位置在middle的下面，与middle同层级，左边界垂直在一条线上，middle的width为100%，
则设置left的margin-left为-100%，left会自动覆盖前面的middle，且左边界合并，又因为
父元素的左padding为200px，对left设置相对定位，使left向左移动200px
#right { margin-left: -200px; position: relative; right: -200px; } -->left
移动了之后，right会自动占据left的位置，right的width为200px，则设置margin-left为
-200px，right和middle的右边界自动垂直在一条线上，又因为父元素的右padding为200px，
则对right设置相对定位(right:-200px)
<div class="content clearfix"> -->.clearfix清除浮动
<div id="middle">middle</div> -->中间列优先加载
<div id="left">Left</div>
<div id="right">right</div>
</div>
3. 等高布局：伪等高
1. 原理：padding-bottom改变盒子本身的大小，margin-bottom设置负值改变盒子的边界，
父元素设置为overflow:hidden，剪切掉盒子padding-bottom超出父元素的部分；
<div class="box clearfix">
<div class="left">盒子</div>
<div class="right">等高布局······等高布局</div>
</div>
.box { width: 700px; border: 2px solid gold; overflow: hidden; }
.left { width: 200px; float:left; } .right { width: 500px; float:left; }
.right, .left { padding-bottom: 10000px; margin-bottom: -10000px; }
2. right中的内容多于left，所以right的高度更大，父元素的高度也就是right的高度；
3. 对left和right设置一个足够大的padding-bottom:10000px，盒子的底部边界向下延申
10000px，那么父元素的高度也被撑开10000px；
4. 对left和right再设置margin-bottom:-10000px，将盒子的底部边界向上移动10000px，
盒子本身的大小不会改变，但父元素的高度会随之向上回缩10000px，那么盒子会由10000px
超出父元素，所以对父元素设置overflow:hidden，剪切掉超出的部分。
4. 双飞翼布局实现三列布局：避免使用定位，样式更干净
1. 双飞翼与圣杯布局的不同之处：如何处理中间列的位置
2. 圣杯布局：父元素设置padding:0 200px，再对left和right设置相对定位；
3. 双飞翼布局：给中间列再添加一个父元素，再对中间列设置padding:0 200px;
.left, .right { width: 200px; float: left; } body { min-width: 600px; }
<div class="clearfix"> -->只清除浮动
<div class="middle"> --> .middle { width: 100%; float: left; }
<div class="inner">middle</div> --> .inner{ padding:0 200px; }
</div>
<div class="left">Left</div> -->.left { margin-left: -100%; }
<div class="right">right</div> -->.right { margin-left: -200px; }
</div>
5. 粘连布局：stickyFooter，一般应用于移动端
1. 当main中的内容不足以撑满屏幕的高度时，footer固定在屏幕底部；main中的内容高度
超过屏幕高度时，footer跟随在main的底部；
html, body { height: 100%; } -->让body充当视口
<div id="wraper"> -->#wraper { min-height: 100%; }，最小高度为屏幕的100%
<div id="main">main······main</div> -->#main{ padding-bottom: 30px; }
</div>
<div id="footer">footer</div> -->#footer{height: 30px; margin-top: -30px;}
2. wraper设置最小高度为视口的100%，保证下面的兄弟节点footer至少位于底部；
3. 对main设置padding-bottom，让main中的内容不会与footer交叉；
4. footer只能布局在wraper之下，设置margin-top为负数，改变边界，让盒子向上移动。
BFC
Box Formatting Context
1. Box：盒子，CSS布局的基本单位，也即一个页面由多个Box组成；
1. Box也有多种类型，元素的类型和display属性决定了一个Box的类型；
2. 不同类型的Box，会参与不同的Formatting Context(一个决定如何渲染HTML文档的容器)，
所以，Box内的元素会以不同的方式渲染。
2. Box的类型
1. display属性值为block、list-item、table的元素，会生成block-level box，并参与
block formatting context；
2. display为inline、inline-block、inline-table的元素，会生成inline-level box，
并参与inline formatting context；
3. Formatting Context：W3C CSS2.1规范的概念，页面中的一块渲染区域，并且有一套渲染规则；
1. 它决定了其子元素将如何定位，以及和其他元素的关系、相互作用；
2. 最常见的有Block Formatting Context(简称BFC)，Inline Formatting Context(IFC)
3. 不同于BFC，每个浏览器对IFC维护的规则不同，所以常用的布局是div+CSS.
Block Formatting Context
1. BFC：块级格式化上下文，它是一个独立的渲染区域，只有Block-level Box参与，它规定了内部
的Block-level Box如何布局，且与区域外部无关；
2. BFC的布局规则
1. 内部的Box会在垂直方向一个个地放置，也即块级元素独占一行；
2. BFC的区域不会与浮动的Box重叠；
3. 内部的Box在垂直方向的距离由margin决定，同一个BFC的两个相邻Box的margin会发生重叠；
4. 计算BFC的高度时，浮动元素也参与计算(清除浮动、开启haslayout)
5. BFC就是页面上的一个隔离的独立容器，容器里的子元素不会影响到外面的元素，反之亦然。
3. 会生成BFC的元素：开启BFC的条件
1. 根元素，也即<html>就是一个BFC容器，所以其中的块元素能够遵循BFC的规则；
2. float不为none，position为absolute/fixed，都会自动开启BFC，管理其中的块元素；
3. overflow不为visible，也会开启BFC；
4. display为inline-block、table-cell、table-caption、flex、inline-flex
4. BFC实现两列布局：利用"BFC的区域不会与浮动的Box重叠"的规则
body { min-width: 600px; } div{ height: 200px; }
<div id="left">Left</div> --> #left{ width: 200px; float: left; }
<div id="right">Right</div> --> #right{ overflow: hidden; }
1. right开启了BFC，将不会与浮动的left重叠，形成两个完全独立的布局；
2. 使用场景：左边为商品图片，右边为商品的简介。
5. margin的合并：BFC的规则导致，两个Box满足"处在同一个BFC、相邻、都是块元素"
1. 一旦打破其中一个条件，比如其中一个盒子为display:inline-block，则不会发生重叠；
2. "相邻"的意义：两个盒子的margin相邻，也即在两个盒子之间加一个空<div>也是无效的，
但是，如果这个<div>设置height:1px; 那么两个盒子的margin将不再相邻，也不会重叠；
3. 为了使样式更干净，可以为第二个Box加一个父元素，并设置父元素overflow:hidden;
4. 除了会导致兄弟元素的margin合并，此规则也会使父子元素之间发生margin的合并，也就是
margin-top的塌陷，子元素的margin-top传递给了父元素，因为它们也符合BFC的规则。
清除浮动
1. 暴力方式：直接给父元素设置高度；
2. 利用BFC的规则之一："计算BFC的高度时，浮动元素也参与计算"：
1. 开启BFC的父元素能感知浮动元素的高度，也就能被撑开；
2. 如overflow:hidden;(常用于移动端)，但IE6/7不支持BFC。
3. 在浮动元素下面添加<br clear="all" />，也能清除浮动，但破坏了结构，也不兼容IE6；
4. 在最后一个子元素后面添加一个空标签：<div style="clear:both;"></div>
1. 副作用：结构与样式未分离，且如果该标签中有内容，即使设置height:0; 在IE6也有19px
的默认高度，再设置font-size:0; 还是会有2px的高度。
5. 伪元素的方式：.clearfix:after{ content:""; display:block; clear:both; }
1. 其实是第四种的变种，实现了结构与样式的分离，且基本没有副作用，但IE6/7不支持伪元素。
2. 兼容IE6/7：.clearfix{ *zoom:1; } 开启IE特有的haslayout，*表示IE的hack
兼容IE
1. haslayout：IE6没有BFC的概念，layout是IE的一个私有概念；
1. layout决定了元素如何对其内容定位、尺寸计算，以及与其他元素的关系、相互作用；
2. 当一个元素拥有layout时，它会负责本身及其子元素的尺寸和定位，如果没有，则由最近的、
拥有layout的父元素控制其尺寸和位置；
3. IE8+使用了全新的引擎，已经不再支持haslayout了，所以haslayout只针对IE6/7
4. haslayout出现的原因：理论上每个元素都应该控制自己的尺寸和定位，即每个元素都应该拥有
layout；然而，对于早期的IE引擎来说，如果让所有元素都拥有layout的话，会导致性能很低；
所以，IE团队决定使用布局的概念来减少浏览器的性能开销，即只将布局应用于实际需要的元素，
所以出现"拥有布局"和"没有拥有布局"两种情况。
5. 默认拥有布局的元素：html、body、table、tr、td、img、hr、input、select、button、
textarea、iframe、embed、object、applet、marquee
6. 开启haslayout：浮动、display:inline-block、绝对定位、width/height值非auto、
zoom值非normal、writing-mode:tb-rl
7. IE7增加开启haslayout的方式：min-height/min-width为任意值，position:fixed、
max-heigth/max-width的值不为none，overflow值非visible，仅用于块元素。
2. 了解hack
1. 不同厂商的浏览器或者同一浏览器的不同版本，如IE6和IE7，对CSS的解析不完全相同，
CSS hack的目的就是使CSS兼容不同的浏览器，反之，利用hack为不同的浏览器定制CSS效果；
2. hack使用最多的是IE浏览器，一般只关心IE的hack：*、+、-、_、#、\0、\9\0、!important
3. -：IE6特有的hack，其他版本的IE都不支持；
4. *：对于标准版的IE，只有IE6/7支持，所以使用{*zoom:1}开启IE6/7的haslayout，而其他
版本的IE支持伪元素和BFC，则不需要开启haslayout，节省开销；
5. 对于标准IE，\9在IE6/7/8/9/10都支持，\0只在IE8/9/10中生效，\9\0只对IE9/10有效；
6. \0、\9\0、!important都是写在属性值后面，如background:red\9\0;
7. 除了CSS hack，还有一种hack可以写在HTML中，称为条件注释表达式
<body>
<!--[if IE]>
这段文字只在IE浏览器上显示
<![endif]-->
<div> ······ </div> ---> 页面的布局
</body>
1. 这种hack只在IE10以下有效，因为IE6是一个版本，IE7/8/9又是一个版本，而IE10以上的
浏览器已经接近于标准浏览器，取消了这种hack；
2. <!--[if IE 6]>：只在IE6上生效； <!--[if gte IE 6]>：IE6+上有效；
2. 检测低版本IE
function checkIE(version) {
let b = document.createElement('b')
b.innerHTML = '<!--[if IE ' + version + ']><i></i><![endif]-->'
return b.getElementsByTagName('i').length == 1
} --> console.log(checkIE(8)) --> 当前浏览器为IE8时，返回true，否则返回false
网友评论