HTML+CSS工作应用+面试一步搞定

全面系统讲解CSS工作应用+面试一步搞定

@(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

  "utf-8">
  "viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <base href="/"> 
  // 指定一个基础路径，所有的路径都是以这个为基准
  //viewport表示视图的大小
  //适配移动端第一步，viewport

a[href,target]
//target：打开窗口。也可以设置框架中在哪个框架打开
img[src,alt]
//alt:图片不可用时候，文字显示出来
table td[colspan,rowspan]
form[target,method,enctype]
//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新增内容

1、新增区块标签
    * section
    * article
    * nav
    * aside //一般不出现在大纲中，表示不重要的广告类
2、表单增强
    * 日期、时间、搜索
    * 表单验证
    * placehold自动聚焦

html5新增语意

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

元素分类

按默认样式分

块级block：
行内inline：
inline-block:

HTML分类法

嵌套关系

默认样式和reset

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

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

真题

doctype的意义是什么？

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

HTML、XHTML、HTML5的关系

1、HTML属于SGML
2、XHTML属于XML，是HTML进行XML严格化的结果
3、HTML5不属于SGML或者XML，比XHTML宽松

HTML5有什么变化

1、新的语义化标签
2、表单增强
3、新的API(离线、音视频、图形、实时通信、本地存储、设备能力)

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

em和i有什么区别

1、em是语义化的标签，表强调
2、i是纯样式的标签，表斜体
3、HTML5中i不推荐使用，一般用作图标

语义化的意义是什么

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

哪些元素可以自闭合

1、表单元素input
2、图片img
3、br hr
4、meta link

HTML和DOM的关系

1、HTML是‘死’的
2、DOM由HTML解析而来，是活的
3、JS可以维护DOM

property和attribute的区别

1、attribute是‘死’的
2、property是‘活’的

form作用

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

三、css基础

cascading style sheet 层叠样式表

1、选择器

1、用于匹配HTML元素
2、分类和权重
3、解析方式和性能
    * 浏览器的解析方式是从右往左反着，然后再往前验证,主要出于性能的考虑，更快速的匹配到指定元素
4、值得关注的选择器

选择器分类

1、元素选择器      a{}
2、伪元素选择器    ::before{}    //不会出现在html中也不会出现DOM树中，真实存在的元素
3、类选择器      .link{}
4、属性选择器     [type=radio]{}
5、伪类选择器     :hover{}       //一个元素的状态
6、ID选择器     #id{}
6、组合选择器     [type=checkbox] + label{}
7、否定选择器     :not(.link){}
8、通用选择器     *{}

选择器权重

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标签，外部样式表) 
相同权重后写的生效

2、非布局样式-字体

字体

1、字体族
    serif
    sans-serif
    monospace
    cursive
    fantasy
2、多字体fallback
3、网络字体、自定义字体
4、 iconfont

字体机制
先把只有一个平台才有的写到最前面

引用远程字体有问题的话，要注意跨域问题
阿里巴巴的图标库，自选 iconfont.cn

3、非布局样式-行高

行高由line-box决定
line-hight会撑起inline-box的高度，并不会影响本来的高度
inline-box组成line-box，line-box是由inline-box决定

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

经典图片空隙问题：

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

4、非布局样式-背景

背景颜色

H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S：Saturation(饱和度)。取值为：0.0% - 100.0%
L：Lightness(亮度)。取值为：0.0% - 100.0%

渐变色背景

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实现各种渐变背景，可以通过叠加实现，放射渐变

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

base64和性能优化

优点：节省http链接数
缺点：体积会增大，图片原来的体积会(增大1/3,增大css文件)；增大解码的开销(先转化成图片再解码)
适用：小图标
用法：一般用在构建中转

多分辨率适配

5、非布局样式-边框

1、边框的属性：线型 大小 颜色
2、边框背景图
3、边框衔接(三角形)
原理：利用边框衔接过程是斜切

6、非布局样式-滚动

滚动行为和滚动条

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

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

7、非布局样式-文本折行

 1、overflow-wrap(word-wrap)通用换行控制：是否保留单词
 2、word-break针对多字节文字，中文句子也是单词
 3、white-space空白处是否断行

    overflow-wrap: break-word ;
    word-break: keep-all;
    white-space: normal ;

不换行的话 white-space: nowrap

word-wrap：
1、normal    只在允许的断字点换行（浏览器保持默认处理）。
2、break-word    在长单词或 URL 地址内部进行换行。

word-break：
normal  使用浏览器默认的换行规则。
break-all   允许在单词内换行。
keep-all    只能在半角空格或连字符处换行。

8、非布局样式-装饰性属性(粗体、斜体、下划线)

1、装饰性属性及其它
2、字重(粗体) font-weight
3、斜体font-style:itatic
4、下划线text-decoration
5、指针cursor

9、hack和案例

1、Hack即不合法但生效的写法
2、主要用于区分不同的浏览器
3、缺点：难理解，难维护，易失效
4、替代方案：特性检测
5、替代方案：针对性加class

10、面试题

CSS样式(选择器)的优先级

计算权重确定
!important
内联样式  
后写的优先级高   

雪碧图的作用

减少HTTP请求数，提高加载性能
有一些情况下可以减少图片大小

自定义字体的使用场景

1、宣传/品牌/banner等固定文案
2、字体图标

base64的使用

1、用于减少HTTP请求
2、适用于小图片
3、base64的体积约为原图的4/3

伪类和伪元素的区别

1、伪类表状态
2、伪元素是真的有元素
3、前者单冒号，后者双冒号(注意兼容性)

如何美化checkbox

1、label[for]和id
2、隐藏原生的input
3、:checked+label

四、css布局

1、布局简介

• CSS知识体系的重中之重
• 早期以table为主(简单)
• 后来以技巧性布局为主(难)
• 现在有flexbox/grid(偏简单)
• 响应式布局是必备知识

常用布局方式

1、table表格布局
2、float浮动+margin
3、inline-block布局
4、flexbox布局

2、布局方式(表格)

display:table
display:table-row

3、一些布局属性

4、flexbox布局

5、fl；oat 布局

6、inline-block布局

7、响应式布局

8、主流网站使用的布局方式

9、CSS面试真题

五、css效果

1、box-shadow

2、text-shadow

3、border-radius

4、background

5、clip-path

6、3D-transform

六、css动画

动画介绍

1、transition

2、keyframes动画

3、逐帧动画

4、CSS面试题

七、预处理器

介绍

1、less嵌套

2、sass嵌套

3、less变量

4、sass变量

5、less mixin

6、sass mixin

7、less extend

8、sass extend

9、less loop

10、sass loop

11、less import

12、sass import

13、预处理器框架

真题

八、Bootstrap

介绍

1、基本用法

2、Js组件

3、响应式布局

4、定制化

5、CSS真题

九、css工程化方案

postCSS介绍

1、postCSS插件的使用

2、CSSnext

3、precss

4、gulpPostCSS

5、webpack

6、webpack处理css

7、 css-modules和extract-text-plugin

8、 webpack小结

9、 真题

十、三大框架中的css

1、Angular中的CSS

2、Vue中的CSS

3、React中的CSS

十一、课程总结

1、课程总结