任务九 CSS常见样式二

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

  • text-align:center作用在行内元素上,让行内元素中的字体水平居中。

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

  • w3c盒模型设置其width和height只对模型中的content启作用。
  • IE盒模型设置其width和height对模型中的border,padding和content起作用。

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

  • 让盒模型为IE盒模型。

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

  • line-height: 2 :行高为本身字体的2倍。
  • line-height: 200%: 行高度父容器字体的2倍。
  • height = line-height :垂直居中单行文本

继承问题:

  • line-height:2: 父元素会直接继承给子元素,子元素根据自己的font-size再去计算子元素自己的line-height。
  • line-height:200% : 父元素是计算好了line-height值,然后把这个计算值给子元素继承,子元素继承拿到的就是最终的值了。此时子元素设置font-size就对其line-height无影响了。

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

** 特性 :** 既有行内元素的特点又有块级元素的特点。不占据一整行, width由内容宽度决定。可以设置height,width,padding和margin。

** 去除缝隙 **

  1. 将两个行内元素之间的空格出去。
  2. 或设置两行内元素之间的字符大小为零

div{
font-size: 0px;
}

span{
font-size: 16px;
}

如何顶端对齐: 
E{
border: 1px solid;
display: inline-block;
** vertical-align:top;**
}

6. CSS sprite 是什么?

  • 指将不同的图片/图标合并在一张图上。
  • 使用CSS Sprite 可以减少网络请求,提高网页加载性能。

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

  • opacity: 0 ; 透明度为0,整体
  • visibility: hidden ; 和opacity:0 类似
  • display:none; 消失,不占用位置
  • background-color: rgba(0,0,0,0.2) 只是背景色透明
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1. text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中 (1)作用:CSS...
    黄同学2019阅读 404评论 0 0
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,150评论 1 92
  • 深入理解傅里叶变换Mar 12, 2017 这原本是我在知乎上对傅立叶变换、拉普拉斯变换、Z变换的联系?为什么要进...
    价值趋势技术派阅读 5,938评论 2 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 2,119评论 0 2
  • 我的身边从来不乏优秀的女孩子,她们不尽相同,她们在不同的地方都闪耀着自己的光芒,但是他们身上都拥有一些共同的优秀品...
    灵书小巷阅读 322评论 0 7

友情链接更多精彩内容