CSS常见属性二

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

text-align CSS属性定义行内内容(例如文字)如何相对它的块父元素对齐。text-align 并不控制块元素自己的对齐,只控制它的行内内容的对齐。center就是使行内元素水平居中,作用在块级元素上,可以让文本、图片以及其他行内元素在其父元素中水平居中。

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

W3C盒模型的width和height不包含padding、border,IE盒模型width包括content尺寸+padding+border

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

box-sizing 属性可以被用来调整这些表现:
a)content-box是默认值,标准盒子模型。 width与 height 只包括内容的宽和高, 不包括边框(border),内边距(padding),外边距(margin)。注意: 内边距, 边框 & 外边距 都在这个盒子的外部。 比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在浏览器中的渲染的实际宽度将是370px;
b)border-box width和height属性包括内容,内边距和边框,但不包括外边距。
width = border + padding + 内容的 width,
height = border + padding + 内容的 height。

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

line-height:2;行高是2倍的文字大小,均以相应的字体为基准。
line-htight:200%;行高是2倍的文字大小,文字大小是指父元素中设定的字体大小。
line-height后面的数值可以带单位也可以不带单位,但是推荐使用不带单位的,这样在继承时不会出现异常。

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

a)特性:inline-block既包含了块级元素的特性,又包含了行内元素的特性,所以我们可以使得多个元素共同占据一行,可以设置宽度和高度,可以设置外边距和内边距。
b)去除缝隙bug:可以将其父元素的字体大小设置为0,然后重新对本元素的字体大小进行设置,中间的空格大小变为0,消除间隙;可以去除代码中的空格和换行,让元素紧贴在一起可以消除空格(或者注释掉空格)。
c)让其顶端对齐的方法可以设置属性vertiacl-align:top属性来设置。

6、CSS sprite 是什么?

CSS Sprites是一种网页图片应用处理方式,就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位。
优点:
1.减少网页的http请求,提高性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因;
2.减少图片的字节:多张图片合并成1张图片的字节小于多张图片的字节总和;
缺点:
1.图片合成比较麻烦;
2.背景设置时,需要得到每一个背景单元的精确位置;
3.维护合成图片时,最好只是往下加图片,而不要更改已有图片。

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

opacity:0 透明度为0,占位置,可点击
visibility:hidden 占位置,不可点击
display:none;消失,不占用位置
background-color:rgba(0,0,0,0.0)只是背景色透明度改变

8、实现效果

Sprites效果
iconfont效果

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,868评论 1 92
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,836评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,357评论 0 11
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 4,706评论 0 26
  • 尼克:“盖茨比死后,纽约成了我的梦魇,这个让我魂牵梦绕的城市,现在却让我如此厌恶”
    于波PPoYue阅读 303评论 0 0