CSS

基础

页面导入样式时，使用link和@import有什么区别？

  • link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
  • 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
  • @import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;

盒子模型，CSS3的box-sizing值有哪些？

盒子模型是指用来装页面上元素的矩形区域，CSS的盒子模型包括IE盒子模型和标准W3C的模型。区别在于width，IE盒子中width表示Content+padding+border。

box-sizing有三种属性，一种是content-box，一种是border-box,还有一个是从父元素继承的inherit。现在还有一个padding-box。

content-box一 宽高应用到内容框

border-box— 宽高包括了内边距和边框

padding-box—高宽包括了内边距

行内元素有哪些？块级元素有哪些？空元素有哪些

首先：CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为“block”，则为“块级”元素；span默认display属性值为“inline”，是“行内”元素。
（1）行内元素有：a b span img input select strong（强调的语气）
（2）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）常见的空元素：
<br><hr><img><input><link><meta>
鲜为人知的是：
<area><base><col><command><embed><keygen><param><source><track><wbr>

行内元素和块级元素的区别与互换

  • 区别

    • 行内元素会在一行水平方向排列，块级元素独占一行，自动填满父级元素
    • 块级元素可以包含行内元素和块级元素，行内只能包含文本和其他行内元素
    • 盒模型属性上，行内元素width height无效，pading和margin垂直方向上无效

  • 互换

    display：inline/block

  • inline-block元素

    既可以设置高宽，又有inline元素不换行的特性。

inline-block、inline和block的区别？

block是块级元素，能设置宽高，margin/padding都有效前后都有换行符

inline设置宽高无效，margin在竖直方向无效，padding有效，前后无换行符

inline-block可以设置宽高，margin/padding有效，前后无换行符

为什么img是inline还可以设置宽高？

img是可替换元素，这类元素的展现效果不是由CSS来控制的。他们是一种外部对象，外观的渲染独立于CSS。内容不受当前文档的样式影响，CSS可以影响可替换元素的位置，但是不会影响到可替换元素自身的内容。（比如iframe，可能有自己的样式表，不会继承父文档的样式）
可替换元素有内置宽高，性质同设置了inline-block一样。

CSS 中 inline 元素可以设置 padding 和 margin 吗？

width、height可以设置，但是没有用。

padding 左右是有用的，上下么有用。

margin 上下左右都有用。

伪类和伪元素？

伪类可以理解为是一种状态，而伪元素则代表一些实实在在存在的元素，但是它们都是抽象刻画的，游离于标准文档之外。

伪类存在的意义是为了通过选择器，格式化dom树以外的信息（:visited,:link），以及不能被常规CSS选择器获取到的信息（比如说获取第一个子元素，常规css选择器不行,可以用：first-child）。

伪类常用的有first-child、last-child、nth-child、first-of-type(父元素第一个特定的子元素)、last-of-type、nth-of-type、lang、focus、lvha（a标签四个）

伪元素可以创建一些文档语言无法创建的虚拟元素，比如文档语言没有一种机制可以描述元素内容第一个字母或者第一行，但是伪元素可以::first-letter,::first-line。同时伪元素还可以创建文档中不存在的内容比如说::after,::before。

伪元素主要有：

::after,::before,::first-letter,::first-line,::selection

CSS选择器的权重

  • ！important 权重无限大
  • 内联样式 写在html标签里的
  • 类 伪类 和属性选择器
  • 标签选择器和伪元素选择器 div p:after
  • 通配符、子选择器、相邻选择器
  • 继承的样式没有权值

外边距重叠

多个相邻(兄弟或父子) 普通流的块级元素在垂直方向的margin会重叠

  • 两个相邻的外边距都为正数，折叠结果是较大的值
  • 两个相邻的外边距为负数，折叠结果是绝对值较大的值
  • 两个相邻外边距为一正一负，折叠结果是他们的和

层叠上下文

层叠上线文就是结界，其中的元素如果跟层叠上下文之外的元素发生层叠，就比较他们的层叠水平高低来显示。

创建的方法：postion为relative、absolute、fixed的元素设置z-index

顺序是：底层的border、background，负值z-index，块级盒子，浮动盒子，内联盒子，z-index：auto, 正z-index

