CSS常见样式2

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

让内联元素水平居中。作用于内联元素的父级元素。

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

当对一个块级元素定义宽度(width)、高度(height)时,在IE盒模型中,这个块级元素的宽度高度为content尺寸+padding+border;在W3C盒模型中,就只是content尺寸大小。

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

对当前页面所有元素使用IE盒模型。另外的,"content-box"为W3C盒模型。

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

line-height: 2 表示设置当前元素内的字体行间距为自身字体大小的两倍
line-height: 200% 表示设置当前元素内的字体行间距为相对于其父元素的字体行间距的两倍

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

当一个元素设置display=inline-block时,这个元素就同时具有块级元素和行内元素的性质。比如当一个行内元素设置了inline-block时,这时可以设置宽高,并且只占自身宽度空间的大小。

去除缝隙:

  • 去掉两个并列元素中间的空格或者回车
  • 设置其父元素的字体大小为0

顶端对齐:
在其父级元素中设置vertical-align: top;

另外的vertical-align:bottom(底部对齐);默认为文字的基线对齐。

CSS sprite 是什么?

CSS 精灵图。将网页中的图片整合为一张大图,减少对服务器的请求,便于浏览器更快的加载。

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

  • opacity: 0; 让整个元素的透明度为0,占空间
  • visibility: hidden; 规定元素不可见,占空间
  • display: none; 让元素消失,不占空间
  • background-color: transparent;对于背景颜色,使之为透明

代码

实现1

实现2

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,790评论 1 92
  • text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中 1、当作用于块级元素时,...
    我要认真学前端阅读 651评论 0 1
  • 1.text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中? text-alig...
    草鞋弟阅读 276评论 0 0
  • text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中 text-align C...
    Sketch阅读 365评论 0 0
  • text-align text-align CSS 属性定义行内内容,如何相对它的块元素对齐。并不控制快元素自己的...
    nianxiaoge阅读 258评论 0 0