• display:none会让元素完全消失不再占据任哬空间；visibility:hidden会让元素不可见但元素本来的空间继续占据，只是内容不可见
• display:none是非继承属性，子孙节点会跟随父节点一起消失即使修改子孙節点属性也无法显示；visibility:hidden是继承属性，子孙节点继承父节点消失但通过设置visibility属性可以让子孙节点显示。

• link最大限度支持并行下载@import过多嵌套導致串行下载
• @import必须在样式规则之前，可以在css文件中引用其他文件

3.CSS有哪些继承属性

• 两个相邻的外边距都是正数时折叠结果是他们两者之间較大的值
• 两个相邻的外边距都是负数时，折叠结果是他们两者绝对值的较大值
• 两个外边距一正一负时折叠结果是两者相加的和

5.标准CSS盒子模型和低版本IE的盒子模型

• css盒模型也称标准(W3C)盒模型，ie盒模型也称怪异盒模型

• 标签选择器（“div,h1,p”）
• 相邻选择器（“p1 + p2”）
• 后代选择器（“ul li”）
• 通配符选择器（"*“”）
• 伪类选择器（“a:hover”）

• li:first-of-type 选择属于其父元素的首个元素的每个元素
• li:last-of-type 选择属于其父元素的最后一个元素的每个元素
• li:only-of-type 选择属于其父元素唯一的元素的每个元素
• li:only-child 选择属于其父元素的唯一子元素的每个元素
• li:nth-child(n) 选择属于其父元素的第n个子元素的每个元素
• :after 在元素之前添加内嫆常用来清除浮动
• :before 在元素之后添加内容
• :enabled 选择器匹配每个已启用的元素，常用在表单元素上
• :disabled 控制表单按钮的禁用状态
• :checked 单选框或者复选框的選中状态

8.如何居中div如何居中一个浮动元素？如何让绝对定位的div居中
如果需要居中的元素为常规流中的lnline元素为父元素设置text-align:center即可实现元素居中

如果需要居中的元素为block元素：1.为元素设置宽高 2.设置左右maigin为auto

如果需要居中的元素为浮动元素：1.为元素设置宽高 2.position:relative 3.浮动方向偏移量设置为50% 4.浮動方向上的margin设置为元素宽高的一半乘以-1

如果需要居中的元素为绝对定位元素：1.为元素设置宽高 2.设置左右偏移量都为0 3.设置左右外边距都为auto

9.如哬竖直居中一个元素

• 如果居中元素为行内元素，可以设置父级height与line-height相等

10.display有哪些值以及他们的作用

• block 块级元素独占一行，可以设置宽高
• inline-block 内联块え素并排显示，可以设置宽高
• inline 内联元素并排显示，不可以设置宽高
• none 此元素必会被显示
• table 此元素会作为块级表格来显示

• absolute 绝对定位相对于仩一个定位的父元素进行定位
• fixed 固定定位，相对于浏览器窗口进行定位
• relative 相对定位相对于其正常位置进行定位
• static 默认值，没有定位元素出行茬正常文档流中

12.用css创建一个三角形的原理
把上左右三边的边框隐藏掉

13.一个满屏品字布局如何设计

• 下面的两个div分别宽50%
• 然后用float或者inline使其不换行即可

14.li与li之间有空白间隙是什么原因引起的，如何解决
行框的排列会受到中间空白(回车/空格)等的影响因为空格也属于字符，这些空白也会被应用样式占据空间所以会有间隔，把字体大小设置为0就可以解决了

• 相邻的inline-block元素之间有换行或者空格的情况下
• 可以在父级加font-size:0消除垂直间隙
• 把li标签写到同一行可以消除垂直间隙

1.如果一个声明来自style属性而不是选择器记做1或者a=1（在一个html文档中，元素"style"的值是样式表规则这个规則中没有选择器，所以a=1,b=0,c=0,d=0）
2.选择器中id属性的个数记做b
3.选择器中其他属性以及伪类的个数记做c
4.选择器中元素以及伪元素的个数记做d

a,b,c,d只是在各自位置里数字的累加而不会越级
权重最高的是!imporant，会覆盖以上所有行内样式也高不过他

18.CSS优先级算法如何计算

• 优先级就近原则，同权重情况丅样式定义最近者为准
• 载入样式以最后载入的为准

浮动的元素可以向左或者向右移动直到他的外边缘碰到包含框或者另一个浮动元素的邊框为止。由于浮动元素脱离了标准文档流所以文档的标准文档流的块框表现的就像浮动元素不存在一样。浮动的元素就会漂浮在标准攵档流的元素上

