CSS

介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

CSS选择符有哪些？哪些属性可以继承？

CSS优先级算法如何计算？

CSS3新增伪类有那些？

如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？

display有哪些值？说明他们的作用

position的值relative和absolute定位原点是？

CSS3有哪些新特性？

用纯CSS创建一个三角形的原理是什么？

经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧？

li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

为什么要初始化CSS样式？

css定义的权重

使用 CSS 预处理器吗？喜欢那个？

CSS优化、提高性能的方法有哪些？

::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用。

如何修改chrome记住密码后自动填充表单的黄色背景？

你对line-height是如何理解的？

如果需要手动写动画，你认为最小时间间隔是多久，为什么？

display:inline-block 什么时候会显示间隙？

overflow: scroll时不能平滑滚动的问题怎么处理？

png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？

什么是Cookie 隔离？（或者说：请求资源的时候不要让它带cookie怎么做）

什么是CSS 预处理器 / 后处理器？

CSS

介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

（1）、有两种， IE 盒子模型、W3C 盒子模型；

（2）、盒模型：内容(content)、填充(padding)、边界(margin)、边框(border)；

（3）、区别： IE的content部分把 border 和 padding计算了进去；

CSS选择符有哪些？哪些属性可以继承？

1、id选择器（ # myid）

2、类选择器（.myclassname）

3、标签选择器（div, h1, p）

4、相邻选择器（h1 + p）

5、子选择器（ul > li）

6、后代选择器（li a）

7、通配符选择器（ * ）

8、属性选择器（a[rel = "external"]）

9、伪类选择器（a:hover, li:nth-child）

可继承的样式： font-size，font-family，color,，ul，li，dl，dd，dt；

不可继承的样式：border，padding，margin width，height；

CSS优先级算法如何计算？

就近原则；
优先级为：!important > id > class > tag；
important 比内联优先级高；

CSS3新增伪类有那些？

举例：

p:first-of-type 选择属于其父元素的首个 元素的每个 元素；
p:last-of-type 选择属于其父元素的最后 元素的每个 元素；
p:only-of-type 选择属于其父元素唯一的 元素的每个 元素；
p:only-child 选择属于其父元素的唯一子元素的每个 元素；
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 元素；
:after 在元素之前添加内容，也可以用来做清除浮动；
:before 在元素之后添加内容；
:enabled
:disabled 控制表单控件的禁用状态；
:checked 单选框或复选框被选中；

如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？

给div设置一个宽度，然后添加margin: 0 auto属性

div {width:200px;margin:0 auto;
}

居中一个浮动元素

// 确定容器的宽高 宽500 高300 的层
// 设置层的外边距
.div {width: 500px;height: 300px;//高度可以不设margin: -150px 0 0 -250px;position: relative;         //相对定位background-color: pink;     //方便看效果left: 50%;top: 50%;
}

让绝对定位的div居中

position: absolute;
width: 1200px;
background: none;
margin: 0 auto;
top: 0;
left: 0;
bottom: 0;
right: 0;

display有哪些值？说明他们的作用

block 像块类型元素一样显示；
none 此元素不会被显示；
inline-block 像行内元素一样显示，但其内容像块类型元素一样显示；
list-item 像块类型元素一样显示，并添加样式列表标记；
table 此元素会作为块级表格来显示；
inherit 规定应该从父元素继承 display 属性的值

position的值relative和absolute定位原点是？

absolute 生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位；

fixed （老IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位；

relative 生成相对定位的元素，相对于其正常位置进行定位；

static 默认值，没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）；

inherit 规定从父元素继承 position 属性的值；

CSS3有哪些新特性？

新增各种CSS选择器（: not(.input)：所有 class 不是“input”的节点）；
圆角（border-radius:8px）；
多列布局（multi-column layout）；
阴影和反射（Shadow\Reflect）；
文字特效（text-shadow、）；
文字渲染（Text-decoration）；
线性渐变（gradient）；
旋转（transform）；
增加了旋转，缩放，定位，倾斜，动画，多背景；
transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:

