html/ css
css盒模型、BFC、css浮动、css经典布局、css兼容、css hack、html/ css基础
- css盒模型
- BFC
- css浮动
- css经典布局
- 自适应
- css兼容
- css hack
- html/ css基础
- css3 transform
- css实战
- 图片
CSS 标准的制定过程是怎样的？(对标准的理解)
CSS 层叠样式优先级怎么计算？(考察层叠的顺序以及 important 的影响)
CSS 有哪些选择器？如何计算优先级？(基础题，答错死)
CSS 对元素属性赋值的详细过程？(指定值-计算值-应用值-实际值)
CSS 有哪些单位以及含义区别？(再结合 dpr 适配/响应式一起问)
CSS 盒模型的理解？(继续拓展外边距合并，块级盒行内盒)
CSS 如何处理文档流？(常规流，浮动，定位，BFC，IFC，GFC…理解这块许多面试题迎刃而解)
CSS 可视化效果，如何处理裁剪和溢出？overflow 和 clip？display 和 visibility?
CSS 字体匹配策略？字体族？文字效果？
| Doctype作用? 严格模式与混杂模式如何区分？它们有何意义？ |
Doctype声明于文档最前面，告诉浏览器以何种方式来渲染页面，这里有两种模式，严格模式和混杂模式。
严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
混杂模式，向后兼容，模拟老式浏览器，防止浏览器无法兼容页面。
| css盒模型基本概念？ |
1、margin、border、padding、content。在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域。4个部分一起构成了css中元素的盒模型。
2、分类：标准模型、IE模型
IE盒子模型，width表示content + padding + border这三个部分的宽度
标准的盒子模型中，width指content部分的宽度
| 标准模型和IE模型的区别：计算高度和宽度的不同，怎么不同，高度宽度是怎么计算的？ |
width:100px; 如果是IE，100px包括border和padding
| css如何设置这两种模型？ |
box-sizing:content-box;
box-sizing:border-box; /*IE模型*/
box-sizing默认属性是content-box
| js如何设置获取盒模型对应的宽和高？ |
1、dom.style.width/height // 只能取到内联样式
2、dom.currentStyle.width/height // 取到渲染后的样式（只有IE支持）
3、window.getComputedStyle(dom).width/height // 兼容firefox，chrome，兼容性更好
4、dom.getBoundingClientRect().width/height // 运行后的宽度。①getBoundingClientRect用于获取某个元素相对于视窗的位置集合。getBoundingClientRect()能得到top/right/bottom/left/width/height，②bounding:范围,rect:矩形。③淘宝自适应js里用的就是这个方法
- 实例题（根据盒模型解释边距重叠）
边距重叠：父子元素，兄弟元素，空元素上下边距
| #sec的子元素是.child,说出下面的值？ |
1、#sec{background:#f00;}
.child{background:#0f0;height:100px;margin-top:10px;}
问：#sec的高度是多少？
100px
2、#sec{background:#f00;overflow:hidden;}
.child{background:#0f0;height:100px;margin-top:10px;}
问：#sec的高度是多少？
110px
| BFC的基本概念？ |
Block Formatting Context，块级格式化上下文
IFC(CSS2.1)：Inline Formating Contexts，内联元素格式化上下文，不过面试问的比较多的是BFC
GFC(CSS3):GridLayout Formating Contexts，网格布局格式化上下文
FFC(CSS3):Flex Formatting Contexts，自适应格式化上下文
| BFC原理/ BFC渲染规则？ |
1、BFC元素垂直方向的边距会发生重叠
2、BFC的区域不会与浮动元素的box重叠（可用于清除浮动）
3、BFC为一个独立的元素，外面的元素不会影响里面的元素，里面的元素也不会影响外面的元素。
4、计算BFC高度的时候，浮动元素也会参与计算。
| 如何创建BFC？ |
1、float值不为none，即为left, right
2、position的值不为static(默认值),relative，即为absolute,fixed
3、display为inline-block, flex, inline-flex, table-cell,table-caption
4、overflow不为visible，overflow为auto,hidden，scroll ;
5、使用fieldset元素（可以给表单元素设置环绕边框的html元素）
| BFC的使用场景？ |
1、BFC垂直方向边距重叠
2、BFC不与float重叠
3、清除浮动：子元素是浮动元素的时候，把外层元素设置成BFC的时候，子元素的浮动元素也会参与到父级元素的高度计算上来。
| css浮动原理？ |
浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。
| 浮动元素引起的问题？ |
1、父元素的高度无法被撑开，影响与父元素同级的元素
2、与浮动元素同级的非浮动元素（内联元素）会跟随其后
3、若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构
| css清除浮动的方法？ |
1、使用空标签
给所有浮动标签后面添加一个空标签，定义CSS clear:both.
但是这种方法会增加一个无意义的标签。
2、设置父级元素为BFC元素
3、使用after伪元素清除浮动
这个方法只适用于非IE浏览器。该方法必须为需要清除浮动元素的伪对象中设置height:0,不然该元素会比实际元素高出若干像素。
#parent:after{content:".";height:0;visibility:hidden;display:block;clear:both;
}
| 清除浮动的方式有哪些?比较好的是哪一种? |
参考答案
常用的一般为三种.clearfix, clear:both,overflow:hidden;
比较好是 .clearfix,伪元素万金油版本,后两者有局限性.
.clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;
}<!--
为毛没有 zoom ,_height 这些,IE6,7这类需要 csshack 不再我们考虑之内了
.clearfix 还有另外一种写法,
-->.clearfix:before, .clearfix:after {content:"";display:table;
}
.clearfix:after{clear:both;overflow:hidden;
}
.clearfix{zoom:1;
}<!--
用display:table 是为了避免外边距margin重叠导致的margin塌陷,
内部元素默认会成为 table-cell 单元格的形式
-->
clear:both:若是用在同一个容器内相邻元素上,那是贼好的,有时候在容器外就有些问题了, 比如相邻容器的包裹层元素塌陷
overflow:hidden:这种若是用在同个容器内,可以形成 BFC避免浮动造成的元素塌陷
| 容器包含若干浮动元素时如何清理浮动? |
参考答案
容器元素闭合标签前添加额外元素并设置clear: both
父元素触发块级格式化上下文(见块级可视化上下文部分)
设置容器元素伪元素进行清理
/**
* 在标准浏览器下使用
* 1 content内容为空格用于修复opera下文档中出现
* contenteditable属性时在清理浮动元素上下的空白
* 2 使用display使用table而不是block：可以防止容器和
* 子元素top-margin折叠,这样能使清理效果与BFC，IE6/7
* zoom: 1;一致
**/.clearfix:before,
.clearfix:after {content: " "; /* 1 */display: table; /* 2 */
}.clearfix:after {clear: both;
}/**
* IE 6/7下使用
* 通过触发hasLayout实现包含浮动
**/
.clearfix {*zoom: 1;
}
| 三栏布局：左右各300px,中间自适应？ |
1、浮动float
<style>html * {padding:0;margin:0;}.layout{margin-top:20px;}.layout article div{min-height:100px;}</style>
</head>
<body>
<!--浮动解决方案-->
<section class="layout float"><style media="screen">.layout.float .left{float:left;width:300px;background:red;}.layout.float .right{float:right;width:300px;background:blue;}.layout.float .center{ /*块元素自动撑开*/background:yellow;}</style><article class="left-right-center"><div class="left"></div><div class="right"></div><div class="center"><h1>浮动解决方案</h1>1.这是三蓝布局中间部分2.这是三蓝布局中间部分</div></article>
</section>
2、绝对定位position:absolute
<!--绝对定位解决方案-->
<section class="layout absolute"><style>.layout.absolute .left-center-right>div{position:absolute;}.layout.absolute .left{left:0;width:300px;background:red;}.layout.absolute .center{left:300px;right:300px;background:yellow;}.layout.absolute .right{right:0;width:300px;background:blue;}</style><article class="left-center-right"><div class="left"></div><div class="center"><h2>绝对定位解决方案</h2>1.这是三蓝布局中间部分2.这是三蓝布局中间部分</div><div class="right"></div></article>
</section>
3、flex布局
<!--flexbox解决方案-->
<section class="layout flexbox"><style>.layout.flexbox{margin-top:140px;}.layout.flexbox .left-center-right{display:flex;}.layout.flexbox .left{width:300px;background:red;}.layout.flexbox .center{flex:1; /*中间自适应原理*/background:yellow;}.layout.flexbox .right{width:300px;background:blue;}</style><article class="left-center-right"><div class="left"></div><div class="center"><h2>flexbox解决方案</h2>1.这是三蓝布局中间部分2.这是三蓝布局中间部分</div><div class="right"></div></article>
</section>
4、表格布局table-cell
<!--表格布局解决方案-->
<section class="layout table"><style>.layout.table .left-center-right{width:100%;display:table;height:100px;}.layout.table .left-center-right>div{display:table-cell;}.layout.table .left{width:300px;background:red;}.layout.table .center{background:yellow;}.layout.table .right{width:300px;background:blue;}</style><article class="left-center-right"><div class="left"></div><div class="center"><h2>表格布局解决方案</h2>1.这是三蓝布局中间部分2.这是三蓝布局中间部分</div><div class="right"></div></article></article>
</section>
5、网格布局grid
<!--网格布局解决方案-->
<section class="layout grid"><style media="screen">.layout.grid .left-center-right{display:grid;width:100%;grid-template-rows:100px;grid-template-columns:300px auto 300px;}.layout.grid .left{background:red;}.layout.grid .center{background:yellow;}.layout.grid .right{background:blue;}</style><article class="left-center-right"><div class="left"></div><div class="center"><h2>网格布局解决方案</h2>1.这是三蓝布局中间部分2.这是三蓝布局中间部分</div><div class="right"></div></article>
</section>
1、延伸
（1）这5种方案的优缺点
①浮动：清除浮动，兼容性比较好。
②绝对定位：快捷，布局已经脱离了文档流，导致下面的元素也要脱离文档流，使用性较差。
③flex布局，解决了浮动和绝对定位的缺点，移动端基本已经支持了兼容性。
④表格布局：表格布局的兼容性非常好
⑤网格布局：新出的
（2）如果“高度已知”去掉，中间内容高度撑开了，需要左右的高度也自动撑开，哪些方案仍适合，哪些方案不再适用。
①flex、table能用
②flex左边有遮挡，所以显示在右边，没有遮挡的时候，就会显示在最左边。创建bfc
（3）5种方案的兼容性，如果是实际项目中，最优方案是什么？
（4）三栏布局
①左右宽度固定，中间自适应
②上下高度固定，中间自适应。
（5）两栏布局
①左宽度固定，右自适应
②右宽度固定，左自适应
③上高度固定，下自适应
④下高度固定，上自适应
| 圣杯布局？ |
1、圣杯布局的核心是左、中、右三栏都通过float进行浮动，然后通过负值margin进行调整。
2、.left， .right的margin-left是为了让.main .left .right在同一行。
3、.container的padding-left,padding-right，.left的position和left, . right的position和left是为了防止文字被遮挡。
<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>
</head>
<body>
<div class="container"><div class="main">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores error incidunt iste iure nisi numquam porro reiciendis, suscipit veniam vero.</div><div class="left"></div><div class="right"></div>
</div>
</body>
| 双飞翼布局？ |
1、双飞翼布局的前两步和圣杯布局一样，只是处理中间栏部分内容被遮挡问题的解决方案有所不同。
2、既然main部分的内容会被遮挡，那么就在main内部再加一个content，通过设置其margin来避开遮挡，问题也就可以解决了。
3、需要注意的是，需要在main后面加一个元素来清除浮动。
<style>.main{float:left;width:100%;}.content{height:200px;margin-left:100px;margin-right:200px;background-color:green;}.main::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>
</head>
<body><div class="main"><div class="content"></div></div><div class="left"></div><div class="right"></div>| css水平、垂直居中的写法，请至少写出4种？ |
1、水平居中
行内元素: text-align: center
块级元素: margin: 0 auto
position: absolute +left:50%+ transform:translateX(-50%)
display: flex + justify-content: center
2、垂直居中
设置line-height 等于height
position：absolute +top:50%+ transform:translateY(-50%)
display: flex + align-items: center
| 经常遇到的css兼容性的问题在哪些？如何解决的？ |
1、rem
rem是全部的长度都相对于根元素元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。
2、em
子元素字体大小的em是相对于父元素字体大小
元素的width/height/padding/margin用em的话是相对于该元素的font-size
3、vw/vh
全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于 屏幕宽度和高度的 1%，不过，处理宽度的时候%单位更合适，处理高度的 话 vh 单位更好。
4、px
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
一般电脑的分辨率有{1920*1024}等不同的分辨率
1920*1024 前者是屏幕宽度总共有1920个像素,后者则是高度为1024个像素
| 经常遇到的css兼容性的问题在哪些？如何解决的？ |
基本都是ie8及以前的版本会遇到css兼容问题。一般是图片透明、圆角、字体大小，新出的css3样式。
aSuncat：如此老旧浏览器终究会被市场放弃，不花时间在这上面。
| 什么是CSS hack？ |
针对不同的浏览器或浏览器不同版本写相应的CSS的过程，就是CSS hack
| CSS hack的原理？ |
由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样，以及CSS优先级对浏览器展现效果的影响，我们可以据此针对不同的浏览器情景来应用不同的CSS。
| CSS hack分类？ |
// 1、条件hack
<!--[if IE]>
<style>.test{color:red;}
</style>
<![endif]-->
// 2、属性hack（类内部hack）
.test{color:#090\9; /*For IE8*/*color:#f00; /*For IE7 and earlier*/_color:#ff0; /*For IE6 and earlier*/
}
// 3、选择符hack（选择器属性前缀法）
* htm .test{color:#0f90;} /*For IE6 and earlier*/
* + html .test{color:#ff0;} /*For IE7*/
| CSS hack书写顺序？ |
CSS hack书写顺序，一般是将适用范围广、被识别能力强的CSS定义在前面。
| display: block;和display: inline;的区别 |
参考答案
block元素特点：
1.处于常规流中时，如果width没有设置，会自动填充满父容器 2.可以应用margin/padding 3.在没有设置高度的情况下会扩展高度以包含常规流中的子元素 4.处于常规流中时布局时在前后元素位置之间（独占一个水平空间） 5.忽略vertical-align
inline元素特点
1.水平方向上根据direction依次布局
2.不会在元素前后进行换行
3.受white-space控制
4.margin/padding在竖直方向上无效，水平方向上有效
5.width/height属性对非替换行内元素无效，宽度由元素内容决定
6.非替换行内元素的行框高由line-height确定，替换行内元素的行框高由height,margin,padding,border决定
7.浮动或绝对定位时会转换为block
8.vertical-align属性生效
| display,float,position 的关系 |
参考答案
如果display为 none，那么 position 和 float 都不起作用，这种情况下元素不产生框
否则，如果 position 值为 absolute 或者 fixed，框就是绝对定位的，float 的计算值为 none，display 根据下面的表格进行调整。
否则，如果 float 不是 none，框是浮动的，display 根据下表进行调整
否则，如果元素是根元素，display 根据下表进行调整
其他情况下 display 的值为指定值 总结起来：绝对定位、浮动、根元素都需要调整display
| css sprite 是什么,有什么优缺点 |
概念：将多个小图片拼接到一个图片中。通过 background-position 和元素尺寸调节需要显示的背景图案。
优点：
减少 HTTP 请求数，极大地提高页面加载速度
增加图片信息重复度，提高压缩比，减少图片大小
更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现
缺点：
图片合并麻烦
维护麻烦，修改一个图片可能需要重新布局整个图片，样式
| 如何水平居中一个元素？ |
参考答案
如果需要居中的元素为常规流中 inline 元素，为父元素设置text-align: center;即可实现
如果需要居中的元素为常规流中 block 元素，1）为元素设置宽度，2）设置左右 margin 为 auto。3）IE6 下需在父元素上设置text-align: center;,再给子元素恢复需要的值
<body><div class="content">aaaaaa aaaaaa a a a a a a a a</div>
</body><style>body {background: #DDD;text-align: center; /* 3 */}.content {width: 500px; /* 1 */text-align: left; /* 3 */margin: 0 auto; /* 2 */background: purple;}
</style>
如果需要居中的元素为浮动元素，1）为元素设置宽度，2）position: relative;，3）浮动方向偏移量（left 或者 right）设置为 50%，4）浮动方向上的 margin 设置为元素宽度一半乘以-1
<body><div class="content">aaaaaa aaaaaa a a a a a a a a</div>
</body><style>body {background: #DDD;}.content {width: 500px; /* 1 */float: left;position: relative; /* 2 */left: 50%; /* 3 */margin-left: -250px; /* 4 */background-color: purple;}
</style>
如果需要居中的元素为绝对定位元素，1）为元素设置宽度，2）偏移量设置为 50%，3）偏移方向外边距设置为元素宽度一半乘以-1
<body><div class="content">aaaaaa aaaaaa a a a a a a a a</div>
</body><style>body {background: #DDD;position: relative;}.content {width: 800px;position: absolute;left: 50%;margin-left: -400px;background-color: purple;}
</style>
如果需要居中的元素为绝对定位元素，1）为元素设置宽度，2）设置左右偏移量都为 0,3）设置左右外边距都为 auto
<body><div class="content">aaaaaa aaaaaa a a a a a a a a</div>
</body><style>body {background: #DDD;position: relative;}.content {width: 800px;position: absolute;margin: 0 auto;left: 0;right: 0;background-color: purple;}
</style>
| link和@import的区别？ |
1、从属关系区别：
link属于html标签，而@import是css提供的。
2、加载顺序区别：
页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载。
3、兼容性区别：
import只在IE5以上才能识别，而link是html标签，无兼容问题。
4、dom可操作性区别：
可以通过JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式
5、权重区别：
如果已经存在相同样式，@import引入的这个样式将被该 CSS 文件本身的样式层叠掉，表现出link方式的样式权重高于@import的权重这样的直观效果。
（aSuncat：简而言之，link和@import，谁写在后面，谁的样式就被应用，后面的样式覆盖前面的样式。）
| calc, support, media各自的含义及用法？ |
@support主要是用于检测浏览器是否支持CSS的某个属性，其实就是条件判断，如果支持某个属性，你可以写一套样式，如果不支持某个属性，你也可以提供另外一套样式作为替补。
calc() 函数用于动态计算长度值。 calc()函数支持 “+”, “-”, “*”, “/” 运算；
@media 查询，你可以针对不同的媒体类型定义不同的样式。
| 如何理解标签语义，它有哪些好处？ |
1、语义元素清楚地向浏览器和开发者描述其意义。
2、好处：
（1）html结构清晰，代码可读性较好。
（2）有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
（3）无障碍阅读，样式丢失的时候能让页面呈现清晰的结构。
（4）方便其他设备解析，如盲人阅读器根据语义渲染网页
（5）便于团队维护和开发，语义化更具可读性，代码更好维护，与CSS3关系更和谐。
// 常用的语义化标签
h1-h6
p
ul
ol
dl
thead
tbody// html5中新增的语义化标签
header section或page的页眉
nav 导航栏
footer section或page的页脚
progress 进度条
video 视频
| css的选择符有哪些，优先级如何计算，哪些属性可以继承？ |
1、css选择符类型
1、通用选择器：*
2、类别选择器：.class
3、id选择器：#id
4、标签选择器：p
5、后代选择器：div p
6、子选择器：div > p
7、群组选择器：div , p
8、相邻同胞选择器：div +p
9、伪类选择器：:link :visited :active :hover :focus :first-child
10、伪元素选择器：:first-letter :first-line:before :after :lang(language)
11、属性选择器：[attribute] [attribute=value] [attribute~=value] [attribute|=value]
2、优先级计算
!important > 内联样式 > id > class > tag
3、属性继承
（1）所有元素可继承：visibility、cursor
（2）块级元素可继承：text-indent、text-align
（3）内联元素可继承：
①字体系列属性：font、font-family、font-size、font-style、font-variant、font-weight、font-stretch、font-size-adjust
②除text-indent、text-align之外的文本系列属性：
letter-spacing、word-spacing、white-space、line-height、color、text-transform、direction
扩展：
一、不可继承的样式属性：
1、display
2、文本属性：vertical-align、text-decoration、text-shadow、unicode-bidi
3、盒子模型属性：border、padding、margin、width、height
4、背景属性：background
5、定位属性：float、clear、position
6、生成内容属性：content
7、轮廓样式属性：outlien-style
8、页面样式属性：size
9、声音样式属性：pause-before
| 行内元素和块级元素举几个例子？ |
行内元素：span,a,var ,em,input,img,img,textarea,var,em,strong,select,lable
块级标签：div,p,h1-h3,ul,ol,dl,li,dd,dt,table,td,tr
| 伪类和伪元素？ |
伪类：:active :focus :hover :link :visited :first-child
伪元素：:before :after :first-letter :first-line
| placeholder的实现？ |
3种方案：
1、为input添加一个兄弟节点span，并为span设置绝对定位（父节点为position: relative;），使其位于input之上。
2、为添加一个属性phText=“手机号码/邮箱地址”。默认状态下，value值为提示文本并且颜色为灰色；获得焦点时，若value值等于phText属性值，则value值置空；失去焦点时，若value值为空，则value值为提示文本。
3、把placeholder值赋给并且颜色置为灰色，然后获得焦点时判断value值等于placeholder值的话，把光标移至最前面（this.createTextRange和this.setSelectionRange）。当发生输入操作时，先把value值置为空，然后再接收输入值。另外，对于<input type="password">要为其新增一个<input type="text">用来显示提示文本，当发生输入操作时，需要把<input type="text">隐藏，然后把<input type="password">显示出来并让其获得焦点。此方案也有一些小缺陷，那就是当用鼠标右键粘贴时会出现bug。
| 写出ul、ol、dl三种列表的html结构？ |
ul：unordered list, 无序列表
<ul><li></li>
</ul>
ol：ordered list, 有序列表
<ol><li></li>
</ol>
dl：definition list, 定义列表，
<dl><dt>计算机</dt><dd>用来计算的仪器...</dd><dt>显示器</dt><dd>以视觉方式显示信息的装置...</dd>
</dl>
| svg和canvas的区别？ |
1、canvas时h5提供的新的绘图方法 ；svg已经有了十多年的历史
2、canvas画图基于像素点，是位图，如果进行放大或缩小会失真 ；svg基于图形，用html标签描绘形状，放大缩小不会失真
3、canvas需要在js中绘制 ；svg在html绘制
4、canvas支持颜色比svg多
5、canvas无法对已经绘制的图像进行修改、操作 ；svg可以获取到标签进行操作
| flex实现原理？ |
1、容器上有主轴和纵轴的概念，默认主轴（main-axis）是横向，从左到右，纵轴是竖向，从上到下。
2、其中所有的孩子的布局都会受到这两个轴的影响。
3、有很多相关的css属性就是通过改变主轴和纵轴的方向来实现不同的布局效果的。
| src与href的区别？ |
1、href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
2、src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
| css模块化？ |
待完善
| css其他？ |
理论篇
CSS 标准的制定过程是怎样的？(对标准的理解)
CSS 层叠样式优先级怎么计算？(考察层叠的顺序以及 important 的影响)
CSS 有哪些选择器？如何计算优先级？(基础题，答错死)
CSS 对元素属性赋值的详细过程？(指定值-计算值-应用值-实际值)
CSS 有哪些单位以及含义区别？(再结合 dpr 适配/响应式一起问)
CSS 盒模型的理解？(继续拓展外边距合并，块级盒行内盒)
CSS 如何处理文档流？(常规流，浮动，定位，BFC，IFC，GFC…理解这块许多面试题迎刃而解)
CSS 可视化效果，如何处理裁剪和溢出？overflow 和 clip？display 和 visibility?
CSS 字体匹配策略？字体族？文字效果？
好了我先写这么多吧
实践篇
如何实现物理 1px 效果？
如何实现水平垂直居中？
常见布局方案？浮动布局？流式布局？弹性布局？Flex 布局？网格布局？
无线端响应式适配方案？
CSS 模块化/组件化设计？
CSS 多边框的实现方案？
如何实现 CSS 埋点统计？
CSS 硬件加速？性能优化方面？
CSS 预处理器和后处理器？autoprefixer？postCSS？
太多了一时半会儿想不全…
| 分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景 |
结构：
display:none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击，
visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击
opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击
继承：
display: none和opacity: 0：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。
visibility: hidden：是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式。
性能：
displaynone : 修改元素会造成文档回流,读屏器不会读取display: none元素内容，性能消耗较大
visibility:hidden: 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取visibility: hidden元素内容
opacity: 0 ：修改元素会造成重绘，性能消耗较少
联系：它们都能让元素不可见
| css其他？ |
height: 1px;
transform: scale(0.5);
| 画一个三角形 |
方法1：border设置透明度
.a{width: 0;height: 0;border-width: 100px;border-style: solid;border-color: transparent #0099CC transparent transparent;transform: rotate(90deg); /*顺时针旋转90°*/}<div class="a"></div>
方法2：正方形transform
图片
| 如何选择图片格式，例如 png, webp[头条] |
| 图片格式 | 压缩方式 | 透明度 | 动画 | 浏览器兼容 | 适应场景 |
|---|---|---|---|---|---|
| JPEG | 有损压缩 | 不支持 | 不支持 | 所有 | 复杂颜色及形状、尤其是照片 |
| GIF | 无损压缩 | 支持 | 支持 | 所有 | 简单颜色，动画 |
| PNG | 无损压缩 | 支持 | 不支持 | 所有 | 需要透明时 |
| APNG | 无损压缩 | 支持 | 支持 | FirefoxSafariiOS Safari | 需要半透明效果的动画 |
| WebP | 有损压缩 | 支持 | 支持 | ChromeOperaAndroid ChromeAndroid Browser | 复杂颜色及形状浏览器平台可预知 |
| SVG | 无损压缩 | 支持 | 支持 | 所有（IE8以上） | 简单图形，需要良好的放缩体验需要动态控制图片特效 |