说一下什么是BFC

BFC是块级格式化范围，决定了元素如何对其内容进行定位，以及和其他元素的关系和相互作用。可以理解为它就是个独立的容器，容器里面的布局与外面互不影响。

触发规则：

  • 根元素
  • 浮动元素
  • postion：absolute 或 fixed
  • display：inline-block，table-cell，table-caption，flex，inline-flex
  • overflow：不为visible

规则：垂直方向一个一个放；距离由margin决定，同一个bfc里面相邻会重叠；不会和浮动元素重叠；计算高度时浮动子元素也计算；容器内与容器外互不影响。

主要用途：清除浮动 防止margin重叠

元素隐藏方法和区别

  • display：none元素不可见，不占据空间，资源会加载，DOM可以访问
  • visibility:hidden元素不可见，不能点击，但占据空间，资源会加载，可以使用。
  • opacity：0 元素不可见、可以点击，占据空间，可以使用。（不占据的话再加一个position absolute)(不能点击不占据空间 postion absolute+z-index:-1)(不能点击、占据空间 postion relative z-index:-1)

display：none和visibility:hidden的区别

  • display：none元素不占据空间，visibility:hidden空间保留
  • display：none会影响opacity过渡效果
  • display会产生重绘回流，visibility:hidden只重绘
  • display：none节点和子孙节点都不见，visibility:hidden的子孙节点可以设置visibility:visible显示。
  • visibility:hidden不会影响计数器计数（ol标签）

Rem,em和px的区别

px是绝对长度单位。

em是相对长度单位，继承父级元素的字体大小，所有字体都是相对于父元素大小的

rem也是相对长度单位，但它是相对于根元素（html),不会像em造成混乱。

如何清除浮动

当元素设置float浮动后，该元素会脱离文档并向左向右浮动，直到碰到父元素或者另一个浮动元素，浮动元素会造成父元素高度塌陷，所以设置完浮动之后需要进行清除浮动

解决方案：

  • BFC

    给父容器加上overflow:hidden，加上之后，形成BFC，需要计算超出的大小来隐藏，所以父容器会撑开放入子元素，同时计算浮动的子元素。

    缺点：但是一旦子元素大小超过父容器大小就会显示异常。

  • 使用带有clear属性的空元素

    在浮动元素后面添加一个不浮动的空元素，父容器必须考虑浮动子元素的位置，子元素出现在浮动元素后面，所以显示出来就正常了。

    同时要给空元素加上:style="clear:both"

    缺点：需要添加额外的html标签，这违背了语义网的原则

  • 使用伪元素::after

    它父容器尾部自动创建一个子元素，原理和空元素一样，可以把它设置为height：0不显示，clear：both display:block，保证空白字符不浮动区块。
    (但是：after不支持IE6，只需要添加上zoom：1,这个是激活父元素的haslayout属性，让父元素拥有自己的布局）

    .clearifx::after{
    content:'';
    height:0;
    clear:both;
    display:block;
}
.clear{
    zoom:1;
}

img和background-image的区别

  • 解析机制：img属于html标签，background-img属于css。img先解析
  • SEO：img标签有一个alt 属性可以指定图像的替代文本，有利于SEO，并且在图片加载失败时有利于阅读
  • 语义化角度：img语义更加明确

rgba()和opacity的区别

  • opacity作用于元素及元素中所有的内容（包括文字、图片） 有继承性
  • rgba()只用于元素的颜色及背景色
  • 当opacity属性的值应用于某个元素上时，把这个元素和它内容当作一个整体来看待，即使这个值没有被子元素继承。因此一个元素和它包含的元素都会有与元素背景相同的透明度，哪怕父子元素由不同的opacity的值。

outline和border的区别

  • outline轮廓是绘制于元素周围的一条线，位于边框边缘的外围，可以起到突出元素的作用
  • outline的效果将随元素的focus而自动出现，相应的由blur自动消失，这些都是浏览器的默认行为，不需要js配合css来控制
  • outline不占据空间，不会像border那样影响元素的尺寸或者位置。

CSS哪些属性可以被继承

  • 字体相关属性
    • font-family 字体系列
    • font-weight 字体粗细程度
    • font-size 字体大小
    • font-style 字体风格
  • 文本相关属性
    • text-indent 文本缩进
    • text-align 文本对齐方式
    • line-height 行高
    • color 文本颜色
  • 元素可见性
    • visibility 控制元素的显示和隐藏
  • 列表布局属性
    • list-style 列表风格 包括list-style-type list-style-image等
  • 光标属性
    • cursor 光标显示的各种形态

CSS动画如何实现

创建动画序列，需要animation属性或其子属性，属性允许配置动画时间、时长和动画细节。

动画的实际表现由@keyframes 规则实现

transtion也可以实现动画，但强调过渡，是元素的一个或多个属性变化时产生的过渡效果，同一个元素通过两个不同的途径获取样式，而第二个途径当某种改变发生时（如：hover)才能获取样式，这样就会产生过渡动画。

