text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中
text-align CSS属性定义行内内容(例如文字)如何相对它的块父元素对齐。text-align 并不控制块元素自己的对齐,只控制它的行内内容的对齐。适用于行内元素。
IE 盒模型和W3C盒模型有什么区别?
区别在于IE中的width是包括padding,而W3C也就是我们平常使用的盒模型不包括,不管padding加多少内容区域的宽度不会改变。
*{ box-sizing: border-box;}的作用是什么?
设置元素的内边距和边框不再会增加它的宽度。
line-height: 2和line-height: 200%有什么区别?
- line-height:2 行高是盒子模型里的content的两倍行高
- line-height:200% 行高是父元素的行高的两倍
inline-block有什么特性?如何去除缝隙?高度不一样的inline-block元素如何顶端对齐?
- inline-block 既呈现 Inline 特性(不占据一整行,宽度由内容宽度决定)又呈现block特性(可设置宽度高,内外边距)
- 去除元素之间的缝隙:使用font-size:0;使用word-spacing;使用letter-spacing;
- 两端对齐使用vertical-align:top;
CSS sprite 是什么?
将不同的图片或者图标合并到一张图片上,减少网络请求,提升网页加载速度和性能。
让一个元素"看不见"有几种方式?有什么区别?
- opacity: 0 ;这意味着将 opacity 设为 0 只能从视觉上隐藏元素。而元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互。
- visibility: hidden;如同 opacity 属性,被隐藏的元素依然会对我们的网页布局起作用。与 opacity 唯一不同的是它不会响应任何用户交互
- display:none; 将 display 设为 none 使用这个属性,被隐藏的元素不占据任何空间。不仅如此,任何对该元素直接打用户交互操作都不可能生效。此外,读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在。任何这个元素的子孙元素也会被同时隐藏。为这个属性添加过渡动画是无效的,它的任何不同状态值之间的切换总是会立即生效。不过请注意,通过 DOM 依然可以访问到这个元素。
- clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);裁剪属性,虽然我们的元素自身不再显示,它也依然占据本该占据的矩形大小,它周围的元素的行为就如同它可见时一样。
- transform scale(0) 隐藏元素
代码题目
- 使用 CSSsrpite 实现如下效果
http://js.jirengu.com/wafacayemo/1/edit - 在iconfont上搜索"饥人谷", 使用字体图标实现代码1中的效果
http://js.jirengu.com/qucegipebi/1/edit