CSS面试复习
CSS复习
HTML 复习
HTML版本
- HTML4/4.01(SGML) 超级xml(可扩展标记语言)
- XHTML(XML) 要求严格，所有的标签、属性小写，属性必须要有值
- HTML5
| HTML4 | XHTML | HTML5 |
|---|---|---|
| 标签允许不结束 | 标签必须结束 | 标签允许不结束 |
| 属性不用带引号 | 属性必须带引号 | 属性不用带引号 |
| 标签属性可大写 | 标签属性必须小写且有值 | 标签属性可大写 |
| Boolean属性可省略值 | Boolean属性必须写值 | Boolean属性可省略值 |
w3c的html文档出错验证网址：validator.w3.org
w3c的html5文档： https://www.w3.org/TR/html5/dom.html
html元素嵌套关系
- 块级元素可以包含行内元素
- 块级元素不一定能包含块级元素
- “行内元素一般不能包含块级元素”
H4嵌套规则：Allowed nesting of elements in HTML 4 (and XHTML 1.0)
H5 嵌套规则：Text-level semantics
H5 嵌套原则主要看
- Categories（Categories 是该元素本身的分类）
- Content Model（Content model 规定了合法的元素的内容（子元素、文本等）类型）
Categories元素内容分类：动态图网址
CSS rest
常用方案：2018’s most popular CSS Reset scripts
- 归零 （Meyer’s “Reset CSS” YUI Reset )
- *{margin:0; padding: 0;}
- 统一样式 （Normalize.css)
HTML面试真题
1、doctype的意义是什么？
- 让浏览器以标准模式渲染
- 让浏览器知道元素的合法性
2、HTML XHTML HTML5的关系？
- HTML属于SGML
- XHTML属于XML， 是HTML进行XML严格化得结果
- HTML5不属于SGML或XML，比XHTML宽松
3、HTML5有什么变化？HTML5
- 新的语义化元素
- 表单增强
- 新的API（离线、音视频、图形、实时通信、本地存储、设备能力）
- 分类和嵌套的变更
4、em和i有什么区别？
- em是语义化标签，表强调。
- i是纯样式的标签，表示斜体。
- HTML5中i不推荐使用，一般用作图标。
5、语义化的意义是什么？
- 开发者容易理解
- 机器容易理解结构（搜索、读屏软件）
- 有助于SEO
- semantic microdata
6、哪些元素可以自闭合？
- 表单元素 input
- 图片 img
- br hr
- meta link
7、HTML和DOM的关系？
- HTML是"死"的
- DOM由HTML解析而来，是活的
- JS可以维护DOM
8、property和attribute的区别？ 详细
- property是DOM中的属性，是JavaScript里的对象；
- attribute是HTML标签上的特性，它的值只能够是字符串；
- 自定义的Property与Attribute不同步,不相等；
- 非自定义的DOM property与 attributes 是有条件同步的
9、form的作用有哪些？
- 直接提交表单
- 使用submit/reset按钮
- 便于浏览器保存表单
- 第三方库可以整体提取值
- 第三方库可以进行表单验证
CSS基础
- Cascading Style Sheet
- 层叠样式表
选择器分类
- 元素选择器 a{}
- 伪元素选择器 ::before{} (可以显示的真实的元素)
- 类选择器 .link{}
- 属性选择器 [type=radio]{}
- 伪类选择器 :hover{} (表示一个元素的状态)
- ID选择器 #id{}
- 组合选择器 [type=checkbox] + label{}
- 否定选择器 :not(.link){}
- 通用选择器 *{}
选择器权重
- 行内样式 1,0,0,0
- ID选择器 0,n,0,0
- 类，伪类，属性 0,0,n,0
- 元素，伪元素 0,0,0,n
- 其他选择器 0,0,0,0
- !important 优先级最高
- 相同权重，后写优先级高
非布局样式
- 字体、字重、颜色、大小、行高
- 背景、边框
- 滚动、换行
- 粗体、斜体、下划线
- 其他
字体族
-
serif （衬线字体）笔画开始、结束的地方有额外的装饰，而且笔画的粗细会有所不同。 宋体
-
snas-serif（无衬线体）没有额外的装饰，而且笔画的粗细差不多
-
monospace （等宽字体）字符宽度相同
-
cursive（手写体）草书
-
fantasy（花体）
-
多字体fallback
-
网络字体、自定义字体
@font-face{ font-family: 'IF'; src: url("./IndieFlower.ttf"); } .custom-font { font-family: IF; } -
iconfont
-
字体加引号，字体族不能加引号
如何优雅的选择字体(font-family)
使用 @font-face
行高
深入理解CSS中的行高
vertical-align属性
去除inline-block元素间间距的N种方法
背景
-
背景颜色
.c1{ background: red; /*background: #F00; background: hsl(0, 100%, 50%);//角度、饱和度、亮度 background: hsla(90, 100%, 30%, .3);//透明 background: rgba(255,0,0,.3); background: url(./test.png);*/ } -
渐变色背景
.c2{ height: 90px; background:-webkit-linear-gradient(left, red, green); /*background: linear-gradient(to right, red, green);//标准写法，和上面一样 background: linear-gradient(0deg, red, green); background: linear-gradient(135deg, red 0, green 10%, blue 100%);*/ } -
多背景叠加 示例 CSS3 Patterns Gallery background-blend-mode CSS秘密花园：复杂背景图案
.c3{ 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%, red 49.5%, red 50.5%, transparent 50.5%, transparent 100%); background-size: 30px 30px; } -
背景图片和属性（雪碧图）
-
base64和性能优化 节省http连接数，解码开销，体积会增大1/3。用于使用不多的小图标，例如loading图
-
多分辨率适配
//在适配移动端，高分辨率屏的时候，需要将图片缩小，雪碧图width/2,height/2,position/2, size/2; .c4{ width:40px; height:40px; background:url(./test_bg.png) no-repeat; background-position: -169px -23px; background-size: 261px 113px; }
边框
-
边框的属性：线型 大小 颜色
.c1 { border: 5px solid red; border: 5px dotted red; border: 5px dashed red; } -
边框背景图 实例
.c2 { border: 30px solid transparent; //这里必须是实线 border-image: url(./border.png) 30 round; } -
边框衔接（三角形）
.c3 { height: 0; width: 0; border-bottom: 20px solid red; border-right: 40px solid transparent; border-left: 40px solid transparent; } .c3 { width: 0; height: 0; font-size: 0; /*border-radius: 20px;*/ border-width: 40px 20px; border-style: solid; border-color: transparent transparent red transparent; }
滚动
-
滚动行为和滚动条
visible(撑开容器)/hidden(超出部分隐藏)/scroll(滚动条显示)/auto
文字折行
-
white-space 控制空白字符的显示，同时还能控制是否自动换行。
white-space: nowrap：永不换行 ，空格被合并，换行符无效，原本的自动换行失效！只有才能换行！white-space: pre：preserve保留，自动换行没了，空格和换行符全都保留！white-space: pre-wrap：preserve+wrap 保留空格和换行符，且可以自动换行。white-space:pre-line：preserve+new line+wrap 空格被合并了，但是换行符可以发挥作用
-
word-break 控制单词如何被拆分换行 (中文句子也是单词，还有日文、韩文等)
word-break: keep-all：所有“单词”一律不拆分换行，或者可以理解为只有空格换行符可以触发自动换行word-break: break-all：所有单词碰到边界一律拆分换行，慎用！
-
word-wrap（overflow-wrap) 也是控制单词如何被拆分换行的，实际上是作为
word-break的互补break-word：只有当一个单词一整行都显示不下时，才会拆分换行该单词。
彻底搞懂word-break、word-wrap、white-space
装饰性属性及其他
- 字重（粗体）font-weight
- 斜体 font-style: itatic;
- 下划线： text-decoration
- 指针：cursor
CSS Hack
- Hack即不合法但生效的写法
- 主要用于区分不同浏览器
- 缺点：难理解、难维护、易失效
- 替代方案：特性检测
- 替代方案：针对性加class
注意：hack写在后面 body{width: 200px; width: 180px\9;}
方案： http://browserhacks.com/ CSS-only Filters Summary 常用CSS hacks
CSS面试真题
- CSS样式（选择器）的优先级
- 雪碧图的作用？
- 减少HTTP请求数，提高加载性能
- 有一些情况可以减少图片大小
- 自定义字体的使用场景
- 宣传/品牌/banner等固体文案
- 字体图标
- base64的使用
- 用于减少HTTP请求
- 适用于小图片
- base64的体积约为原图4/3
- 伪类和伪元素的区别？
- 伪类表状态
- 伪元素是真的有元素
- 前者是单冒号，后者双冒号
- 如何美化checkbox
- label[for]和id
- 隐藏原生input
- :checked + label
CSS布局
-
早期以table为主（简单）
-
后来一技巧性布局为主（难）
-
现在有的flexbox/grid（偏简单）
-
响应式布局是必备知识
table表格布局
.table{
margin-top:20px;
display: table;
width:800px;
height:200px;
}
.table-row{
display: table-row;
}
.table-cell{
vertical-align: center;
display: table-cell;
}
float浮动 + margin
- 两栏布局
- 三栏布局
- 等高布局
inline-block 布局
flexbox布局
响应式布局
- 在不同设备上使用
- 一般主要处理屏幕大小问题
- 主要方法
- 隐藏 + 折行 + 自适应空间
- rem/viewport/media query
CSS面试真题
- 实现两栏（三栏）布局的方法
- 表格布局
- float + margin 布局
- inline-block 布局
- flexbox布局
- position:absolute/fixed有什么区别？
- 前者相对最近的absolute/relative祖先元素
- 后者相对屏幕(pc)/viewport(移动 ) （早期移动端有兼容性问题）
- display：inline-block的间隙
- 原因：字符间距
- 解决： 消灭字符(去掉所有空格)或者消灭间距（font-size:0)
- 如何清除浮动
- 让盒子负责自己的布局
- overflow:hidden(auto)
- ::after{clear:both}
- 如何适配移动端页面
- viewport
- rem/viewport/media query
- 隐藏、折行、自适应空间
CSS效果属性
-
box-shadow
- 营造层次感（立体感）
- 充当没有宽度的边框
- 特殊效果（无限投影）
-
text-shadow
- 立体感
- 印刷体质感
-
border-radius
- 圆角矩形
- 圆形
- 半圆/扇形
- 一些奇怪的角角
-
background
- 纹理图案
- 渐变
- 雪碧图动画
- 背景图尺寸适应
-
clip-path 注意兼容性
- 对容器进行裁剪
- 常见几何图形
-
clip-path: inset(100px 50px);矩形(x, y) -
clip-path: circle(50px at 100px 100px);圆形(r at x y) -
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);多边形（x0% y0%， x1% y1%, x2% y2%, x3% y%) -
clip-path: url(#id);路径 svg图<svg> <defs> <clipPath id="clipPath"> <polygon stroke="#979797" points="0.4921875 81.2070313 92.640625 81.2070313 121.601562 0.21875 153.648437 81.2070313 247.390625 80.7734375 173.394531 140.496094 200.308594 227.09375 121.601562 172.71875 53.4960937 227.09375 80.859375 140.496094">polygon> clipPath> defs> svg>
-
- 自定义路径
-
3D、2D变换 transform 变换是按顺序的
- translate 平移
- scale 缩放
- skew 倾斜
- rotate 旋转
CSS面试真题
1、如何用一个div画XXX
- box-shadow无限投影
- ::before
- ::after
2、如何产生不占空间的边框
- box-shadow
- outline
3、如何实现圆形元素（头像）
- border-radius: 50%
4、如何实现iOS图标的圆角
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JK5TpJ85-1610633875557)(https://i.loli.net/2019/05/23/5ce60cc12fd2e22232.png)]
- clip-path: (svg)
5、如何实现半圆、扇形等图形
- border-radius组合：
- 有无边框
- 边框粗细
- 圆角半径
6、如何实现背景图居中显示、不重复、改变大小
- background-position
- background-repeat
- background-size(cover/contain)
- cover:图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被裁掉；cover即为”塞满“
- contain:图片自身的宽高比不变，缩放至整个图片自身能完全显示出来，所以容器会有留白区域。contain即为“包含”，我图片虽然缩放了，但是整个图是被“包含”在里面了，完整显示，不能裁剪。
7、如何平移/放大一个元素
- transform: translateX(100px)
- transform:scale(2)
8、如何实现3D效果
- perspective：500px; //3d效果正面查看距离 透视距离
- tansform-style: preserve-3d; 3d透视
- tansform: translate rotate
CSS动画
动画的原理：
- 视觉暂留作用
- 画面逐渐变化
动画的作用：
- 愉悦感
- 引起注意
- 信息反馈
- 掩饰（loading加载）
CSS中的动画类型
-
transition补间动画
- 位置 - 平移
- （left/right/margin/transform)
- 方位 - 旋转（transform)
- 大小 - 缩放（transform)
- 透明度（opacity）
- 其他 - 线型变化（transform)
transition: margin-right 2s ease-in-out .5s; transition: margin-right 2s, color 1s; transition: all 1s ease-out .5s; transition-property: all; transition-duration: 1s; transition-timing-function: ease-out; transition-delay: .5s; - 位置 - 平移
-
keyframe关键帧动画
- 相当于多个补间动画
- 与元素状态的变化无关
- 定义更加灵活
.contrainer { width:100px; animation: run 1s; animation: run 3s ease-in 1s infinite reverse both running; animation-name: run; animation-duration: 0s; animation-timing-function: ease; animation-delay: 0s; animation-iteration-count: 1; //播放次数 animation-direction: normal; animation-fill-mode: none; // 最后停止的位置 animation-play-state: running; //暂停/播放 动画 } @keyframes run { from { width: 100px; }to { width: 200px; } } @keyframes identifier { 0% { top: 0; left: 0; } 30% { top: 50px; } 68%, 72% { left: 50px; } 100% { top: 100px; left: 100%; } } -
逐帧动画
- 适用于无法补间计算的动画
- 资源较大 （可能会使用很多动画）
- 使用steps() 去掉补帧
CSS面试真题
1、 CSS动画的实现方式有几种？
- transition 过渡动画
- keyframe(animation) 关键帧动画
2、过渡动画和关键帧动画的区别
- 过渡动画需要有状态变化
- 关键帧动画不需要状态变化
- 关键帧动画能控制更精细
3、如何实现逐帧动画
- 使用关键帧动画
- 去掉补间（steps)
animation-timing-function: steps(1);
4、CSS动画的性能
- 性能不坏
- 部分情况下优于JS
- 但JS可以做到更好
- 部分高位属性
- box-shadow等 不管什么动画都影响性能
CSS预处理器
- 基于CSS的另一种语言
- 通过工具编译成CSS
- 添加了很多CSS不具备的特性
- 能提升CSS文件的组织方式
- 嵌套 反映层级和约束
- 变量和计算 减少重复代码
- Extend和Minxin 代码片段
- 循环 使用于复杂有规律的样式
- import CSS文件模块化 （css中的import并不会做代码合并，只是在浏览器端动态引用其他样式表，但是浏览器中动态引用CSS文件性能非常差，每一个引用都会发一个独立请求
less sass
- 变量
- 嵌套
- mixin 复杂的情况 需要带参数
- extend 简单，需要减小代码文件大小
- loop
- import
CSS预处理器框架
- SASS - Compass
- Less - Lesshat/EST
- 提供现成的mixin
- 类似JS类库 封装常用功能
CSS面试真题
- 常见的CSS预处理器
- Less（Node.js)
- Sass （Ruby 有Node版本）
- 预处理器的作用
- 帮助更好的组织CSS代码
- 提高代码的复用率
- 提升可维护性
- 预处理器的能力
- 嵌套 反映层级和约束
- 变量的使用 减少重复代码
- Extend和Minxin 代码片段
- 循环 适用于复杂有规律的样式
- import CSS文件模块化
- 预处理器的优缺点
- 优点：提高代码的复用率可可维护性
- 缺点：需要引入编译过程 有学习成本
Bootstrap 4
- 一个CSS框架
- twitter出品
- 提供通用基础样式
bootstrap 4 改变
- 兼容IE10+ (bootstrap3 兼容IE9+)
- 使用flexbox布局
- 抛弃Nomalize.css
- 提供布局和reboot版本 （相当于reset.css）
基础样式 （标题、正文、reset。。。）
常用组件 （按钮、表格、表单、网格布局。。。）
JS插件（弹出框、下拉。。。）
bootstrap没有中文官网
3.0 以前使用源文件是less写的
4.0源文件是sass编写
Bootstrap 定制方法
- 使用CSS同名覆盖 （简单 会留有死角 bug
- 修改源码重新构建 （修改彻底 需要了解bootstrap结构
- 引用scss源文件 修改变量 （更灵活 干净 只引用自己需要的模块 需要对bootstrap的模块了解更多）
CSS工程化
- 组织
- 优化
- 构建
- 维护
PostCSS
CSS - > PostCSS(解析转换) - > CSS
模块化 加前缀 兼容性。。。
- PostCSS本身只有解析能力
- 各种神奇特性全靠插件
- 目前至少有200多个插件
插件
- import 模块合并
- autoprefixier 自动加前缀
- cssnano 压缩代码 去除无用代码 合并 简写
- cssnext 使用CSS新特性
- precss 变量、mixin、循环等
框架中的CSS
- Angular Vue React 三大框架
- Angular Vue 内置样式集成
- React 一些业界实践