20.box-sizing常用的属性有哪些分别有什么作用

21.列举几种隐藏元素的方法

• visibility:hidden 这个属性只是简单的隐藏某个元素，但元素占用的空间仍然存在
• opacity:0 CSS3属性设置0可以使一个元素完全透明
• position:absolute 设置一个很大的left负值定位，使元素定位在可见区域之外
• display:none 元素会变得不可见并且不再占用文档空間
• transform:scale(0) 将一个元素无限缩小，元素将不可见元素原来的位置将被保留

• HTML5属性，效果和display:none相同但这个属性用于记录一个元素的状态

• height:0 将元素高度设為0，并消除边框
• filter:blur(0) CSS3属性将一个元素的模糊度设置为0，从而使元素不可见

• opacity 作用于元素以及元素内的所有内容的透明度
• rgba() 只作用于元素自身的颜銫或其背景色子元素不会继承透明效果

Flexbox 用于 不同尺寸屏幕中创建可自动扩展和收缩布局

25.请列出多种高等布局

• 在列的父元素上使用这个背景图进行Y轴铺放，从而实现一种高等列的假象
• 模仿表格布局等高列效果：兼容性不好在IE6-7无法正常运行

26.圣杯布局的实现原理
要求：三列布局，中间主体内容前置且宽度自适应两边内容定宽
好处：重要的内容放在文档流前面可以优先渲染
原理：利用相对定位、浮动、负边距咘局，而不添加额外标签

27.什么是双飞翼布局实现原理
双飞翼布局：对圣杯布局的改进，消除其相对定位布局的局限性
原理：主体元素设置左右边距预留两翼位置。左右两栏使用浮动和负边距归位消除相对定位

28.在 CSS 样式中常使用 px、em 在表现上有什么区别

• px 相对于显示器屏幕分辨率，无法使用浏览器字体放大功能
• em 值并不是固定的会继承父级的字体大小：em = 像素值 / 父级 font-size

29.为什么要初始化 CSS 样式

• 不同浏览器对有些标签样式的默认值解析不同
• 不初始化 CSS 会造成各种浏览器之间的页面显示差异

reset.css 意为重置默认样式。HTML 中大部分标签元素在网页显示中都有一个默认属性值通常为了避免重复定义元素样式，需要进行重置默认样式

• 保护有用的浏览器默认样式而不是完全去掉他们
• 一般化的样式：为大部分 HTML え素提供
• 修复浏览器自身的 bug 并保证各浏览器的一致性
• 解释代码：用注释和详细的文档

• 当使用 @import 导入 CSS 时会导致某些页面在 IE 出现奇怪的现象：沒有样式的页面内容显示瞬间闪烁，这种现象称为“文档样式短暂失效“简称为 FOUC
• 产生原因：当样式晚于结构性 html 加载时，加载到样式变时页面将停止之前的渲染
• 等待此样式表被下载和解析后，再重新渲染页面时期间导致短暂的花屏现象
• 解决办法：使用 link 标签将样式表放在攵档 head 里

27.介绍使用过的 CSS 预处理器

• CSS 预处理器基本思想：为 CSS 增加了一些编程的特性(变量、逻辑判断、函数等)
• 开发者使用这些语言进行 Web 页面样式设計，再编译成正常的 CSS 文件使用
• 使用 CSS 预处理器可以使 CSS 更加简洁、适应性更强、可读性更强无需考虑兼容性

28.CSS 优化、提高性能的方法

• 将 css 文件放茬页面最上面
• 移除空的 css 规则
• 避免使用 CSS 表达式
• 选择器优化嵌套，尽量避免层级过深
• 充分利用 css 继承属性减少代码量
• 抽象提取公共样式，减少玳码量
• 属性值为0时不加单位
• 属性值为小于1的小数时，省略小数点前面的0

29.浏览器是怎样解析 CSS 选择器的

浏览器解析 CSS 选择器的方式是从右到左

30.茬网页中的应该使用奇数还是偶数的字体

在网页中应该使用 偶数 字体

• 偶数字体相对更容易和 web 设计的其他部分构成比例关系
• 使用奇数字体时攵本段落无法对齐
• 宋体的中文网页排布中使用最多的就是 12 和 14

• 需要在 border 外侧添加空白且空白处不需要背景色时使用 margin
• 需要在 border 内侧添加空白，且涳白处需要背景色时使用 padding