transition、animation的区别

animation和transition大部分属性相同，都是随时间改变元素的属性值，区别是transition需要触发一个事件才能改变属性；animation不需要触发任何事件随时间改变属性。transition为2帧，从from……to ，animation可以一帧一帧的。

CSS3

新特性

  • 新增选择器：E：nth-child(n) E:nth-last-child(n)
  • Transition、Transform和Animation 
transition：
div{
    transition-property:width;
    transition-duration:1s;
    transition-timing-function:linear;
    transition-delay:25;
    /*简写形式*/
    transition:width 1s linear 25;
}

transform:
div{
    transform:rotate(7deg);
    -ms-transform:rotate(7deg);/*IE9*/
    -moz-transform:rotate(7deg);/*FireFox*/
    -webkit-transform:rotate(7deg);/*Safari和Chrome*/
    -o-transform:rotate(7deg);/*Opwea*/
}

animation:
@keyframes myAnimation{
    0%{background:red;width:100px;}
    25%{background:orange;width:200px;}
    50%{background:yellow;width:100px;}
    75%{background:green;width:200px;}
    100%{background:blue:width:100px;}
}
#box{
    animation:myAnimation 5s;
    width:100px;
    height:100px;
    background:red;
}
  • 边框：box-shadow,border-radius
  • 背景：background-clip,background-size
  • 文字：text-shadow,text-overflow
  • 字体：@font-face 
@font-face{
    font-family:myFirstFont;
    src:url(sansation_light,woff);
}

硬件加速

让一个元素左移100px，使用left和transform有什么区别？

使用left等属性来设置动画会一直触发浏览器的重绘，而使用CSS3中国的transform会采用GPU硬件加速，不会触发重绘，性能更好

硬件加速的原理

DOM树和CSSOM合并后形成Render树。渲染树中包含了大量的渲染元素，每一个渲染元素会被分到一个图层中，每个图层又会被加载到GPU形成渲染纹理。GPU中的transform是不会触发重绘的，这一点非常类似3D绘图功能。最终这些使用tranform的图层都会由独立的合成器进程进行处理。

总结：

CSS3 transform创建了一个新的复合图层，可以被GPU直接用来执行transform，从而不触发浏览器的重绘来达到加速的目的

以下情况会创建一个独立的复合图层：

  • 3D或者CSS transform
  • <videl>和<canvas>标签
  • CSS filters
  • 元素覆盖时，比如用了z-index属性

如何硬件加速

以下CSS属性可以触发硬件加速：

  • transform
  • opacity
  • filter
  • will-change:告知浏览器哪一个属性即将变化
  • 还可以通过transform的3D属性强制开始GPU加速 
transform:translateZ(0);
transform:rotateZ(360deg);

使用硬件加速的注意事项：

  • 不能让每个元素都启用硬件加速，这样会占用很大的内存，使页面有很强的卡顿感，
  • GPU渲染会影响字体的抗锯齿效果，这是因为GPU和CPU具有不同的渲染机制，即使最终硬件加速停止了，文本还是会在动画期间显示得很模糊。

布局

水平居中的实现方案

  • 利用块级元素撑满父元素的特点，如果宽度已定，左右margin auto就可以平分剩余空间
  • 利用行内块居中： 把父级元素设置为text-align=center，之后子元素的display设置为inline-block
  • 绝对定位：postion ：absolute，之后left 50%
  • flex: 父元素display:flex justify-content：center

