前端面试之路一(HTML+CSS面试整理)

一、HTML基础

html常见元素和理解

html常见元素分类

  • head区元素:(不会在页面上留下直接内容)

    • meta
    • title
    • style
    • link
    • script
    • base
  • body区:

    • div/selection/article/aside/header/footer
    • p
    • span/em/strong
    • table/thead/tbody/tr/td
    • ul/ol/li/dl/dt/dd
    • a
    • form/input/select/textarea/button
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <base href="/"> 
  // 指定一个基础路径,所有的路径都是以这个为基准
  //viewport表示视图的大小
  //适配移动端第一步,viewport

HTML重要属性

  • a[href,target]

    • target:打开窗口。也可以设置框架中在哪个框架打开
  • img[src,alt]

    • alt:图片不可用时候,文字显示出来
  • table td[colspan,rowspan]
  • form[target,method,enctype](有表单的地方都建议放上form)

    • target:表单提交到哪儿
    • enctype:指定编码,如果上传文件指定要用form-data
  • input[type,value]
  • button[type]
  • select>option[value]
  • label[for]

    • label与input进行关联

如何理解html

  • HTML“文档”
  • 描述文档的结构
  • 有区块和大纲

“大纲”作用

  • 更好的让机器、搜索引擎、蜘蛛很好的理解结构
  • html的语义化

html版本

  • HTML4/4.01(SGML)浏览器做很多的容错和修正工作
  • XHTML(XML)要求非常严格,严格要求编码习惯
  • HTML5(基于HTML4)

html5新增内容

  • 新增区块标签

    • section
    • article
    • nav
    • aside //一般不出现在大纲中,表示不重要的广告类
  • 表单增强

    • 日期、时间、搜索
    • 表单验证
    • placehold自动聚焦

html5新增语意

  • header/footer头尾
  • section/article区域
  • nav导航
  • aside不重要内容
  • em/strong强调
  • i //icon

元素分类

按默认样式分

  • 块级block
  • 行内inline
  • inline-block

HTML分类法

《前端面试之路一(HTML+CSS面试整理)》

嵌套关系

默认样式和reset

  • 块级元素可以包含行内元素
  • 块级元素不一定能包含块级元素(p标签不能包含div)
  • 行内元素一般不能包含块级元素(a>div 合法,html5中a是transparent元素)

HTML标签在浏览器中都有默认的样式,不同的浏览器的默认样式之间存在差别。例如ul默认带有缩进样式,在IE下,它的缩进是由margin实现的,而在Firefox下却是由padding实现的。开发时浏览器的默认样式可能会给我们带来多浏览器兼容性问题,影响开发效率。现在很流行的解决方式是一开始就将浏览器的默认样式全部覆盖掉,这就是css reset。

Normalize.css

面试题

doctype的意义是什么?

  • 让浏览器以标准模式渲染
  • 让浏览器知道元素的合法性

HTMLXHTMLHTML5的关系

  • HTML属于SGML
  • XHTML属于XML,是HTML进行XML严格化的结果
  • HTML5不属于SGML或者XML,比XHTML宽松

HTML5有什么变化

  • 新的语义化标签
  • 表单增强(新的元素,表单验证)
  • 新的API(离线、音视频、图形、实时通信、本地存储、设备能力)

    • Canvas+WEBGL等技术,实现无插件的动画以及图像、图形处理能力;
    • 本地存储,可实现offline应用;
    • websocket,一改http的纯pull模型,实现数据推送的梦想;
    • MathMLSVG等,支持更加丰富的render

em和i有什么区别

  • em是语义化的标签,表强调
  • i是纯样式的标签,表斜体
  • HTML5i不推荐使用,一般用作图标

语义化的意义是什么

  • 开发者容易理解
  • 机器容易理解结构(搜索、读屏软件)
  • 有助于SEO
  • semantic microdata

哪些元素可以自闭合

  • 表单元素input
  • 图片img
  • br hr
  • meta link

HTML和DOM的关系

  • HTML是‘死’的(字符串,没有结构)
  • DOMHTML解析而来,是活的(是树,有结构)
  • JS可以维护DOM

propertyattribute的区别

  • attribute是‘死’的(属性,写在HTML中)
  • property是‘活’的(特性,DOM对象中)
  • attribute不会影响property,property也不会影响attribute

