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有什么区别？

扫描二维码关注公众号，回复： 11251355 查看本文章

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：永不换行 ，空格被合并，换行符无效，原本的自动换行失效！只有</br>才能换行！
- 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">
            <!-- <circle cx="60" cy="60" r="50" fill="#34538b" /> -->
            <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-Mrv8Qer8-1590070987440)(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 一些业界实践

web前端面试题之肉（css）

CSS复习

HTML 复习

HTML版本

html元素嵌套关系

CSS rest

HTML面试真题

CSS基础

选择器分类

选择器权重

非布局样式

字体族

行高

背景

边框

滚动

文字折行

装饰性属性及其他

CSS Hack

CSS面试真题

CSS布局

table表格布局

float浮动 + margin

inline-block 布局

flexbox布局

响应式布局

CSS面试真题

CSS效果属性

box-shadow

text-shadow

border-radius

background

clip-path 注意兼容性

CSS面试真题

CSS动画

CSS中的动画类型

transition补间动画

keyframe关键帧动画

逐帧动画

CSS面试真题

CSS预处理器

less sass

CSS预处理器框架

CSS面试真题

Bootstrap 4

bootstrap 4 改变

Bootstrap 定制方法

CSS工程化

PostCSS

插件

框架中的CSS

猜你喜欢