// index.html 文件
<!--1，行内样式-->
<div style='width:100px;height:100px;border:1px solid;'></div><!--2，嵌入样式-->
<style>*{margin:0;  padding:0;}
</style><!--3，链接样式-->
<link rel="stylesheet" type="text/css" href="base.css" /><!-- 4，导入样式-->
<style>@import url(base.css);
</style>// base.css 文件
@import url(common.css);

link和@import 区别

• link是html引入css方式，@import是css引入方式
• 浏览器会先加载页面时同步加载link引入的css文件；页面加载完成后，再加载@import引入的css
• 浏览器对link的兼容性更高：@import 只有在 ie5 以上才可以被识别，而 link 是 html 标签，不存在浏览器兼容性问题
• 优先级：link > @import

<!-- 1. 表单元素type=hidden  未脱离文档流，无法触发绑定的事件，
所谓的脱离文档流就是指它所显示的位置和文档代码的顺序不一致-->
<input type='hidden' /><!-- 2. display:none; 或者 html的hidden属性 脱离文档流，无法触发绑定的事件-->
<div style='display:none;'></div>
<div hidden></div><!-- 3. visibility: hidden; 未脱离文档流，无法触发绑定的事件 -->
<div style='visibility:hidden;'></div><!-- 4. 透明度opacity:0; 未脱离文档流，可以触发绑定的事件 -->
<div style='opacity:0;'></div><!-- 5. 绝对定位position:absolute; 未脱离文档流，可以触发绑定的事件 -->
<div style='position:absolute;left:-9999px'></div>
<!-- 设置宽高为0，设置透明度为0，设置z-index位置在-1000  -->

2-1，display:none 与 visibility:hidden 的区别是什么？

• display : 隐藏对应的元素但不挤占该元素原来的空间。
• visibility: 隐藏对应的元素并且挤占该元素原来的空间。

即是，使用 CSS display:none 属性后，HTML 元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用 visibility:hidden 属性后，HTML 元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。

2-2，visibility属性collapse

visibility的属性collapse，跟hidden是一样的。但如果这个元素是table相关的元素，例如table行，table group，table列，table column group，它的表现却跟display: none一样，也就是说，它们占用的空间也会释放。

（1）有两种， IE 盒子模型、W3C 盒子模型；
（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
（3）区 别： IE 的 content 部分把 border 和 padding 计算了进去;

1，浮动语法 float:left/right;
2，浮动float的目的： 实现文字环绕效果
3，清除浮动的原因： 父级塌陷，—在父级没有设置高度的情况下，父级内的元素在浮动之后会脱离文档流。
4， 清除浮动的方法

• 4-1，空块级标签添加clear: both;属性
  在浮动元素后面添加一个块级元素，并使这个块级元素有 clear: both;属性

• 4-2. 父级添加overflow: hidden；

  先找到浮动盒子的父元素，给父元素添加一个属性：overflow:hidden，就会清除子元素对页面的影响

• 4-3，给父级元素添加伪类after（推荐使用）
  同时使用clear: both;，只是变相的使用了伪类after，页面结构简洁，无需额外的标签，浏览器兼容性好

.cc:after {content: '';height: 0;line-height: 0;display: block;visibility: hidden;clear: both;}

• 4-4 给父级添加双伪类

 	.cc:after,.cc:before {content: "";display: block;clear: both;}

• 4-5 给父级设置宽高（不推荐使用）

1，id选择器（ # myid）
2，类选择器（.myclassname）
3，标签选择器（div, h1, p）,
4，相邻选择器（h1 + p）
5，子选择器（ul > li）,
6，后代选择器（li a）
7，通配符选择器（ * ）,
8，属性选择器（a[rel = “external”]）
9，伪类选择器（a:hover, li:nth-child）

CSS选择器优先级怎么计算的
CSS选择器优先级通过计算选择器中特指度对CSS规则进行层叠。

特指度指选择器中ID、类、标签名出现的次数，并以ID-CLASS-ELEMENT顺序计算。规则：
!important > ID选择器 > 类选择器 > 标签选择器
行类样式 > 嵌入样式 > 链接样式; 后声明样式 >先声明样式
设定的样式 > 继承的样式

position的属性值常用的：static、relative、absolute、fixed。
不常用的：inherit、initial、sticky

• 1，static定位

  html元素的默认值，即没有定位，元素出现在正常的流中。不会受到top bottom left right 影响。不能通过z-index进行层次分级。

• 2，fixed定位：

  参照物：浏览器窗口；脱离DOM流，不占据空间； 常用作漂浮广告，不随滚动条拖动。top、left的定位起点是包含块左上角，right、bottom的定位起点是包含块右下角

• 3，absolute 绝对定位：
  脱离文档流，依据最近的已经定位的父元素，当父级 position 为 static 时，absolute元素将依据body根元素（浏览器窗口）进行定位。
  top、left的定位起点是包含块左上角，right、bottom的定位起点是包含块右下角

• 4，relative 相对定位，
  相对定位不脱离文档流，参考其在原来文档流中的位置，通过 top,bottom,left,right 定位。其值的定位起点都是是父元素左上角(这点和absoute、fixed不一样)