用纯CSS创建一个三角形的原理是什么？

把上、左、右三条边隐藏掉（颜色设为 transparent）

#demo {width: 0;height: 0;border-width: 20px;border-style: solid;border-color: transparent transparent red transparent;
}

经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧？

png24位的图片在iE6浏览器上出现背景，解决方案是做成png8；

各个浏览器默认的margin和padding不同。解决方案是加一个全局的 {margin: 0; padding: 0;} 来统一；

浮动ie产生的双倍距离 #box{ float: left; width: 10px; margin:0 0 0 100px;}

IE下，获取属性方式不同，解决方法：统一通过getAttribute()获取自定义属性；

IE下,even对象有x,y属性,但是没有pageX,pageY属性; Firefox下,event对象有pageX,pageY属性,但是没有x,y属性；解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数；

Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示；可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决；

超链接访问过后hover样式就不出现了被点击访问过的超链接样式不在具有 hover 和 active 了；解决方法：改变CSS属性的排列顺序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

行框的排列会受到中间空白（回车\空格）等的影响，因为空格也属于字符，这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了；

为什么要初始化CSS样式？

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

淘宝的样式初始化代码：

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0;
}
body, button, input, select, textarea {font:12px/1.5tahoma, arial, \5b8b\4f53;
}
h1, h2, h3, h4, h5, h6 {font-size:100%;
}
address, cite, dfn, em, var { font-style:normal;
}
code, kbd, pre, samp { font-family:couriernew, courier, monospace;
}
small { font-size:12px;
}
ul, ol {list-style:none;
}
a { text-decoration:none;
}
a:hover { text-decoration: underline;
}
sup { vertical-align:text-top;
}
sub { vertical-align:text-bottom;
}
legend { color:#000;
}
fieldset, img { border:0;
}
button, input, select, textarea { font-size:100%;
}
table { border-collapse:collapse; border-spacing:0;
}

css定义的权重

以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值：

/*权重为1*/
div {
}
/*权重为10*/
.class1 {
}
/*权重为100*/
#id1 {
}
/*权重为100+1=101*/
#id1 div {
}
/*权重为10+1=11*/
.class1 div {
}
/*权重为10+10+1=21*/
.class1 .class2 div {
}// 如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现

使用 CSS 预处理器吗？喜欢那个？

stylus(stylus，SASS、LESS没有本质区别，只因为团队前端都是用的SASS)

CSS优化、提高性能的方法有哪些？

压缩

::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用。

？

如何修改chrome记住密码后自动填充表单的黄色背景？

？

你对line-height是如何理解的？

行高

如果需要手动写动画，你认为最小时间间隔是多久，为什么？

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms

display:inline-block 什么时候会显示间隙？

移除空格、使用margin负值、使用font-size: 0、letter-spacing、word-spacing

overflow: scroll时不能平滑滚动的问题怎么处理？

？

png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？

？

什么是Cookie 隔离？（或者说：请求资源的时候不要让它带cookie怎么做）

如果静态文件都放在主域名下，那静态文件请求的时候都带有的cookie的数据提交给server的，非常浪费流量，所以不如隔离开。

因为cookie有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据，这样可以降低请求头的大小，降低请求时间，从而达到降低整体请求延时的目的。

同时这种方式不会将cookie传入Web Server，也减少了Web Server对cookie的处理分析环节，提高了webserver的http请求的解析速度。

什么是CSS 预处理器 / 后处理器？

- 预处理器例如：LESS、Sass、Stylus，用来预编译Sass或less，增强了css代码的复用性，还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。

- 后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。

前端开发知识点解答-CSS-面试相关推荐

