Css总结

页面样式导入的方法及区别

<link rel="stylesheet" type="text/css" href="./css/index.css" />
<style type="text/css"></style>
@import
    @import url("global.css");
    @import url(global.css);
    @import "global.css";

link
  不仅可以加载css还可以定义rss等其他事物，无兼容问题
  支持使用js控制改变样式
  页面加载自上而下，权重大于@import
@import
  只能加载css,低版本的浏览器不支持
  不可以使用js控制改变样式
  先加载HTML后加载CSS,会导致内容闪烁

Css选择器，优先级

id选择器    (#myid)
类选择器   (.myclassname)
标签选择器  (div, h1, p)
相邻选择器  (h1 + p)
子选择器   （ul > li）
后代选择器  （li a）
通配符选择器   *
属性选择器 （a[rel="external"]）
伪类选择器 （a:hover, li:nth-child）
优先级
   !important 比内联优先级高
   权重：
    内联1000，
    ID100，
    伪类/属性选择器10，
    类型选择器/伪元素选择器/标签选择器1，
    通用选择器（*）/子选择器（>）/相邻同胞选择器（+）0

块级元素、内联元素、空元素

行内元素：a span img input select
块级元素：div ul ol li dl dt dd h1 p
空元素： <link> <meta> <br> <hr>

重汇回流

重汇：渲染树中的元素外观（如：颜色）发生改变，不影响布局，会产生重绘
回流：渲染树的元素布局发生改变，会产生重绘回流，回流必定产生重绘，重绘一定不会产生回流
注：js获取layout属性值（offsetLeft、scrollTop等）也会引起回流，浏览器通过回流计算最新值

伪类，伪元素

伪类：单冒号（:）
伪元素：双冒号(::)，用于向某些选择器设置特殊效果，::before,::after,::first-line,::first-letter

盒子模型box-sizing

标准盒子模型(默认：content-box)： 宽度 = 内容的宽度(content) + border + padding + margin
IE盒子模型(border-box)：     宽度 = 内容的宽度(content + border + padding) + margin

position定位

static（默认）：    按照正常文档流进行排列；
relative（相对定位）： 不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；
absolute(绝对定位)：  脱离文档流，参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；
fixed(固定定位)：   所固定的参照对像是可视窗口。

浮动float

浮动元素，不在文档流中
带来的问题：
   a.父元素的高度无法被撑开，影响与父元素同级的元素
   b.与浮动元素同级的非浮动元素（内联元素）会跟随其后
   c.若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。
清除的方式：
   a.父级div定义height
   b.最后一个浮动元素后加空div标签 并添加样式clear:both
   c.包含浮动元素的父标签添加样式overflow为hidden或auto。
   d.父级div定义zoom

rgba和hsla

/* IE8之前的版本不支持这两个属性 */
.div1{
    color:rgba(0,0,255,0.8)            /* rgba指的是"红色、绿色、蓝色、透明度"，取值为0-255 或 0%-100% */
}
.div2{
    color:hsla(182,44%,76%,0.5)        /* hsla指的是"色调(0-360)、饱和度(0%-100%)、亮度(0%-100%)、透明度(0-1)" */
}

flex布局

.div{
    display:flex;
    flex-direction:row;            /* 方向，默认row;               row | row-reverse | column | column-reverse; */
    flex-wrap:nowrap;              /* 换行，默认nowrap;            nowrap | wrap | wrap-reverse */
    justify-content:flex-start;    /* 对其方式，默认flex-start;    flex-start | flex-end | center | space-between | space-around; */
    align-items:flex-start;        /* 交叉轴对齐，默认flex-start;  flex-start | flex-end | center | baseline | stretch; */
    align-content: flex-start;     /* 多根轴对齐，默认flex-start;  flex-start | flex-end | center | space-between | space-around | stretch; */
    flex:0;                        /* 占据的空间大小，默认0;        0,按比例，auto */
}

display

inline（默认）--内联
none--隐藏
block--块显示
table--表格显示
list-item--项目列表
inline-block
display:none,在页面中不占据位置，会产生回流和重绘问题
visibility：hidden，保留原来的位置*

overflow

scroll:必会出现滚动条,
auto:子元素内容大于父元素时出现滚动条
visible:溢出的内容出现在父元素之外
hidden:溢出隐藏

png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？

1.png 是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式.优点是：压缩比高，色彩好。 大多数地方都可以用。
2.jpg 是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。
3.gif 是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果.
4.webp 格式是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%。缺点是压缩的时间更久了，兼容性不好，目前谷歌和opera支持。

Css Sprites

雪碧图，将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background- repeat，background-position 的组合进行背景定位。
能很好地减少网页的http请求，从而大大的提高页面的性能；

calc

/* calc，运算符前后需要保留一个空格 */
.sideBar{    
    width: calc(100% - 10px)
}

line-height

行高：指一行文字的高度，两行文字间基线的距离

元素竖向百分比

元素设置百分比的属性都是相对于宽度
单行文本垂直居中：height与line-height设置一样高

px,em,rem

px，相对长度，相对于显示器屏幕分辨率而言
em，相对长度，相对于父级元素的字体大小
rem，相对单位，相对于HTML根元素

为什么要初始化Css样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

Css3新的特性

浏览器字体问题

浏览器最小字号为12px;若还想在小，transform: scale(0.7)缩放功能
建议使用偶数字号；偶数字号相对更容易和web设计的其他部分构成比例关系，Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。

移动端0.5px边框

建议采用 :after 1px然后transform: scale(0.5);

如果需要手动写动画，你认为最小时间间隔是多久，为什么？

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。