• sticky 粘性定位
  sticky定位是 相对定位relative和固定定位fixed的结合；
  它主要用在对scroll事件的监听上，在滑动过程中，元素先按照普通文档流定位，然后相对于该元素在流中的 BFC和 最近的块级父元素相对定位。而后，元素定位表现为在跨越特定阈值为固定定位。
  使用条件：

  1. 父元素不能设置 overflow:hidden; 或者 overflow:auto; 属性；
  2. 必须制定 top、bottom 、left 、 right 4个值之一，否则只会处于相对定位；
  3. 父元素的高度不能低于sticky 元素的高度；
  4. sticky 元素仅在其父元素内生效；

z-index属性
正常的文档流一定程度上发生改变，造成元素显示出现重叠的情形，特别是使用绝对定位时。为了能让重叠的元素有序的显示出来，需要在定位时对相关元素加上z-index属性，其值是一个整数值（默认值为0），数值越大表示拥有的优先级越高。该属性只对使用了定位的元素有效。

    （1）通过媒体查询的方式即CSS3的meida queries（2）以天猫首页为代表的 flex 弹性布局（3）以淘宝首页为代表的 rem+viewport缩放（4）rem 方式

参考！！！！！！！！！！！！

• 行高是指一行文字的高度，具体说是两行文字间基线的距离。CSS中起高度作用的是height和line-height，没有定义height属性，最终其表现作用一定是line-height。
• 单行文本垂直居中：把line-height值设置为height一样大小的值可以实现单行文字的垂直居中，其实也可以把height删除。
• 多行文本垂直居中：需要设置display属性为inline-block。

line-height属性1.5和150%区别

• 父元素设置line-height:1.5会直接继承给子元素，子元素根据自己的font-size再去计算子元素自己的line-height。
• 父元素设置line-height:150%是计算好了line-height值，然后把这个计算值给子元素继承，子元素继承拿到的就是最终的值了。此时子元素设置font-size就对其line-height无影响了

• px是固定长度单位，不随其它元素的变化而变化
• em是相对于父级元素的单位，会随父级元素的属性（font-size或其它属性）变化而变化
• rem是相对于根目录（HTML元素）的，所有它会随HTML元素的属性（font-size）变化而变化

浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

页面渲染的一般过程为JS > CSS > 计算样式 > 布局 > 绘制 > 渲染层合并。

其中，Layout(重排)和Paint(重绘)是整个环节中最为耗时的两环，会影响重排和重绘的CSS属性有background-color, box-shadow ,display, height

1，触发动画的开始不要用diaplay:none属性值，因为它会引起Layout、Paint环节，通过切换类名就已经是一种很好的办法。

2，translate属性值来替换top/left/right/bottom的切换，scale属性值替换width/height，opacity属性替换display/visibility等等

3， 优化动画，使用3D启用GPU硬件加速

https://blog.csdn.net/qq_27674439/article/details/98957581

伪类  单冒号
:hover  将样式添加到鼠标悬浮的元素
:active 将样式添加到被激活的元素
:focus  将样式添加到获得焦点的元素
:link   将样式添加到未被访问过的链接
:visited    将样式添加到被访问过的链接
:first-child    将样式添加到元素的第一个子元素
:lang   定义指定的元素中使用的语言伪元素   单双冒号都可
::first-letter  将样式添加到文本的首字母
::first-line    将样式添加到文本的首行
::before    在某元素之前插入某些内容
::after 在某元素之后插入某些内容

伪类和伪元素区别

• 伪类
  表示已存在的某个元素处于某种状态，但是通过dom树又无法表示这种状态，就可以通过伪类来为其添加样式，如：a:hover

• 伪元素
  主要是用来创建一些不存在原有dom结构树种的元素，例如：用::before和::after在一些存在的元素前后添加文字样式等，这些被添加的内容会以具体的UI显示出来，被用户所看到的，这些内容不会改变文档的内容，不会出现在DOM中，不可复制，仅仅是在CSS渲染层加入。

• 1, 转化成（行级）块元素,将img块状化

	ul li img{display:block;}

• 2, 浮动

  浮动后的元素默认可以转化为块元素（可以随意设置宽高属性）

	ul li img{float:left;}

• 3, 给 img 定义 vertical-align（消除底部边距） 推荐

	img{    border: 0;    vertical-align:top|bottom|text-top|text-bottom;}

• 4, 将其父容器的font-size 设为 0；
• 5， 给父标签设置与图片相同的高度

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的、能够起作用的版本开始，并不断扩充，以适应未来环境的需要。

低版本用户居多，则优先采用渐进增强的开发流程；若高版本用户居多，则为了提高大多数用户的使用体验，那当然优先采用优雅降级

// 渐进增强
.transition{-webkit-transition: all .5s;-moz-transition: all .5s;-o-transition: all .5s;transition: all .5s;  
}
// 优雅降级
.transition{ transition: all .5s;-o-transition: all .5s;-moz-transition: all .5s;-webkit-transition: all .5s;
}