垂直居中的实现方案

  • 元素无高度

    利用内边距，让块级文字包裹在padding中，实现垂直居中。

  • 父元素高度确定的单行文本：

    使用行高的特性：height=line-height即可。

  • 父元素高度确定的多行文本：

    利用vertical-align（只能内联元素）如果是div，可以设置为table和table-cell。

    display：table-cell;
vertical-align:center;

  • 父元素高度未知：

    绝对定位，设置top 50%

    parent{
    position:relative;
}
child{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
}

    如果子元素有高度

    child{
    position:absolute;
    top:50%;
    height=Hpx;
    margin-top:(H/2)px;
}

  • 父元素高度已知

    parent{
    height:Hpx;
}
child{
    position:relative;
    top:50%;
    transform:translateY(-50%);
}

  • flex方法

    disply:flex;
align-items:center;

垂直水平居中的实现方案

  • 居中元素的宽高已知

    • 利用绝对定位和margin 
    parent{
    position:relative;
}
child{
    position:absolute;
    top:50%;
    left:50%;
    margin-top:(-H/2)px;
    margin-left:(-W/2)px;
}
    • absolute+margin:auto 
    child{
    width:50px;
    height:50px;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}
    • 用calu计算 
    child{
    position:absolute;
    top:calc(50%-50px);
    left:calc(50%-50px);
}

  • 垂直居中的元素宽高未知

    • transform的translate方法 
    child{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}
    • flex布局 
    child{
    display:flex;
    align-items:center;
    justify-content:center;
}

两栏布局，左边固定，先加载内容区

  • float。两个div。左边float:left，width:200 px，右边 margin-left=width。
  • 绝对定位。两个div。左边absolute或者fixed 右边margin-left=width
  • table布局。三个div，父元素display：table，子元素display table-cell width，右边自适应
  • flex布局。三个div,父元素display flex; 子元素flex:1

三栏布局

  • 浮动布局 float:left right，中间根据两边的width设置margin(要加两边的border)

  • 绝对定位 父元素 relative，左右leftright各为0，absolute，中间元素设置margin

  • BFC 左右float，中间overflow：hidden

  • Flex 写法左中右，父元素display:flex，中间区域flex:1

  • table布局，写法左中右，父元素display：table，三个元素table-cell

  • 圣杯布局 写法中左右，中间width100%，左边margin-left -100%，右边margin-left= -width（-100px); 然后防遮住中间，左右相对定位relative。

  • 双飞翼 中间再包裹一层，左，右。中间父元素 float left，width：100%。

    中间子元素 margin left right 左右的width。 左右float,左边margin-left -100%，右边margin-left -width

Flex布局

Flex是弹性布局，用来为盒装模型提供最大的灵活性。布局的传统解决方案基于盒装模型，依赖display、position和float属性。任何一个容器都可以指定为 Flex 布局。

注意：设置为 Flex 布局后，子元素的 float 、clear 和 vertical-align 属性将失效。

属性分为容器属性和元素属性：

  • 容器属性包括

    • flex-direaction:决定主轴方向 
    .box{
    flex-direaction:row|row-reverse|column|column-reverse;
}
    • flex-wrap:决定了如何换行 
    .box{
    flex-wrap:nowrap|wrap|wrap-reverse;
    /*不换行|换行第一行在上|换行第一行在下*/
}
    • flex-flow:前面两个的简写 
    .box{
      flex-flow:<flex-direction>||<flex-wrap>;
  }
    • justify-content：水平轴对齐方式 
    .box{
      justify-content:flex-start|flex-end|center|space-between|space-around;    
  }
    • align-items: 垂直轴对齐方式 
    .box{
    align-items:flex-start|flex-end|center|space-between|space-around;
}

  • 元素属性align-content

    • order 定义项目的排序顺序，越小越靠前
    • flex-grow 放大比列，默认是0，即使存在空间也不会放大，1是说等分剩余空间
    • flex-shrink 缩小比例，当空间不够的情况下，会等比缩小为0不缩小，为1等比缩小
    • flex-basis 定义分配多余空间时，项目占据的控件
    • flex 上面三个属性的缩写，默认是0 1 auto。后两个属性可选。
    • align-self 允许单个与其他不一样的对齐方式，可以覆盖align-items属性，默认是auto表示继承。

