CSS常见样式2

1.text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中?

text-align:center作用在行内元素上能让作用这行里的文本和图片水平居中。

2.IE 盒模型和W3C盒模型有什么区别?

  • IE盒模型的width和height的值等于相对应的content值+padding值2+border值2;
  • W3C盒模型的width和height的值就等于content值;

![1GU]134XM$6N8(GVJC{B01G.png](http://upload-images.jianshu.io/upload_images/4761706-4feda40be2e1bb31.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

3.*{ box-sizing: border-box;}的作用是什么?

作用为使用IE盒模型来计算相应的元素的宽和高。

4.line-height: 2和line-height: 200%有什么区别?

  • line-height: 2表示行高为本身字体高度的两倍;
  • line-height: 200%表示设置行高为父元素字体高度的200%高度。

5.inline-block有什么特性?如何去除缝隙?高度不一样的inline-block元素如何顶端对齐?

1.inline-block 既呈现 Inline 特性(不占据一整行,宽度由内容宽度决定)又呈现block特性(可设置宽度高,内外边距)。

  • 元素间留白间距出现的原因就是标签段之间的空格,因此,去掉HTML中的空格,自然间距就木有了。
  • 使用font-size:0。
    更多方法

3.设置 vertical-align: top;

6.CSS sprite 是什么?

CSS sprite叫做CSS精灵图,让多个的图片放在一个大的图片上,目的是减少向服务器的请求数量,提高加载速度。

7.让一个元素"看不见"有几种方式?有什么区别?

方式 区别
opacity:0 透明度为0,但还占据相应的位置
visibility: hidden 即使不可见的元素也会占据页面上的空间
display:none 让元素消失,不占据位置
background-color:rgba(0,0,0,0.1) 通过背景色和透明度来让元素"看不到"

代码

  1. 使用 CSSsrpite 实现如下效果【效果范例82】. ps: 图片下载地址55

作业1

  1. 在iconfont上搜索"饥人谷"55, 使用字体图标实现代码1中的效果

注意:由于 jsbin 不支持上传文件,所以你 不应该 在 jsbin 上使用本地链接来制作 iconfont!你应该使用 阿里的 CDN 链接!!!

作业2

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中 1、当作用于块级元素时,...
    我要认真学前端阅读 651评论 0 1
  • 1.text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中? text-alig...
    草鞋弟阅读 277评论 0 0
  • 1. text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中 text-alig...
    billa_8f6b阅读 417评论 0 0
  • 《星球大战:原力觉醒》即将上映,虽然本人不是星战迷,但对星战里几个牛X人物还是认识的。比如说下面这几位: 上图左边...
    就是玩具Toysradio阅读 2,563评论 3 3