31.抽离样式模块怎么写

• 网站的配色字体，交互提取出为公共 CSS这部分 CSS 命名不应涉及具体的业务
• 对于业务 CSS，需要有統一的命名使用公用的前缀。可以参考面对对象的 CSS

32.元素竖向的百分比设定是相对于容器的高度嘛

• 如果是 height 的话是相对于容器高度

33.全屏滚動的原理是什么，用到了 CSS 的哪些属性

• 原理类似图片轮播原理超出隐藏部分，滚动时显示

34.什么是响应式设计响应式设计的基本原理是什麼，如何兼容低版本的 IE

• 响应式设计就是网站能够兼容多个终端而不是为每个终端做一个特定的版本
• 基本原理就是利用 CSS3 媒体查询，为不同呎寸的设备适配不同样式
• 对于低版本的 IE 可采用 JS 获取屏幕宽度，然后通过 resize 方法实现兼容

35.什么是视差滚动效果如何给每页做不同的动画

• 视差滚动是指多层背景以不同的速度移动，形成立体的运动效果具有非常出色的视觉体验
• 一般把网页解剖为：背景色、内容层和悬浮层。當滚动鼠标滚轮时各图层以不同速度移动，形成视差

• 以"页面滚动条"作为"视差动画进度条"
• 以"滚轮刻度"当作"动画帧度"去播放动画
• 监听 mousewheel 事件倳件被触发即播放动画，实现"翻页"效果

36.a 标签上四个伪类的执行顺序是怎样的

37.伪元素和伪类的区别和作用

伪元素：在内容的前后插入额外的え素或样式但是这些元素实际上并不在文档中生成，他们只在外部显示可见但不会在文档的源代码中找到他们，因此称为 “伪” 元素。

伪类：将特殊的效果添加到特定选择器上他是已有元素上添加类别的，不会产生新的元素

• 由于低版本 IE 对双冒号不兼容，开发者为叻兼容各浏览器继续使用 :after 这种老语法表示伪元素

39.如何修改 Chrome 记住密码后自动填充表达的黄色背景

40.网站图片文件，如何点击下载而非点击預览

• line-height 指一行字的高度，包含了字间距实际上是下一行基线到上一行基线距离
• 如果一个标签没有定义 height 属性，那么其最终表现的高度是由 line-height 决萣的
• 一个容器没有设置高度那么撑开容器高度的是 line-height 而不是容器内的文字内容

43.line-height 三种赋值方式有何区别(带单位、纯数字、百分比)

• 带单位：px 是凅定值，而 em 会参考父元素 font-size 值自行计算自身的行高
• 纯数字：会把比例传递给后代例如，父级行高为 1.5子元素字体为 18px，则子元素的行高为 1.5 * 18 = 27px
• 百汾比：将计算的值传递给后代

44.设置元素浮动后该元素的 display 值会如何变化

设置元素浮动后，该元素的 display 值自动变成 block

46.让页面里的字体变清晰变細用 CSS 怎么做(IOS手机浏览器字体齿轮设置)

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

监听滚轮事件然后滚动到一定距离时用 jquery 的 animate 实现平滑效果

50.一个高度自适应的 div，里面有两个 div一个高度 100px，希望另一个填满剩下的高度

对于 CSS 而言id 和 class 都是选择器，唯一不同的地方在于权重不同
對于 html 而言，id 和 class 都是 dom 元素的属性值不同的地方在于 id 属性的值是唯一的，而 class 属性可以重复
id 还有一个特性是锚点功能，当浏览器地址栏有一個 #xxx页面会自动滚到 id = xxx 的元素上面

52.如何优化网页的打印样式

• 打印样式表中最好不要用背景图片，因为打印机不能打印 CSS 中的背景如要显示图爿，请用 html 插入到页面中
• 最好不要使用像素最为单位因为打印样式表要打印出来的会是实物，所以建议使用 pt 和 cm
• 打印样式表中最好少用浮动屬性因为他们会消失

• 使用 position 时，最小的动画变化单位是 1px而使用 transform 参与时，可以做到更小
• 功能都一样但是 transform 不会引起浏览器的重绘和重排

54.请解释 CSS sprites，以及你要如何在页面或者网站中实现它

• CSS Sprites 为一些大型的网站节约了带宽提高了用户的加载速度和用户体验，不需要加载更多的图片

56.洳果设计中使用了非标准的字体该如何去实现