CSS属性2

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

  • text-align:center能将对应的元素居中;
  • 作用在块级元素内的block元素和inline-block;
  • 能让block元素和inline-block元素中的行内元素水平居中。

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

  • IE盒模型:width=content+padding+border, 设置方式:box-sizing: border-box
  • W3C盒模型:width=content, 设置方式:box-sizing: content-box

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

设置所有元素为IE盒模型。

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

  • line-height: 2 意思是将行高设置为本身文字高度的2倍,且继承给子元素的是行高倍数。
  • line-height: 200% 意思是将行高设置为父元素文字高度的2倍,继承给子元素的是行高。

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

  • inline-block既有inline元素的特性(不占一整行,宽度由内容决定),又有block元素的特性(可设置宽高及内外边距)
  • 缝隙是由空白字符造成的,要去掉缝隙可以消除空白字符(书写元素时不换行),或者在设置父元素的字体大小为0。
  • 使用vertial-align: top.

6.CSS sprite 是什么?

CSS sprite 是CSS精灵图,是将多个图片合并为一个图片,然后用background-position方式取用,好处是减少网络请求,减轻服务器负担;缺点是图片大小内容固定不变,添加更改图片时需要重新制作精灵图。

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

  • opacity: 0;透明度为0,元素在页面消失但是依旧占据空间
  • visibility: hidden;和opacity: 0;与opacity类似,依旧占据空间
  • display: none;消失,不占用位置
  • background-color: rgba(0,0,0,0.2);将背景色设置透明背景色

代码

任务1
任务2

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,680评论 1 92
  • display: none; 与 visibility: hidden; 的区别 联系:它们都能让元素不可见 区别...
    纹小艾阅读 5,689评论 0 1
  • text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中 1、当作用于块级元素时,...
    我要认真学前端阅读 3,821评论 0 1
  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 8,378评论 0 11
  • ZCash也称零币,是一种真正匿名的数字货币。与比特币采用类似的发行方式,但它将加密属性与区块链属性结合,加密层让...
    张永胜_永往直前阅读 3,851评论 0 1