CSS常见样式【下】

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

text-align:center规定行内元素相对于父元素居中对齐,样式写在父元素上,作用在行内元素上。

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


IE盒模型的宽度和高度=内边距(margin)+边框(border)+内边距(padding)+内容(content)
W3C标准盒模型的宽高度就是内容(content)的宽高度

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

指定使用IE盒模型,通常一个块级元素实际所占宽高度=外边距(margin)+ 边框宽度(border-width)/ 边框高度(border-height) + 内边距(padding)+ 高度(height) / 宽度(width),如果设置了border-box,实际所占宽高度 = 设置的高度(height)/ 设置的宽度(width)+ 外边距(margin)

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

line-height: 2表示占据的行高是本身文字高度的2倍
line-height: 200% 表示占据的高度是父容器(父元素)文字高度的2倍
line-height属性为数字时,根据子元素字体大小动态计算出行高值让子元素继承;当属性为百分数时,根据父元素的字体大小先计算出行高值然后在让子元素继承。

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

inline-block的特性:即呈现inline特性(不占据一整行,宽度由内容宽度决定),又呈现block特性(可设置宽高,内外边距)
去除缝隙:(1)前后两个标签中间的空隙去掉,显示成一行;
(2)用div包裹,设置font-size: 0;在需要设置字体的地方设置需要的字体大小
高度不一样的inline-block顶端对齐设置vertical-align: top;

6.CSS sprite是什么?

CSS 雪碧图或精灵图,将不同的图片/图标合并在一张图上。
使用CSS sprite可以减少网络请求,提高网页加载性能。

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

display: none; 消失,不占用位置
visibility: hidden; 和opacity: 0;类似
opacity: 0; 透明度为0,整体
background-color: rgba(0,0,0,0) 只是背景色透明

代码实现

代码1
代码2

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中 text-align样式...
    阿鲁提尔阅读 285评论 0 1
  • text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中 text-align: ...
    饥人谷_二釉阅读 252评论 0 0
  • text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中 text-align作为...
    LINPENGISTHEONE阅读 194评论 0 0
  • #21天写作计划#—5— —Day13— 越来越觉得:人生,除了生死,都是小事儿。真的是这样,在生死面前,没有谁不...
    喜悦Iris阅读 776评论 0 0