Grid布局

  • 容器属性

    • display:grid 指定一个容器采用网格布局
    • grid-template-columns 定义每一列的列宽 可以用百分比
    • grid-template-rows 定义每一行的行高 可以用百分比 
    /*九宫格布局*/
。container{
    display:gird;
    grid-template-columns:33.33% 33.33% 33.33%;
    grid-template-rows:33.33% 33.33% 33.33%;
}
    • grid-row-gap 行间距
    • grid-column-gap 列间距
    • grid-gap 上面两个的简写

多端适应

静态布局

特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。

一般都使用min-width定宽，小于这个宽度就会出现滚动条，大于就内容居中加背景。

设计方法：

PC端居中布局所有样式绝对宽高，设计一个layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩的部分。

移动设备另外建立，单独设计一个布局，使用不同的域名如wap或m

流式布局

布局特点：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。【这就导致如果屏幕太大或者太小都会导致元素无法正常显示】

设计方法：使用%百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。

这种布局方式在Web前端开发的早期历史上，用来应对不同尺寸的PC屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式，但缺点明显：如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样，显示非常不协调。

自适应布局

分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部（页面元素位置发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。

布局特点：屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。

设计方法：使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局。

响应式布局

响应式设计的目标是确保一个页面在所有终端上（各种尺寸的PC、手机、手表、冰箱的Web浏览器等等）都能显示出令人满意的效果，对CSS编写者而言，在实现上不拘泥于具体手法，但通常是糅合了流式布局+弹性布局，再搭配媒体查询技术使用。

分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。即：创建多个流体式布局，分别对应一个屏幕分辨率范围。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。

布局特点：每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。

媒体查询+流式布局。通常使用 @media 媒体查询 和网格系统 (Grid System) 配合相对布局单位进行布局，实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。

优点：适应pc和移动端，如果足够耐心，效果完美

缺点：（1）媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。（2）要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本。

弹性布局

特点是：包裹文字的各元素的尺寸采用em/rem做单位，而页面的主要划分区域的尺寸仍使用百分数或px做单位（同「流式布局」或「静态/固定布局」）。早期浏览器不支持整个页面按比例缩放，仅支持网页内文字尺寸的放大，这种情况下。使用em/rem做单位，可以使包裹文字的元素随着文字的缩放而缩放。

CSS 模块化

vue中style标签中设置scoped的原理

这个局部样式是通过PostCSS给组件中所有的DOM添加了一个独一无二的动态属性，然后通过CSS属性选择器来选择组件中的DOM

CSS预处理

优点

  • 用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以便项目使用。
  • CSS更加简洁、适应性更强，更易于代码的维护

基本语法

Less的基本语法和CSS差不多，SASS和Stylus都可以利用缩进代替花括号，并且空格有重要的意义。

- less&scss;
ul{
    list-style:none;
}
-sass
ul
    list-style:none
- stylus:
ul
    list-style none

变量

-less&scss;
@orange:#feb914;
header{
    background-color:@orange;
}
- sass
$orange:#feb914;
header
    background-color:$orange;
- stylus
bgorange=#feb914;
header
    background-color bgorange

变量作用域

- less: less中素有变量的计算，都是以这个变量最后一次被定义的值为准，这个行为叫懒加载

@size:40px;
.content{
    width:@size;
}
@size:60px;
.container{
    width:@size;
}

=>编译输出
.content{
    width:60px;
}
.container{
    width:60px;
}

-sass stylus
$size:40px;
.content{
    width:$size;
}
$size:60px;
.container{
    width:$size;
}
=>编译输出
.content{
    width:40px;
}
.container{
    width:60px;
}

总结

  • sass和lessy语法严谨，Stylus相对自由，因为Less更像原生的CSS，所以可能学起来更加容易
  • sass和compass、stylus和nib都是好朋友
  • sass和stylus都具有类语言的逻辑方式处理：条件、循环等；less需要通过when等关键词模拟这些功能，这方面less比不上sass和stylus
  • less在丰富性及特色上都不及sass和stylus，如果不是bootstrap引入了less，可能不会这样被广泛应用。