form作用

  • 直接提交表单
  • 使用submit/reset按钮
  • 便于浏览器保存表单
  • 第三方库可以整体提取值
  • 第三方库可以进行表单验证

二、css基础

cascading style sheet层叠样式表

选择器

选择器简介

  • 用于匹配HTML元素
  • 分类和权重
  • 解析方式和性能

    • 浏览器的解析方式是从右往左反着,然后再往前验证,主要出于性能的考虑,更快速的匹配到指定元素(左边范围太广了,比如<div>可能能找到几百个)
  • 值得关注的选择器

选择器分类

  • 元素选择器             a{}
  • 伪元素选择器         ::before{} //真实存在的容器
  • 类选择器                 .link{}
  • 属性选择器             [type=radio]{}
  • 伪类选择器             :hover{} //元素的状态
  • ID选择器               #id{}
  • 组合选择器             [type=checkbox] + label{}
  • 否定选择器             :not(.link){}
  • 通用选择器             *{}

选择器权重

  • ID选择器器             +100
  • 类 属性 伪类器       +10
  • 元素 伪元素器         +1
  • 其它选择器器          +0

计算一个不进位的数字

#id .link a[href]

计算:

  • #id          +100
  • .link       +10
  • a               +1
  • [href]      +0

结果:111

#id .link.active
#id       +100
.link       +10
.active   +10
结果:120

不进位

只要有id选择器,就是最大,类选择器再多也不会进位,只能在自己位上

百位    十位    个位

其他选择器权重

  • !important优先级最高
  • 元素属性优先级高 //元素的属性 > 外部样式表 (style标签,外部样式表)
  • 相同权重后写的生效

非布局样式

非布局样式

  • 字体字重颜色大小行高
  • 背景边框
  • 滚动换行
  • 粗体斜体下划线

字体

字体族

  • serif(衬线字体)
  • sans-serif(非衬线字体)
  • monospace(等宽字体,例如代码)
  • cursive(方正静蕾体)
  • fantasy

多字体
fallback机制

  • 指定多个字体,如果找不到会按照顺序使用其他字体,或者用同类字体
font-family:Monaco PingFangSC

英文字体用Monaco,但是Monaco没有中文字体,所以如果碰到中文会使用PingFangSC,一个字体一个字体的找

font-family:"Microsoft Yahei",serif

字体族不需要引号,因为不是具体的字体

.chinese{
    font-family:"PingFang SC","Microsoft Yahei",monospace
}

指定在mac系统上用PingFang SC,windows上用Microsoft Yahei,把单个平台独有的字体写到前面

网络字体、自定义字体

  • 自定义字体
@font-face{
    font-family:"IF";
    src:url("./IndieFlower.ttf");
}

.custom-font{
    font-family:IF;
}
  • 网络字体:注意跨域

iconfont

字体机制

  • 先把只有一个平台才有的写到最前面
  • 引用远程字体有问题的话,要注意跨域问题
  • 阿里巴巴的图标库,自选 iconfont.cn

行高

行高的构成

  • 行高由line-box决定
  • line-hight会撑起inline-box的高度,并不会影响本身布局的高度,但是会影响外部元素(line-box)
  • inline-box组成line-boxline-box高度是由inline-box决定

行高的相关现象

  • 一般做垂直居中用line-height做就行了
  • 默认情况是按照base-line对齐,如果要居中对齐就用vertical-align:middle
  • 底线、顶线和文字的顶和文字的底是不一样的

经典图片空隙问题

  • 原理:按照inline排版,如果按照inline排版的话,默认按照基线排版(base-line)
  • 基线和底线之间有距离的,如果12px字体那么缝隙可能就是3px
  • 解决方案:按照底线对齐,vertical-align:bottom 或者display:block

背景