前端开发知识点解答-问题-面试问题
问题:HTML&CSS基础:对Web标准的理解.浏览器内核差异.兼容性.hack.CSS基本功:布局.盒子模型.选择器优先级.HTML5.CSS3.Flexbox JavaScript基础:数 ...
前端开发知识点解答-VUE-面试
目录 VUE 1.vue几种常用的指令? 2.v-if和v-show区别? 3.vue常用的修饰符有哪些?分别是做什么的? 4.Vue生命周期是什么?第一次页面加载会触发哪几个钩子? 5.Vue组件子 ...
前端开发知识点解答-JavaScript-面试
JavaScript 介绍js的基本数据类型 Undefined.Null.Boolean.Number.String 介绍js有哪些内置对象? Object 是 JavaScript 中所有对象的父 ...
前端开发知识点解答-HTML-面试
目录 Doctype作用?标准模式与兼容模式各有什么区别? HTML5 为什么只需要写 ? 行内元素有哪些?块级元素有哪些? 空(void)元素有那些? 页面导入样式时,使用link和@import有 ...
Web前端开发精品课HTML CSS JavaScript基础教程CSS部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结第11章 CSS简介 1.HTML是网页的结构,CSS是网页的外观,JavaScript是网页的行为. 2. ...
Web前端开发精品课HTML CSS JavaScript基础教程JavaScript部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结第24章 JavaScript简介 1.HTML是网页的结构,CSS是网页的外观,而JavaScript是网 ...
Web前端开发精品课HTML CSS JavaScript基础教程HTML部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结第1章 HTML简介 1.前端技术简介 (1)从Web1.0到Web2.0,网页制作已经变成前端开发了. ...
达内2016前端开发知识点总结--HTML5--8天
HTML5 day01 第三阶段: AJAX - 8 -- 综合且容易出错 HTML5新特性 - 7 -- 零散神不聚 Bootstrap - 5 -- 玩命儿被单词今日目标: (1)WebSto ...
学前端开发技术，CSS的文本样式属性值
一.如何入门,学习建议在你开始入手学习前,有一些小的建议.根据我自己学习的经验发现,这些建议在现在乃至我以后的岗位生涯里都是有很大帮助的.还有就是开始学习前,建议可以先花几天时间,查找一些如何入门的 ...

前端开发知识点解答-CSS-面试

CSS

介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

CSS选择符有哪些？哪些属性可以继承？

CSS优先级算法如何计算？

CSS3新增伪类有那些？

如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？

display有哪些值？说明他们的作用

position的值relative和absolute定位原点是？

CSS3有哪些新特性？

用纯CSS创建一个三角形的原理是什么？

经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧？

li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

为什么要初始化CSS样式？

css定义的权重

使用 CSS 预处理器吗？喜欢那个？

CSS优化、提高性能的方法有哪些？

::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用。

如何修改chrome记住密码后自动填充表单的黄色背景？

你对line-height是如何理解的？

如果需要手动写动画，你认为最小时间间隔是多久，为什么？

display:inline-block 什么时候会显示间隙？

overflow: scroll时不能平滑滚动的问题怎么处理？

png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？

什么是Cookie 隔离？（或者说：请求资源的时候不要让它带cookie怎么做）

什么是CSS 预处理器 / 后处理器？

前端开发知识点解答-CSS-面试相关推荐

最新文章

热门文章

前端开发知识点解答-CSS-面试

CSS

介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

CSS选择符有哪些？哪些属性可以继承？

CSS优先级算法如何计算？

CSS3新增伪类有那些？

如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？

display有哪些值？说明他们的作用

position的值relative和absolute定位原点是？

CSS3有哪些新特性？

用纯CSS创建一个三角形的原理是什么？

经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？

li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

为什么要初始化CSS样式？

css定义的权重

使用 CSS 预处理器吗？喜欢那个？

CSS优化、提高性能的方法有哪些？

::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。

如何修改chrome记住密码后自动填充表单的黄色背景 ？

你对line-height是如何理解的？

如果需要手动写动画，你认为最小时间间隔是多久，为什么？

display:inline-block 什么时候会显示间隙？

overflow: scroll时不能平滑滚动的问题怎么处理？

png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？

什么是Cookie 隔离？（或者说：请求资源的时候不要让它带cookie怎么做）

什么是CSS 预处理器 / 后处理器？

前端开发知识点解答-CSS-面试相关推荐

最新文章

热门文章

经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧？

::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用。

如何修改chrome记住密码后自动填充表单的黄色背景？