- 圣杯布局
- CSS合并方法
- 盒子模型
- CSS定位
- CSS动画原理
- CSS3动画(简单动画的实现,如旋转等)
- CSS不同选择器的权重(CSS层叠的规则)
- flexbox布局
- 块级元素和行内元素的异同
- CSS在性能优化方面的实践(比方说选择器的效率等)
- CSS打包压缩的方法
- 使用CSS预处理的优缺点(比方说Sass和Compass等)
- { box-sizing: border-box; }这条CSS规则是干嘛的,有什么优点
- CSS浮动的原理及清除浮动的方法及优缺点
- CSS垂直居中的方法
- base64的原理及优缺点
- CSS reset和normalize的区别
- link和@import的区别
- 左右上下margin合并重合的问题
- rem字体大小设置
- CSS3新增的特性
- 列出你所知道可以改变页面布局的属性
- 多人协作时,怎么避免样式被覆盖
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
CSS合并方法
答案:避免使用@import引入多个css文件,可以使用CSS工具将CSS合并为一个CSS文件,例如使用Sass\Compass等。盒子模型
答案:参考HTML中第11题。CSS定位
答案:Position各属性值详解
CSS中的绝对定位与相对定位,注意的是定位的参照:relative参照于自己该出现的位置,而absolute参照于祖先元素中与自己最近的已定位元素(relative或者absolute)直到body元素。CSS动画原理
答案:挤压与拉伸、预期、舞台布局、顺利动画与关键帧、动作跟随与重叠、慢进慢出、弧形移动
CSS 动画指南: 原理和实战
英文原版CSS3动画(简单动画的实现,如旋转等)
答案:依靠CSS3中提出的三个属性:transition、transform、animation。
transition:定义了元素在变化过程中是怎么样的,包含transition-property、transition-duration、transition-timing-function、transition-delay。
transform:定义元素的变化结果,包含rotate、scale、skew、translate。
animation:动画定义了动作的每一帧(@keyframes)有什么效果,包括animation-name,animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction。
具体可以参考一下三篇文章:
CSS3 Transition
CSS3 Transform
CSS3 AnimationCSS不同选择器的权重(CSS层叠的规则)
答案:首先,找出所有应用到该标签的所有规则。然后按照下面的规则进行应用:1、!important规则最重要,大于其它规则;2、行内样式规则,加1000;3、对于选择器中给定的各个ID属性值,加100;4、对于选择器中给定的各个类属性、属性选择器或者伪类选择器,加10;5、对于选择其中给定的各个元素标签选择器,加1;6、通配符和结合符给予特殊性没有任何贡献;7、如果权值一样,则按照样式规则的先后顺序来应用,顺序靠后的覆盖靠前的规则。记住,CSS中选择器的优先级是先判断高位的数字,如果相等,才会继续判断低位的数字,如果高位分出大小了,就不考虑低位了。flexbox布局及相关设置
答案:简单描述一下flex的属性,细节可以参考链接文档
容器属性(采用Flex布局的元素,container):
flex-direction:决定主轴的方向(即项目的排列方向);row | row-reverse | column | column-reverse;
flex-wrap:设置是否换行;nowrap | wrap | wrap-reverse
flex-flow:flex-direction属性和flex-wrap属性的简写形式,flex-direction || flex-wrap
justify-content:定义了项目在主轴上的对齐方式;flex-start | flex-end | center | space-between | space-around
align-items:定义项目在交叉轴上如何对齐;flex-start | flex-end | center | baseline | stretch
align-content:定义了多根轴线的对齐方式;flex-start | flex-end | center | space-between | space-around | stretch项目属性(子元素为项目,item)
order:定义项目的排列顺序。数值越小,排列越靠前,默认为0。
flex-grow:定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
flex-shrink:定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
flex-basis:定义了在分配多余空间之前,项目占据的主轴空间。
flex:flex-grow, flex-shrink 和 flex-basis的简写。
align-self:允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。块级元素和行内元素的异同
答案:块级元素:header/p/div/form/table/footer....;行内元素:span/a/strong/em/input...
1.块级元素分行,行内元素不分行;
2.块级元素可以包含块级元素和行内元素,行内元素只能包含行内元素,不能包含块级元素;
3.行内元素设置width、height、margin的上下、padding的上下无效;
4.行内元素可以通过设置display:block,渲染为块级元素。CSS在性能优化方面的实践(比方说选择器的效率等)
答案:网络层面:css压缩与合并、Gzip压缩;加载方式:css文件放在head里、不要用@import;语法结构:尽量用缩写、避免用滤镜、合理使用选择器。
可参考CSS性能优化策略CSS打包压缩的方法与异同
答案:利用打包工具grunt/gulp。
易于使用:采用代码优于配置策略,Gulp让简单的事情继续简单,复杂的任务变得可管理。
高效:通过利用Node.js强大的流,不需要往磁盘写中间文件,可以更快地完成构建。
高质量:Gulp严格的插件指导方针,确保插件简单并且按你期望的方式工作。
易于学习:通过把API降到最少,你能在很短的时间内学会Gulp。构建工作就像你设想的一样:是一系列流管道。使用CSS预处理的优缺点(比方说Sass和Compass等)
答案:Css预处理器定义了一种新的语言将Css作为目标生成文件,然后开发者就只要使用这种语言进行编码工作了。预处理器通常可以实现浏览器兼容,变量,结构体等功能,代码更加简洁易于维护。让你用一种编程语言的思维来写CSS样式。但是带来的缺点是需要增加设计工作以及学习熟悉成本。{ box-sizing: border-box; }这条CSS规则是干嘛的,有什么优点
答案:让CSS布局更加直观:box-sizingCSS浮动的原理及清除浮动的方法及优缺点
答案:而此浮动元素在文档流空出的位置,由后续的(非浮动)元素填充上去:块级元素直接填充上去,若跟浮动元素的范围发生重叠,浮动元素覆盖块级元素。内联元素:有空隙就插入。给元素的float属性赋值后,就是脱离文档流,进行左右浮动,紧贴着父元素(默认为body文本区域)的左右边框。
css-float浮动的深入研究、详解及拓展
那些年我们一起清除过的浮动
css清除浮动各种方法CSS水平垂直居中的方法
答案:CSS垂直居中总结base64的原理及优缺点
答案:优缺点如下,原理参考文章
优点可以加密,减少了http请求,图片更新没有上传和清缓存了;
缺点是需要消耗CPU进行编解码、增大了CSS、浏览器兼容方面吧。
从原理上搞定编码-- Base64编码
关于base64编码的原理及实现
小tip: base64:URL背景图片与web页面性能优化CSS reset和normalize的区别
答案:reset是将浏览器所有的默认样式进行重置、覆盖,normalize是保留原来浏览器的样式并且尽量在不同浏览器里保持一致。
可以参考知乎上的问题Normalize.css 与传统的 CSS Reset 有哪些区别?link和@import的区别
答案:本质上他们都是为了引入外部css样式的,但是有区别如下:
1.link属于XHTML标签,而@import完全是CSS提供的一种方式。
2.加载顺序的差别。当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显。
3.兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。
4.使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。左右上下margin合并重合的问题
答案:上下margin重合,并选取最大的作为间距。左右margin不合并,间距等于相加。
也可以参考:
CSS 外边距(margin)重叠及防止方法
W3C 8.3.1 Collapsing marginsrem字体大小设置
答案: rem其实就是相对根元素的相对值,具体可参考:
CSS3的REM设置字体大小CSS3新增的特性
答案:深入了解 CSS3 新特性列出你所知道可以改变页面布局的属性
答案:position、display、float、width、height、margin、padding、top、left、right、bottom,欢迎继续补充。多人协作时,怎么避免样式被覆盖
答案:团队之间制定良好的CSS规范,可以参考:web前端代码规范--CSS篇