背景颜色

    • HSL

      • H:Hue(色调)。0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 – 360
      • S:Saturation(饱和度)。取值为:0.0% – 100.0%
      • L:Lightness(亮度)。取值为:0.0% – 100.0%
        background:hsl(0,100%,50%)
    • RGB(A)
    • 背景图

    渐变色背景

    background: webkit-linear-gradient( left, red, green); //老式写法

    background: linear-gradient(to right,red, green) ;

    background: linear-gradient (45deg, red, green);

    background: linear-gradient( 135deg, red 0, green 50%, blue 100%)

    background: linear-gradient ( 135deg, transparent 0, transparent 49.5%,green 50%)

    多背景叠加

    background: linear-gradient( 135deg, transparent 0, transparent 49.5%,green 49.5%,green 50.5%,transparent 50.5%,transparent 100%),linear-gradient( 45deg, transparent 0, transparent 49.5%,green 49.5%,green 50.5%,transparent 50.5%,transparent 100%)
    
    background-size:30px 30px

    background实现各种渐变背景,可以通过叠加实现,放射渐变

    背景图片和属性(雪碧图)

    • 优点:

      • 减少加载网页图片时对服务器的请求次数
      • 提高页面的加载速度
      由所需图片拼成的一张 GIF 图片的尺寸会明显小于所有图片拼合前的大小。
      单张的 GIF 只有相关的一个色表,而单独分割的每一张 GIF
      都有自己的一个色表,这就增加了总体的大小。
      因此,单独的一张 JPEG 或者 PNG sprite 在大小上非常可能比把一张图分成多张得来的图片总尺寸小
    • 缺点:

      • 单个图片大小,考虑网络环境比较差的情况
      • 内存使用问题。大量空白你就会最终使用大量的无用的空白。
      一个例子是来自于WHIT TV的网站。
      注意这是一个1299×15,000像素的PNG图片。
      它也被压缩的很好——实际下载大小只有大概26K —
      但是浏览器并不会渲染压缩后的图片数据。当这个图片被下载并被解压缩之后
      • 维护比较麻烦,

    base64和性能优化

    • 一种文本格式,显示的是一串文本,而这串文本就是图片本身
    • 优点

      • 传输性能,减少http请求
    • 缺点:

      • 增大了体积的开销

        • 图片本身提交增大1/3
        • 增大css体积
      • 增加了解码的开销
    • 适用:小图标,例如:loading图
    • 用法:一般用在构建中转,打包

    多分辨率适配

    边框

    边框的属性

    • 线型
    • 大小
    • 颜色

    边框背景图

    border-img('./border.img') 30 round;
    
    //repeat:可能会导致不完整
    //round:整数个拼,可能会有一些空间上的压缩

    边框衔接(三角形)

    原理:利用边框衔接过程是斜切

    width:0px;
    border-bottom:30px solid red;
    border-left:20px solid transparent;
    border-right:20px solid transparent;

    滚动

    滚动行为和滚动条

    • visible:内容直接显示,撑出容器
    • hidden:超出容器部分隐藏
    • scroll:超出容器滚动,始终显示滚动条
    • auto:超出容器滚动,当内容比较短不需要滚动条的时候不显示滚动条

    在mac系统上收系统设置影响

    文本折行

    overflow-wrap(word-wrap)通用换行控制

    - 兼容性不太好,经常还用word-wrap
    - 是否保留单词
    - `normal`    只在允许的断字点换行(浏览器保持默认处理)。
    - `break-word`    在长单词或 URL 地址内部进行换行。
    

    word-break

    - 针对多字节文字,中文句子也是单词
    - `break-all`    允许在单词内换行。
    - `keep-all`    只能在半角空格或连字符处换行,中文句子也不换行,兼容性还有点问题
    

    white-space

    - 空白处是否断行
    - 不换行的话    `white-space: nowrap` 
    
    overflow-wrap: break-word ;
    word-break: keep-all;
    white-space: normal ;

    装饰性属性(粗体、斜体、下划线)

    • 字重(粗体) font-weight
    • 斜体font-style:itatic
    • 下划线text-decoration
    • 指针cursor

    hack

    • Hack看起来不合法但生效的写法
    • 主要用于区分不同的浏览器,只在特定的浏览器生效
    • 缺点

      • 难理解
      • 难维护
      • 易失效
    • 替代方案

      • 特性检测
      • 针对性加class
    • 使用注意

      • 标准属性写到前面,hack写到后面
    • 作用

      • 浏览器兼容性
    • 典型案例

      • checkbox
      • tabs

    css布局

    布局简介

    CSS布局

    • 早期以table为主(简单)

      • 解析并不是流式的,以前可能等待时间长,现在已经可以流式布局
    • 后来以技巧性布局为主(难)
    • 现在有flexbox/grid(偏简单)
    • 响应式布局是(必备知识)

    常用布局方式

    • table表格布局
    • float浮动+margin
    • inline-block布局
    • flexbox布局

    布局方式(表格)

    • display:table
    • display:table-row

    一些布局属性

    盒模型

    《前端面试之路一(HTML+CSS面试整理)》
    宽度和高度是只对内容区生效
    占据的空间是content + padding + border

    #### display/position

    display确定元素的显示类型:

    • block
    • inline
    • inline-block:有宽高有可以与其他元素排在同一行

    position确定元素的位置:

    • static:静态布局,按照文档流布局
    • relative:相对于元素本身的偏移,relative偏移时,元素所占据的文档空间不会产生偏移
    • absolute:从文档流脱离,相对于最近的父级absolute或者relative,如果父级不是的话,会一直网上到body
    • fixed:相对于屏幕/可视区域

    定位于relatvie、absolute、fixed都可以设置z-index,数值越大附带

    flexbox布局

    • 弹性盒子
    • 盒子本来就是并列的
    • 指定宽度即可

     

    • 低版本IE不支持
    • 出过三个版本,市面上各个浏览器都有对应的解析,会导致一些兼容性问题
    • 移动浏览器基本兼容,react Native和微信小程序可以直接用来布局

    弹性布局用法详解

    float 布局

    float

    • 元素“浮动”
    • 脱离文档流
    • 但不脱离文本流

    《前端面试之路一(HTML+CSS面试整理)》

    float对自身的影响:

    • 形成“块”(BFC),inline元素也可以设置宽高(BFC背后的神奇原理)
    • 位置尽量靠上
    • 位置尽量靠左(右)

    《前端面试之路一(HTML+CSS面试整理)》

    float本意就是要做文字环绕、图文混排等内容的

    对兄弟的影响

    • 上面贴着非float元素
    • 旁边贴float元素
    • 不影响其他块级元素位置
    • 影响其他块级元素内部文本

    对父级元素的影响

    • 从父级元素上“消失”
    • 高度“塌陷”

    解决“高度塌陷”的方案

    • 让父元素形成BFC来接管自己的高度

      • overflow:auto/hidden
      • 当里面的元素超出的时候自动滚动
    • 用其他元素撑起来
    container2::after{
        content:'';
        clear:'both';       //保证这个元素左右都是"干净"的,没有浮动元素
        display:block;      
        height:0;           //不占高度
        visibility:hidden   //不用显示
    }
    //比较经典的清除浮动布局的方式    

    float布局

    • 兼容性好

    float和margin实现两栏布局和三栏布局

    • 两栏布局:

      • float:left(左)
      • margin-left:左元素的宽度(右)
    • 三栏布局:记住“尽量往左靠,尽量往右靠”

      • float:left(左)
      • float:right(右)
      • 中间元素写在最后,否则右边的float元素不会对其

        • margin-left:左元素的宽度
        • margin-right:右元素的宽度

    inline-block布局

    • 像文本一样排block元素
    • 没有清除浮动等问题
    • 需要处理间隙

    处理间隙

    • 间隙来源:html中的空白
    • 处理办法:

      • 直接把两块html写在一起;
      • 两块中间加一个注释;<!-- -->
      • 父字体设置font-size:0;子块重新加上字体font-sizi:14px;

    响应式设计和布局

    响应式设计和布局

    • 在不同的设备上正常使用
    • 一般主要处理屏幕大小的问题
    • 主要方法:

      • 隐藏+折行+自适应空间
      • rem/viewport/media query

    viewport:

    • 适配的第一部永远是加上viewport
    • viewport`可视区大小=屏幕大小`,有些设备默认屏幕宽度980px
    • <meta name='viewport' content="width=device-width,initial-scale=1.0">
    • 如果固定使用width,可以使不同页面等比放大
    • 也可以根据window.innerWidth动态计算页面的宽度

    media query:

    @media(max-width:640px){
        .left{
            display:none;
        }
    }

    rem:

        html{
            font-size:16px; // 默认16个像素,为了好记一般设置10px,20px
        }
    @media (maxwidth: 375px){
        html{
            font-size :24px ;
        }
    }    
    @media (max-width: 320px){
        html{
            fonts ize: 20px;
        }
    }    
    @media (max-width: 640px){
        intro{
            margin: .3rem auto ;
            display: block;
        }
    }
    
    //精确性要求高的地方不要使用`rem`布局

    主流网站使用的布局方式

    float布局:兼容性好

    CSS面试题

    实现两栏(三栏)布局的方法

    • 表格布局 display:table
    • float+margin布局(清理浮动)
    • inline-block布局(处理间隙)
    • flexbox布局(兼容性不是特别好)

    position:absolute/fixed有什么区别?

    • 前者相对于最近的absolute/relative
    • 后者相对屏幕(viewport)
    • 如果要兼容老的设备,fixed兼容性不是很好

    display:inline-block的间隙

    • 原因:空白字符
    • 解决:消灭字符(标签写到一起不要加空白,或者中间写上注释)或者消灭间距

    如何清除浮动

    浮动元素不会占据父元素空间,因此父元素不会管浮动元素,很可能超出父元素,对其他元素产生影响。作为父元素一定要清除浮动,保证对外没有影响

    清除浮动原理

    • 让盒子负责自己的布局

      • overflow:hidden(auto)
      • ::after{clear:both}(也可以用单独的元素)

    如何适配移动端页面?

    • 首先适配viewport(页面宽度和移动端适配)
    • rem/viewport/media query(大小方面的适配)
    • 设计上:隐藏折行自适应

    css效果

    效果属性

    • box-shadow
    • text-shadow
    • border-radius
    • background
    • clip-path

    box-shadow

    • 营造层次感(立体感)
    • 充当没有宽度的边框
    • 特殊效果

    《前端面试之路一(HTML+CSS面试整理)》

    一个divxx系列,可以用box-shadow,其他图形可以通过点,确定是可能有性能问题

    text-shadow

    • 立体感
    • 印刷的品质感

    border-radius

    • 圆角矩形
    • 圆形(圆角足够大 border-radius:50%)

      百分比是宽高的百分比

    • 半圆/扇形
    • 一些奇怪的角角

    background

    多背景叠加(颜色、图片、渐变)

    效果

    • 纹理、图案

    《前端面试之路一(HTML+CSS面试整理)》

    • 渐变
    • 雪碧图动画

    《前端面试之路一(HTML+CSS面试整理)》

    .i{
        width: 20px ;
        height :20px ;
        background: url(./background.png) no repeat;
        background-size: 20px 40px;
        transition: background-position .4s ;
    }
    .i:hover{
        background-position: 0 20px;
    }
    • 背景图尺寸适应方案

    clip-path

    • 对容器进行裁剪
    • 常见几何图形
    • 自定义路径

    clip-path支持动画且不改变容器大小

    clip-path: inset(100px 50px);

    clip-path: circle(50px at 100px 100px);

    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 10% 10%, 40px 10px);

      clip-path: url(#clipPath);
      background-size: cover; 
     transition:clip-path .4s;

    支持svg

    transform

    3D-transform

    变换
    transform(2D)

    《前端面试之路一(HTML+CSS面试整理)》

    • translate(translateZ 3D立体)

    《前端面试之路一(HTML+CSS面试整理)》

    《前端面试之路一(HTML+CSS面试整理)》

    • scale
    • skew(斜切)
    • rotate
    transform:translateX(100px) translateY(100px) rotate(25deg)
    
    transform:rotate(25deg) translateX(100px) translateY(100px) 
    
    //有顺序
    • 缺点:性能不是很好
    • 复杂场景下出现渲染不一样问题

    面试题

    如何用一个div画xxx

    box-shadow无限投影
    ::before
    ::after

    如何产生不占空间的边框

    • box-shadow
    • outline

    如何实现圆形元素(头像)

    • border-radius:50%

    如何实现IOS图标的圆角

    • clip-path:(svg)

    《前端面试之路一(HTML+CSS面试整理)》

    如何实现半圆、扇形等图标

    • border-radius组合:

      • 有无边框
      • 边框粗细
      • 圆角半径

    如何实现背景图居中显示/不重复/改变大小

    background-position
    background-repeat
    background-size(cover/contain)

    如何平移放大一个元素

    transform:translateX(100px)
    transform:scale(2)

    如何实现3D效果

    perspective:500px;              //指定透视的角度
    transform-style:preserve-3d;    //保留3D效果
    transform:translate rotate;        

    css动画

    动画的原理:

    • 视觉暂留作用
    • 画面逐渐变化

    动画的作用

    • 愉悦感
    • 引起注意
    • 操作进行反馈
    • 掩饰(程序在后台加载)

    动画类型

    • transition补间动画(中间的过程浏览器脑补起来)
    • keyframe关键帧动画(也是补间动画,但是有很多关键帧)
    • 逐帧动画(特殊的逐帧动画,无法使用补间动画)

    transition

    • 位置-平移(left/right/margin/transform)
    • 方位-旋转(transform)
    • 大小-缩放(transform)
    • 透明度(opacity)
    • 其他-线性变换(transform)

    [深入了解transition动画](https://www.cnblogs.com/xiaoh…
    )

    transition: [动画类型] [动画时间]

    transition-delay //延迟多长时间执行

    transition-delay:width 1s,background 3s; //多个效果叠加

    transition-timing-function

    timing(easing):定义动画进度和时间的关系

    • linear
    • ease-in-out
    • 自定义贝塞尔曲线

    《前端面试之路一(HTML+CSS面试整理)》

    keyframes动画

    • 相当于多个补间动画
    • 与元素状态的变化无关
    • 定义更加灵活
    • animation:run 1s linear;
    • animation-direction //reverse:反向
    • animation-fill-mode:forword //forwards,backwards决定动画最终停留在哪里
    • animation-iteration-count //infinite:循环次数
    • animation-play-state:pause //js控制它的停和动

    逐帧动画

    • 每帧都是关键帧,中间没有补间过程
    • 依然使用关键帧动画
    • 属于关键帧动画中的一种特殊情况
    • 适用于无法补间计算的动画
    • 资源较大(适合时间短、资源小的动画,一定要控制好大小的时长)
    • 使用steps()

    例如:图片合成的动画

    animation-timing-function:steps(1)

    • 指定时间和动画进度关系
    • 中间不要加东西,每个区间就只有一个状态,静止
    • step是指定每个区间帧数

    CSS面试题

    CSS中动画怎么写,transationanimationkeyframs怎么写

    CSS中动画实现的方式有几种

    • transition
    • keyframes(animation)

    过渡动画和关键帧动画的区别

    • 过度动画需要有状态变化,关键帧动画不需要有状态变化
    • 关键帧动画能控制更精细

    如何实现逐帧动画

    • 使用关键帧动画
    • 去掉补间(steps)

    CSS动画的性能

    • 性能不差
    • 部分情况下优于JS
    • 但JS可以做到更好
    • 部分高危属性,box-shadow

    预处理器

    介绍

    • 基于CSS的另一种语言
    • 通过工具编译成CSS
    • 添加了很多CSS不具备的特性(变量)
    • 能提升CSS文件的组织方式

    less
    sass的区别

    • less

      • 基于node
      • 优点:用JS写的,编译速度比较快,有个浏览器中可以直接使用的版本,不需要预先编译,入门简单
      • 缺点:在一些复杂特性上比较繁琐
    • sass(scss)

      • ruby写的比较慢,但是有解决方案,可以使用它的移植版本node-sass

    CSS预处理器

    • 嵌套                              反映层级和约束
    • 变量和计算                   减少重复代码
    • ExtendMixin          代码片段
    • 循环                               适用于复杂有规律的样式
    • import CSS                  文件模块化

    嵌套

    less

    加上
    &:并不是父子关系而是同级

    CSS中并不允许这么嵌套写,
    less和
    sass允许,结构关系清晰

    body{
        padding:0px;
        margin: 0px;
    }
    .wrapper{
        background: white;
        .nav{
            font-size: 12px;
        }
        &:hover{                      //伪类
            background: red
        }
    }

    打包指令

    lessc a.less > a.css

    sass

    npm install node-sass

    sass的输出有多重格式

    node-sass  a.scss>a.css  --output-style expanded 

    使用这条命令时候,我们编译的路径,不能有中文名,否则会报错,之后只要我们更改scss文件,保存后,就会自动修改编译后的css文件

    变量

    变量为了可以参与运算,提供了各种运算的函数,包括颜色

    • less:@fontSize
    • sass:$fontSize
    • less的理念:尽量的接近css的语法
    • sass的理念:尽量避免产生混淆

    mixin

    CSS中并没有提供复用CSS的方法,而是通过HTML复用

    less

    .block(@fontSize){
        font-size: @fontSize;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    .block(@fontsize+2px);

    不加括号也可以,不加括号.block{}不会被编译出来,加了会被编译出来

    sass

    @mixin block($fontSize) {
        font-size: $fontSize;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    @include block(font-size+2px);

    区别在于需要显示的声明和调用,而且不能既做class又做mixin

    场景:mixin清除浮动

    extend

    作用

    • 减少重复代码
    • 不会复制重复代码
    • 选择器提取出来,公共的样式写到一起

    less

    写法:

    .block{
        font-size: @fontSize;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    引用:

     .nav:extend(.block){
            font-size: @fontSize;
        }
     .content{
            font-size: @fontSize + 2px;
            &:extend(.block);
        }

    生成效果:

    .block,
    .wrapper .nav,
    .wrapper .content {
      font-size: 12px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

    sass

    写法:

    .block {
        font-size: $fontSize;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    引用:

    @extend .block;

    生成效果:

    .block, .wrapper {
      font-size: 12px;
      border: 1px solid #ccc;
      border-radius: 4px; 
    }

    loop

    less

    less中实际上没有循环的语法,通过递归来实现相应的效果

    引用方法:

    .gen-col(@n) when (@n > 0 ){
        .gen-col(@n - 1);
        .col-@{n}{
            width: 1000px/12*@n;
        }
    }
    
    .gen-col(12);

    生成效果:

    .col-1 {
      width: 83.33333333px;
    }
    .col-2 {
      width: 166.66666667px;
    }
    .col-3 {
      width: 250px;
    }
    .col-4 {
      width: 333.33333333px;
    }
    .col-5 {
      width: 416.66666667px;
    }
    .col-6 {
      width: 500px;
    }
    .col-7 {
      width: 583.33333333px;
    }
    .col-8 {
      width: 666.66666667px;
    }
    .col-9 {
      width: 750px;
    }
    .col-10 {
      width: 833.33333333px;
    }
    .col-11 {
      width: 916.66666667px;
    }
    .col-12 {
      width: 1000px;
    }
    应用场景:表格、特效等

    sass

    mixin方式:

    @mixin gen-col($n) {
        @if $n>0 {
            @include gen-col($n - 1);
            .col-#{$n} {
                width: 1000px/12*$n;
            }
        }
    }
    
    @include gen-col(12);

    sass是支持循环的,不需要递归

    @for $i from 1 through 12 {
        .col-#{$i} {
            width: 1000/12*$i;
        }
    }

    使得CSS变得更像一门变成语言

    import

    预处理器的变量跨文件

    @import "logo";
    @import "nav";
    @import  "content";

    预处理器框架

    预处理器的模块化,提供了按需使用他人代码的可能

    • SASS-Compass
    • Less-Lesshat/EST(国内)
    • 提供现成mixin
    • 提供JS类库,封装常用功能

    有兼容性问题的封装成mixin统一处理

    面试题

    常见的CSS预处理器

    • Less(Node.js)
    • Sass(Ruby,有Node版本)

    预处理器作用

    • 帮助更好地组织CSS代码
    • 提高代码复用率
    • 提升可维护性

    预处理利器的作用

    • 嵌套 反应层级和约束
    • 变量和计算 减少重复代码
    • ExtendMixin 代码片段
    • 循环 适用于复杂有规律的样式
    • import CSS文件模块化

    预处理器的优缺点

    • 优点:提高代码复用率和可维护性
    • 缺点:需要引入编译过程 有学习成本

    前端工程化发展起来了,预处理器的热度有所下降

    Bootstrap

    介绍

    • 一个CSS框架
    • twitter出品
    • 提供通用基础样式

    Bootstrap4

    • 兼容IE10+(bootstrap3兼容到IE9)
    • 使用flexbox布局
    • 抛弃Nomalize.css
    • 提供布局和reboot版本

    功能

    • 基础样式
    • 常用组件
    • JS插件

    现在用sass编写

    基本用法

    Js组件

    • 用于组件交互

      • dropdown(下拉)
      • modal( 弹窗)
    • 基于jQuery

      • 依赖Popper.js
      • bootstrap.js
    • 使用方式

      • 基于data-属性
      • 基于JS-API

    响应式布局

    不同的分辨率下面又不同的分配

    《前端面试之路一(HTML+CSS面试整理)》

    定制化

    • 使用CSS同名类覆盖
    • 修改源码重新构建                             //修改彻底,但是需要了解整个框架
    • 使用SCSS源文件,修改变量           //对结构的要求更高

    把bootstrap当初一个预处理文件来使用,十一个更干净的使用方式

    CSS面试题

    Bootstrap的优缺点

    • 优点:CSS代码结构合理,现成的样式可以直接使用
    • 缺点:定制较为繁琐,体积大

    Bootstrap如何实现响应式布局

    • 原理:通过media query设置不同分辨率的class
    • 使用:为不同分辨率选择不同的网格class

    如何基于Bootstrap定制自己的样式

    • 使用CSS同名覆盖
    • 修改源码重新构建
    • 引用SCSS源文件,修改变量

    CSS工程化方案

    CSS工程化介绍

    • 组织
    • 优化
    • 构建
    • 维护

    postCSS插件的使用

    《前端面试之路一(HTML+CSS面试整理)》

    • PostCSS本身只有解析能力
    • 各种神奇的特性全靠插件
    • 目前至少有200多个插件

      • import模块合并
      • autoprefixier自动加前缀
      • cssnano压缩代码
      • cssnext使用css新特性
      • precss

        • 变量
        • 条件
        • 循环
        • MIxin Extend
        • import
        • 属性值引用

    gulpPostCSS

    postCSS支持的构建工具

    • Webpack        postcss-loader
    • Gulp              gulp-postcss
    • Grunt            grunt-postcss
    • Rollup          rollup-postcss

    webpack处理css

    • css-loader将css文件变成js文件
    • style-loader将变成js的css文件注入到页面中

    css-modulesextract-text-plugin

    直接将class名全部换掉,确保组件样式不冲突

    var styles = require('component.css');

    style.green ...

    webpack小结

    • css-loader                  将 CSS变成JS
    • style-loader              将JS样式插入head
    • ExtractTextPlugin     将CSSJS中提取出来
    • css modules                 解决css命名冲突的问题(映射表)
    • less-loader                sass-loader各类预处理器
    • postcss-loader           PostCSS处理

    面试题

    如何解决CSS模块化

    • less sassCSS预处理器
    • PostCSS插件(postCSS-import/precss等)
    • webpack处理CSS(css-loader+style-loader)

    PostCSS可以做什么

    取决于插件可以做什么

    • autoperfixer cssnext precss等,兼容性处理
    • import模块合并
    • css语法检查、兼容性检查
    • 压缩文件

    CSS modules是做什么的,如何使用

    • 解决类名冲突的问题
    • 使用PostCSS或者webpack等构建工具进行编译
    • HTML模板中使用编译过程产生的类名

    为什么使用JS来引用、加载CSS

    • JS作为入口,管理资源有天然优势
    • 将组件的结构、样式、行为封装到一起,增强内聚
    • 可以做更多处理(webpack)

    三大框架中的css

    Angular中的CSS

    Angular各版本

    • Angular.js(1.x)

      • 没有样式集成能力
    • Angular(2+)

      • typeScript
      • 提供了样式封装能力
      • 与组件深度集成

    shadowDOM

    • 逻辑上是一个DOM
    • 结构上存在子集集合

    shadowDOM介绍

    《前端面试之路一(HTML+CSS面试整理)》

    Scoped CSS

    • 限定了范围的CSS
    • 无法影响外部元素
    • 外部样式一般不影响内部
    • 可以通过/deep/>>>穿透

    兼容性还存在问题

    模拟
    Scoped CSS

    • 方案一:随机选择器(不支持)
    • 方案二:随机属性

      • <div abcdefg>
      • div[abcdefg]{}

    Vue中的CSS

    内置
    CSS解决方案

    模拟Scoped CSS

    • 方案一:随机选择器 CSS modules
    • 方案二:随机属性 <div abcdefg> <div>[abadafda]{}

    vue同时支持了这两种方案
    <style module>
    <style scoped>

    React中的CSS

    React的处理

    • 官方没有集成方案
    • 社区方案众多
    • css modules
    • (babel)react-css-modules
    • styled components
    • styled jsx
        原文作者:kinshan
        原文地址: https://segmentfault.com/a/1190000017211678
        本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
    点赞

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注