入门任务9--css常见样式2
2017-11-02 本文已影响11人
_小黑
-
text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
定义行内内容相对它的块元素容器居中对齐，作用在块级元素上。让行内元素水平居中。 -
IE 盒模型和W3C盒模型有什么区别?
IE盒模型的width包括content、padding、border，而W3c盒模型的width就是内容本身的宽度，如图
image.png
-
*{ box-sizing: border-box;}的作用是什么？
将默认的w3c盒模型转换成ie盒模型
- line-height: 2和line-height: 200%有什么区别?
都表示行高是字体大小的2倍，但是它们是有区别的。
当它们写在父容器中时，子元素的字体大小不一样的时候，区别就体现出来了
line-height: 2 写在父容器中，那么子元素的行高都是自身高度的2倍，是相对大小。子元素的字体大小不同，行高也会不同。
line-height: 200% 写在父容器中，那么浏览器会立刻计算出行高的具体值，假如父容器的默认字体大小是16px，那么计算得到的行高就是2×16px=32px，子元素的行高都会继承这个32px，是固定大小。
子元素的字体大小不同，行高都是固定某个值。
5.inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?
inline-block元素可以设置宽高和上下左右的padding和margin，inline-block元素并排排列，inline-block元素默认宽高为内容宽高
去处缝隙的方法：
标签连写
image.png
父元素字体设置font-size：0；然后在inline-block元素上再重新设置字体
image.png
使用vertical-align：top 命令让高度不一样的inline-block高度对齐
image.png
- CSS sprite 是什么?
css sprite 是精灵图，是将多个小图标整合到一张图上的文件
-
让一个元素"看不见"有几种方式？有什么区别?
opacity: 0：元素透明度为0，还占有位置；
visibility: hidden：与opacity: 0类似；
display: none：元素消失，不占位置；
background-color: rgba(0,0,0,0.2)：背景色透明。
