⑤网格布局：新出的（后期作用很大）
<style>
.content{
display:grid;
width:100%;
grid-template-rows:300px;
grid-template-columns:300px auto 300px;
}
.content .left{
background:red;
}
.content .center{
background:yellow;
}
.content .right{
background:blue;
}
style>
<body>
<div class="left">左div>
<div class="center">中div>
<div class="right">右div>
div>
body>
- 三栏布局：上下各300px,中间自适应
①绝对定位：快捷，布局已经脱离了文档流，导致下面的元素也要脱离文档流，使用性较差，没有设置margin:0;有位移差。（不推荐使用）
<style type="text/css">
div{
width：100%
}
.top{
background: skyblue;
height: 300px;
position: fixed; /*固定在头部*/
top: 0;
}
.middle{
top: 300px;
bottom: 300px;
background: yellow;
position:absolute;
overflow: auto; /*当文本内容超出自定义高度时，出现自定义滚动条*/
}
.bottom{
height: 300px;
position: fixed;/*固定在尾部*/
bottom: 0;
background: violet;
}
style>
<body>
<div class="top">上栏div>
<div class="middle">中间栏div>
<div class="bottom">下栏div>
body>
②flex布局：解决了浮动和绝对定位的缺点，移动端基本已经支持了兼容性。（推荐）
<style type="text/css">
.wrapper{
display: flex;
flex-direction: column;
}
.wrapper>div{
width:100%;
}
.top{
height: 300px;
background: green;
}
.middle{
height: 100%; /*flex:1;*/
background: red;
marign: 20px 0;
}
.bottom{
height: 300px;
background: yellow;
}
style>
<body>
<div class="wrapper">
<div class="top">上栏div>
<div class="middle">中间div>
<div class="bottom">下栏div>
div>
body>
③表格布局：表格布局的兼容性非常好
<style>
.content{
width:100%;
display:table;
}
.content>div{
display:table-row;
}
.content .top{
height:300px;
background:red;
}
.content .center{
background:yellow;
}
.content .bottom{
height:300px;
background:blue;
}
style>
<body>
<div class="top">左div>
<div class="center">中div>
<div class="bottom">右div>
div>
body>
④网格布局：新出的（后期作用很大）
<style>
.content{
display:grid;
width:100%;
grid-template-rows:100px auto 100px;
}
.content .top{
background:red;
}
.content .center{
background:yellow;
}
.content .bottom{
background:blue;
}
style>
<body>
<div class="content">
<div class="top">左div>
<div class="center">中div>
<div class="bottom">右div>
div>
body>
- 圣杯布局？原理？
<style>
.container{
padding-left: 50px; /*设置左右padding，防止main的字被左右两块遮挡*/
padding-right:100px;
}
.main{
float:left;
width:100%;
height:200px;
background-color:blue;
}
.left{
float:left;
width:50px;
height:200px;
margin-left:-100%; /*左栏移到第一行的首部*/
position:relative;
left:-50px; /*抵消container的左padding*/
background-color:red;
}
.right{
float:left;
width:100px;
height:200px;
margin-left:-100px; /*右栏移到和左中一行*/
position:relative;
right:-100px;
background-color:yellow;
}
style>
<body>
<div class="container">111111111111111111111111111111111111111111111111111111111111111111111111111111111111div>
<div class="left">div>
<div class="right">div>
div>
body>
1、圣杯布局的核心是左、中、右三栏都通过float进行浮动，然后通过负值margin进行调整。
2、.left， .right的margin-left是为了让.main .left .right在同一行。
3、.container的padding-left,padding-right，.left的position和left, . right的position和left是为了防止文字被遮挡。
- 双飞翼布局？
<style>
.content{
float:left;
width:100%;
}
.main{
height:200px;
margin-left:100px;
margin-right:200px;
background-color:green;
}
.content::after{
display:block;
content: '';
font-size: 0;
height:0;
clear: both;
zoom:1;
}
.left{
float:left;
width:100px;
height:200px;
margin-left:-100%; /*左栏移到第一行的首部*/
background-color:red;
}
.right{
float:left;
width:200px;
height:200px;
margin-left:-200px; /*右栏移到和左中一行*/
background-color:yellow;
}
style>
<body>
<div class="content">
<div class="main">div>
div>
<div class="left">div>
<div class="right">div>
body>
1、双飞翼布局的前两步和圣杯布局一样，只是处理中间栏部分内容被遮挡问题的解决方案有所不同。
2、既然content部分的内容会被遮挡，那么就在content内部再加一个main，通过设置其margin来避开遮挡，问题也就可以解决了。
3、需要注意的是，需要在main后面加一个元素来清除浮动。
- 实现纯 CSS 创建一个三角形并说明原理？
span {
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;
}
利用伪元素实现
.info-tab {
position: relative;
}
.info-tab::after {
content: "";
border: 4px solid transparent;
border-top-color: #2c8ac2;
position: absolute;
top: 0;
}
采用的是均分原理,把矩形分为4等份,这4等份其实都是边框
- 实现纯 CSS 创建正方体？
<html lang="en">
<head>
<meta charset="UTF-8">
<title>perspectivetitle>
<style>
.wrapper{
width: 50%;
float: left;
}
.cube{
font-size: 4em;
width: 2em;
margin: 1.5em auto;
transform-style:preserve-3d;
transform:rotateX(-35deg) rotateY(30deg);
}
.side{
position: absolute;
width: 2em;
height: 2em;
background: rgba(255,99,71,0.6);
border: 1px solid rgba(0,0,0,0.5);
color: white;
text-align: center;
line-height: 2em;
}
.front{
transform:translateZ(1em);
}
.bottom{
transform:rotateX(-90deg) translateZ(1em);
}
.top{
transform:rotateX(90deg) translateZ(1em);
}
.left{
transform:rotateY(-90deg) translateZ(1em);
}
.right{
transform:rotateY(90deg) translateZ(1em);
}
.back{
transform:translateZ(-1em);
}
style>
head>
<body>
<div class="wrapper w1">
<div class="cube">
<div class="side front">1div>
<div class="side back">6div>
<div class="side right">4div>
<div class="side left">3div>
<div class="side top">5div>
<div class="side bottom">2div>
div>
div>
body>
html>
- 移动端 1px 问题的解决办法?
使用媒介查询的方法+transfrom，如果是二倍屏，就缩放0.5；三倍屏就缩放0.33。具体如下：
/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
.border-bottom::after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
.border-bottom::after {
-webkit-transform: scaleY(0.33);
transform: scaleY(0.33);
}
}
- 响应式布局中除了screen，你还能说出一个 @media 属性的例子吗？
all 适用于所有设备。
print 为了加载合适的文档到当前使用的可视窗口. 需要提前咨询 paged media（媒体屏幕尺寸）, 以满足个别设备网页尺寸不匹配等问题。
screen 主要适用于彩色的电脑屏幕
speech speech 这个合成器. 注意: CSS2 已经有一个相似的媒体类型叫 aural.
css3
- css3 有哪些新特性
选择器
E:last-child 匹配父元素的最后一个子元素 E。
E:nth-child(n)匹配父元素的第 n 个子元素 E。
E:nth-last-child(n) CSS3 匹配父元素的倒数第 n 个子元素 E。
RGBA（关于背景透明的问题）
多栏布局
<div class="mul-col">
<div>
<h3>栏一h3>
<p>123p>
div>
<div>
<h3>栏二h3>
<p>546p>
div>
<div>
<h3>栏三h3>
<p>789p>
div>
div>
.mul-col {
column-count: 3;
column-gap: 5px;
column-rule: 1px solid gray;
border-radius: 5px;
border: 1px solid gray;
padding: 10px;
}
多背景图
/* background-image:url('1.jpg),url('2.jpg') */
CSS3 word-wrap 属性
p.test {
word-wrap: break-word;/*属性允许长单词或 URL 地址换行到下一行*/
}
文字阴影
text-shadow: 5px 2px 6px rgba(64, 64, 64, 0.5);
@font-face 属性
Font-face 可以用来加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。
@font-face {
font-family: myFamily;
src: url(XXX.ttf);
}
p{
font-size: 110px;
color: black;
font-family: "myFamily";
}
圆角
border-radius: 15px;
边框图片
CSS3 border-image 属性
盒阴影
/* box-shadow: 水平方向的偏移量 垂直方向的偏移量 模糊程度 扩展程度 颜色 是否具有内阴影 */
盒子大小
CSS3 box-sizing 属性
媒体查询
CSS3 @media 查询（重点）
CSS3 动画
@keyframes
@keyframes donghua{
from {
transform: rotate(0);
}
50% {
transform: rotate(180deg);
}
to {
transform: rotate(360deg);
}
}
animation 属性
/* animation ： name duration timing-function delay interation-count direction play-state */
渐变效果
background-image: -webkit-gradient(
linear,
0% 0%,
100% 0%,
from(#2a8bbe),
to(#fe280e)
);
CSS3 弹性盒子模型
- 弹性盒子是 CSS3 的一种新的布局模式。
- CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
- 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
CSS3 过渡
div {
transition: width 2s;
-moz-transition: width 2s; /* 适用于Firefox 4 */
-webkit-transition: width 2s; /* 适用于Safari 和 Chrome */
-o-transition: width 2s; /* 适用于Opera */
}
CSS3 变换（transfrom）
- rotate()旋转
- translate()平移
- scale( )缩放
- skew()扭曲/倾斜
- 变换基点
- 3d 转换
- CSS3 动画（简单动画的实现，如旋转等）
1、 transition+js
html
<div>div>
css
div {
margin: 50px auto;
width: 200px;
height: 200px;
background-color: pink;
}
div.rotate {
/* 旋转360度 */
transform: rotate(360deg);
/* all表示所有属性,5s表示在一秒的时间完成动画 */
transition: all 1s;
}
transition: property duration timing-function delay;
- property: 规定应用过渡的 CSS 属性的名称。
- duration: 定义过渡效果花费的时间。默认是 0,单位是 s。
- timing-function: 规定过渡效果的时间曲线。默认是 “ease”。匀速’linear’,加速’ease-in’,减速’ease-out’,先快后慢’ease-in-out’。
- delay: 规定过渡效果何时开始。默认是 0。单位 s。
js
/*给 div 元素设置鼠标移入时旋转,也就是给它加上.rotate 类名.鼠标移出时移除类名*/
$(function() {
$("div")
.mouseenter(function() {
$(this).addClass("rotate");
})
.mouseleave(function() {
$(this).removeClass("rotate");
});
});
2、@keyframes+animation
html
<div class="rotate">div>
css
@keyframes donghua{
from {
transform: rotate(0);
}
50% {
transform: rotate(180deg);
}
to {
transform: rotate(360deg);
}
}
div {
margin: 50px auto;
width: 200px;
height: 200px;
background-color: pink;
}
div.rotate {
animation: donghua 5s infinite;
}
animation: name duration timing-function delay iteration-count direction;
- animation-name 规定需要绑定到选择器的 keyframe 名称。。
- animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
- animation-timing-function 规定动画的速度曲线 默认是 “ease”。匀速’linear’,加速’ease-in’,减速’ease-out’,先快后慢’ease-in-out’。
- animation-delay 规定在动画开始之前的延迟。
- animation-iteration-count 规定动画应该播放的次数 默认1，n|infinite。
- animation-direction 规定是否应该轮流反向播放动画 normal|alternate。
- 过渡与动画的区别是什么?
transition 可以在一定的时间内实现元素的状态过渡为最终状态，用于模拟以一种过渡动画效果，但是功能有限，只能用于制作简单的动画效果而动画属性
animation 可以制作类似 Flash 动画，通过关键帧控制动画的每一步，控制更为精确，从而可以制作更为复杂的动画。
- transition／translate／transform／animation 的区别（易混淆）
1、首先要明确的是transition、transform、animation这三个都是css属性，而translate是2D转换的一种方法是transform的一个属性值
2、transform是2D、3D变换的属性，只是因为他经常与transition同时使用导致直观上认为动画（过渡）就是transform，但其实transform是动画（过渡）可用的一种属性就像height、opacity一样（值得注意的是动画中之所以常用transform而不直接使用height，是因为使用transform不会引起页面的重排，可以提高性能）
3、transition、animation才是在动画（过渡）中必备的两个属性
animation和transition的区别
1、transition更适用于简单状态的过渡
2、animation可以没有触发条件但是transition不可以，所以在例如页面刚加载时的动画可以使用animation
3、animation可以通过更多的参数实现更复杂的动画效果，包括关键帧数、速度曲线、播放的次数、是否逆向播放等，（官方介绍中animation是transition属性的扩展）
5.说下 CSS3 中一些样式的兼容，分别指兼容哪些浏览器
CSS3中-moz、-ms、-webkit和-o分别代表什么意思
1、-moz-：代表FireFox浏览器私有属性
2、-ms-：代表IE浏览器私有属性
3、-webkit-：代表safari、chrome浏览器私有属性
4、-o-：代表opera浏览器私有属性
css优化
- png、jpg、gif 这些图片格式解释一下，分别什么时候用？，webp 呢
gif 图形交换格式，索引颜色格式，颜色少的情况下，产生的文件极小，支持背景透明，动画，图形渐进，无损压缩（适合线条，图标等），缺点只有 256 种颜色
jpg 支持上百万种颜色，有损压缩，压缩比可达 180：1，而且质量受损不明显，不支持图形渐进与背景透明，不支持动画
png 为替代 gif 产生的，位图文件，支持透明，半透明，不透明。不支持动画，无损图像格式。Png8 简单说是静态 gif，也只有 256 色，png24 不透明，但不止 256 色。
webp 谷歌开发的旨在加快图片加载速度的图片格式，图片压缩体积是 jpeg 的 2/3，有损压缩。高版本的 W3C 浏览器才支持，google39+，safari7+
2.style 标签写在 body 后与 body 前有什么区别？
从上向下加载，加载顺序不同
- css sprite（雪碧图） 是什么,有什么优缺点
概念：将多个小图片拼接到一个图片中。通过 background-position 和元素尺寸调节需要显示的背景图案。
优点：
减少 HTTP 请求数，极大地提高页面加载速度。
增加图片信息重复度，提高压缩比，减少图片大小。
更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现。
缺点：
图片合并麻烦。
维护麻烦，修改一个图片可能需要从新布局整个图片，样式。
- PNG,GIF,JPG 的区别及如何选?
1、GIF：
1：256 色
2： 无损，编辑 保存时候，不会损失。
3：支持简单动画。
4：支持 boolean 透明，也就是要么完全透明，要么不透明
2、JPEG：
1：millions of colors
2： 有损压缩， 意味着每次编辑都会失去质量。
3：不支持透明。
4：适合照片，实际上很多相机使用的都是这个格式。
3、PNG：
1：无损，其实 PNG 有好几种格式的，一般分为两类：PNG8 和 truecolor PNGs；
与 GIF 相比：它通常会产生较小的文件大小，支持阿尔法（变量）透明度，无动画支持
与 JPEG 相比：文件更大，无损，因此可以作为 JPEG 图片中间编辑的中转格式。
结论：JPEG 适合照片，GIF 适合动画，PNG 适合其他任何种类——图表，buttons，背景，图表等等。
5.CSS 在性能优化方面的实践?
- 内联首屏关键 CSS（Critical CSS）
内联 CSS 能够使浏览器开始页面渲染的时间提前，只将渲染首屏内容所需的关键 CSS 内联到 HTML 中
- 异步加载 CSS
- 文件压缩
- 去除无用 CSS
- CSS 合并方法?
@import url(css 文件地址)
- base64 的原理及优缺点?
1.什么是 Base64
Base64 是一种基于 64 个可打印字符来表示二进制数据的编码方式，是从二进制数据到字符的过程。 原则上，计算机中所有内容都是二进制形式存储的，所以所有内容（包括文本、影音、图片等）都可以用 base64 来表示。
2.适用场景
1.Base64一般用于在HTTP协议下传输二进制数据，由于HTTP协议是文本协议，所以在HTTP写一下传输二进制数据需要将二进制数据转化为字符数据，网络传输只能传输可打印字符，在ASCII码中规定，0-31、128这33个字符属于控制字符，32~127这95个字符属于可打印字符,那么其它字符怎么传输呢，Base64就是其中一种方式。
2.将图片等资源文件以Base64编码形式直接放于代码中，使用的时候反Base64后转换成Image对象使用。
3.偶尔需要用这条纯文本通道传一张图片之类的情况发生的时候，就会用到Base64，比如多功能Internet 邮件扩充服务（MIME）就是用Base64对邮件的附件进行编码的。
3.优缺点
优点:可以将二进制数据转化为可打印字符，方便传输数据，对数据进行简单的加密，肉眼安全。
缺点：内容编码后体积变大，编码和解码需要额外工作量。
具体可以参考博客：http://www.fly63.com/article/detial/3790
- 精灵图和 base64 如何选择？
Css Sprites（雪碧图或 css 精灵），是网页图片处理的一种方式，它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
原理： 将许多的小图片整合到一张大图片中，利用 css 中的 background-image 属性，background-position 属性定位某个图片位置，来达到在大图片中引用某个部位的小图片的效果。
优点： 减少网页的 http 请求，提升网页加载速度。 合并多张小图片成大图，能减少字节总数（大图大小<=多张小图大小）.
缺点： 前期需要处理图片将小图合并，多些许工程量。 对于需要经常改变的图片维护起来麻烦。
base64： 是网络上最常见的用于传输 8Bit 字节代码的编码方式之一，要求把每三个 8Bit 的字节转换为四个 6Bit 的字节，Base64 是网络上最常见的用于传输 8Bit 字节代码的编码方式之一。
通俗点讲：将资源原本二进制形式转成以 64 个字符基本单位，所组成的一串字符串。 比如一张图片转成 base64 编码后就像这样，图片直接以 base64 形式嵌入文件中。
生成 base64 编码： 图片生成 base64 可以用一些工具，如在线工具，但在项目中这样一个图片这样生成是挺繁琐。 特别说下，webpack 中的 url-loader 可以完成这个工作，可以对限制大小的图片进行 base64 的转换，非常方便。
优点： base64 的图片会随着 html 或者 css 一起下载到浏览器,减少了请求. 可避免跨域问题
缺点：(低版本）的 IE 浏览器不兼容。 体积会比原来的图片大一点。 css 中过多使用 base64 图片会使得 css 过大，不利于 css 的加载。
适用场景： 应用于小的图片几 k 的，太大的图片会转换后的大小太大，得不偿失。 用于一些 css sprites 不利处理的小图片，如一些可以通过 background-repeat 平铺来做成背景的图片
- 编写高效的 CSS 应该注意什么？
首先，浏览器从最右边的选择器，即关键选择器（key selector），向左依次匹配。根据关键选择器，浏览器从 DOM 中筛选出元素，然后向上遍历被选元素的父元素，判断是否匹配。选择器匹配语句链越短，浏览器的匹配速度越快。避免使用标签和通用选择器作为关键选择器，因为它们会匹配大量的元素，浏览器必须要进行大量的工作，去判断这些元素的父元素们是否匹配。
原则上建议为独立的 CSS 类命名，并且在需要层级关系时，将关系也体现在命名中，这自然会使选择器高效且易于覆盖。
搞清楚哪些 CSS 属性会触发重新布局（reflow）、重绘（repaint）和合成（compositing）。在写样式时，避免触发重新布局的可能。
详细可以参考，提升css选择器性能
- 使用 CSS 预处理的优缺点分别是什么？
优点：
- 提高 CSS 可维护性。
- 易于编写嵌套选择器。
- 引入变量，增添主题功能。可以在不同的项目中共享主题文件。
- 通过混合（Mixins）生成重复的 CSS。
- 将代码分割成多个文件。不进行预处理的 CSS，虽然也可以分割成多个文件，但需要建立多个 HTTP 请求加载这些文件。
缺点：
需要预处理工具。
重新编译的时间可能会很慢。
方法可以参考：https://blog.csdn.net/Errrl/article/details/103721482
- CSS 预处理器有哪些，区别？
less，scss，stylus
1、后缀名不同
默认 Sass 使用 .sass 扩展名，而 Less 使用 .less 扩展名，Stylus 默认使用 .styl 的文件扩展名
2、语法不同
3、声明变量不同
- sass 变量必须是以$开头的，然后变量和值之间使用冒号（：）隔开，和 css 属性是一样的
- Less css 中变量都是用@开头的，其余与 sass 都是一样的
- stylus 对变量是没有任何设定的，可以是以$开头，或者任何的字符，而且与变量之间可以用冒号，空格隔开，但是在 stylus 中不能用@开头
- 为什么要初始化 CSS 样式?
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。
去掉标签的默认样式如：margin,padding，其他浏览器默认解析字体大小，字体设置。
- CSS优化，提高性能的方法有哪些？
1，首推的是合并css文件，如果页面加载10个css文件，每个文件1k，那么也要比只加载一个100k的css文件慢。
2，减少css嵌套，最好不要套三层以上。
3，不要在ID选择器前面进行嵌套，ID本来就是唯一的而且人家权值那么大，嵌套完全是浪费性能。
4，建立公共样式类，把相同样式提取出来作为公共类使用，比如我们常用的清除浮动等。
5，减少通配符*或者类似[hidden=“true”]这类选择器的使用，挨个查找所有…这性能能好吗？当然重置样式这些必须 的东西是不能少的。
6，巧妙运用css的继承机制，如果父节点定义了，子节点就无需定义。
7，拆分出公共css文件，对于比较大的项目我们可以将大部分页面的公共结构的样式提取出来放到单独css文件里， 这样一次下载后就放到缓存里，当然这种做法会增加请求，具体做法应以实际情况而定。
8，不用css表达式，表达式只是让你的代码显得更加炫酷，但是他对性能的浪费可能是超乎你的想象的。
9，少用css rest，可能你会觉得重置样式是规范，但是其实其中有很多的操作是不必要不友好的，有需求有兴趣的 朋友可以选择normolize.css
10，cssSprite，合成所有icon图片，用宽高加上bacgroud-position的背景图方式显现出我们要的icon图，这是一种 十分实用的技巧，极大减少了http请求。
11，当然我们还需要一些善后工作，CSS压缩(这里提供一个在线压缩 YUI Compressor ，当然你会用其他工具来压缩是十 分好的)，
12，GZIP压缩，Gzip是一种流行的文件压缩算法，详细做法可以谷歌或者百度。
- 如何解决不同浏览器的样式兼容性问题？
- 在确定问题原因和有问题的浏览器后，使用单独的样式表，仅供出现问题的浏览器加载。这种方法需要使用服务器端渲染。
- 使用已经处理好此类问题的库，比如 Bootstrap。
- 使用 autoprefixer 自动生成 CSS 属性前缀。
- 使用 Reset CSS 或 Normalize.css。
css扩展
- 对偏移、卷曲、可视的理解
偏移
offsetWidth width + padding + border
offsetHeight height + padding + border
offsetLeft
offsetTop
offsetParent
注意：没有offsetRight和offsetBottom
卷曲
scrollWidth width + padding
scrollHeight 当内部的内容溢出盒子的时候， 顶边框的底部，计算到内容的底部；如果内容没有溢出盒子，计算方式为盒子内部的真实高度（边框到边框）
scrollLeft 这个scroll系列属性不是只读的
scrollTop
scroll()
此函数可以获取卷曲的高度和卷曲的宽度
function myScroll() {
return {
top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
};
}
滚动滚动条的时候触发事件
window.onscroll = function () {
}
可视
clientWidth 获取的是元素内部的真实宽度 width + padding
clientHeight 边框之间的高度
clientLeft 相当于左边框的宽度 如果元素包含了滚动条，并且滚动条显示在元素的左侧。这时，clientLeft属性会包含滚动条的宽度17px
clientTop 相当于顶边框的宽度
client()
此函数可以获取浏览器可视区域的宽高
function myClient() {
return {
wid: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,
heit: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0
};
}
@offsetHeight和style.height的区别
demo.style.height只能获取行内样式，如果样式写到了其他地方，甚至根本就没写，便无法获取
style.height是字符串（而且带单位），offsetHeight是数值
demo.style.height可以设置行内样式，offsetHeight是只读属性
因此，一般用demo.offsetHeight来获取某元素的真实宽度/高度，用style.height来设置宽度/高度
@offsetLeft和style.left的区别
一、style.left只能获取行内样式
二、offsetLeft只读，style.left可读可写
三、offsetLeft是数值，style.left是字符串并且有单位px
四、如果没有加定位，style.left获取的数值可能是无效的
五、最大区别在于offsetLeft以border左上角为基准，style.left以margin左上角为基准
@scrollHeight和scrollWidth
标签内部实际内容的高度/宽度
不计算边框，如果内容不超出盒子，值为盒子的宽高（不带边框）
如果内容超出了盒子，就是从顶部或左部边框内侧一直到内容a的最外部分
@scrollTop和scrollLeft
被卷去部分的 顶部/左侧 到可视区域 顶部/左侧 的距离
2.如果需要手动写动画，你认为最小时间间隔是多久，为什么？
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms
- postcss是什么？
postcss 一种对css编译的工具，类似babel对js的处理，常见的功能如：
1 . 使用下一代css语法
2 . 自动补全浏览器前缀
3 . 自动把px代为转换成rem（rem不熟悉的，点这）
4 . css 代码压缩等等
postcss 只是一个工具，本身不会对css一顿操作，它通过插件实现功能，autoprefixer 就是其一。
具体可以参考，https://www.jianshu.com/p/288963680642
- 知道 css 有个 content 属性吗？有什么作用？有什么应用？
css 的 content 属性专门应用在 before/after 伪元素上，用来插入生成内容。最常见的应用是利用伪类清除浮动。
after 伪元素通过 content 在元素的后面生成了内容为一个点的块级素，再利用 clear:both 清除浮动。 那么问题继续还有，知道 css 计数器（序列数字字符自动递增）吗？如何通过 css content 属性实现 css 计数器？
css 计数器是通过设置 counter-reset 、counter-increment 两个属性 、及 counter()/counters()一个方法配合 after / before 伪类实现。
详细可以参考https://blog.csdn.net/haoyanyu_/article/details/80238583
- 标准模式与怪异模式的区别
浏览器解析 CSS 的两种模式：标准模式(strict mode)和怪异模式(quirks mode)
标准模式：浏览器按 W3C 标准解析执行代码；
怪异模式：使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以称之为怪异模式。
浏览器解析时使用标准模式还是怪异模式，与网页中的 DTD 声明直接相关，DTD 声明定义了标准文档的类型（标准模式解析）文档类型，会使浏览器使用相关的方式加载网页并显示，忽略 DTD 声明，将使网页进入怪异模式（quirks mode）。
区别是：
1、盒模型：
在怪异模式下，盒模型为 IE 模型
而在 W3C 标准的盒模型中为：标准盒子
2、图片元素的垂直对齐方式
对于 inline 元素和 table-cell 元素，标准模式下 vertical-align 属性默认取值是 baseline；在怪异模式下，table 单元格中的图片的 vertical-align 属性默认取值是 bottom。因此在图片底部会有及像素的空间。
3、元素中的字体 CSS 中，对于 font 的属性都是可以继承的。怪异模式下，对于 table 元素，字体的某些元素将不会从 body 等其他封装元素继承中的得到，特别是 font-size 属性。
4、内联元素的尺寸
标准模式下， inline 元素无法自定义大写；
怪异模式下，定义这些元素的 width、height 属性可以影响这些元素显示的尺寸。
5、元素的百分比高度
CSS 中对于元素的百分比高度规定：百分比为元素包含块的高度，不可为负值；如果包含块的高度没有显示给出，该值等同于 auto，所以百分比的高度必须是在元素有高度声明的情况下使用。
当一个元素使用百分比高度是，标准模式下，高度取决于内容变化，怪异模式下，百分比高度被准确应用
6、元素溢出的处理
标准模式下，overflow 取值默认为 visible；在怪异模式在，该溢出会被当做扩展 box 来对待，即元素的大小由内容决定，溢出不会裁剪，元素框自动调整，包含溢出内容。
6.什么是CSS hack，原理？
针对不同的浏览器或浏览器不同版本写相应的CSS的过程，就是CSS hack
由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样，以及CSS优先级对浏览器展现效果的影响，我们可以据此针对不同的浏览器情景来应用不同的CSS。
- CSS hack分类？
条件hack、属性级hack、选择符hack。
具体用法，请点击参考
- svg和canvas的区别？
1、canvas时h5提供的新的绘图方法 ；svg已经有了十多年的历史
2、canvas画图基于像素点，是位图，如果进行放大或缩小会失真 ；svg基于图形，用html标签描绘形状，放大缩小不会失真
3、canvas需要在js中绘制 ；svg在html绘制
4、canvas支持颜色比svg多
5、canvas无法对已经绘制的图像进行修改、操作 ；svg可以获取到标签进行操作
你可能感兴趣的:(前端总结,css,前端)