text-align: center 的作用,作用在什么元素上, 能让什么元素水平居中
text-align: center ; 单行文本水平居中
作用在块级元素中的行内元素上,能让块级元素的行内子元素居中。
IE盒模型 和 W3C标准盒模型有什么区别
IE盒模型 width = 内容宽+padding+border
W3C标准盒模型 width = 内容宽
*{box-sizing: border-box; } 的作用
border-box :是指IE盒模型
设置为当前的盒模型为IE盒模型,相对于标准盒模型,ie盒子的宽度 是元素的整个宽度,不用计算,利于排版和计算方便 。
line-height: 2 和 line-height: 200% 的区别
line-height: 2 行高是文本自身字体大小的2倍
line-height: 200% 行高为父元素的字体大小的200%的高度 ,200%=2
继承区分:
line-height: 2 继承的是父元素中设置的line-height: 2
line-height: 200% 继承了父元素的line-height: 200% 计算后的最终值,而不是
200% 。 最终值= font-size * 200%
inline-block 的特性
如何去除缝隙
高度不一样的iline-height 元素如何顶端对齐
(1)inline-block
既有行内元素特性+ 块级元素特性
在同一行上并列排序
可以设置元素的width、height padding margin
(2)产生原因:有缝隙是因为浏览器认为元素与元素之间存在空白字符,如空格 回车等,就默认元素间有缝隙
解决方案:
方法1 :可以直接不留空白,前一个元素的标签紧挨着后一个标签。
方法2 : 将父元素的字体设置为font-size: 0;
行内元素再单独设置字体大小即可。
(3) 顶端对齐 vertical-align: top;
其他属性值:middle (居中对齐)
bottom(底端对齐)
CSS sprite是什么
css精灵图(雪碧图)
用一张png的图片放置所有的小图标,使用这张图作为背景图,设置backgrond-position:来显示不同的图标。
这样减少图标想服务器的请求次数,提高加载速度。
让一个元素看不见有几种方式。
有什么区别
opacity: 0; 透明,整体透明,但还占据位置
visibility: hidden; 隐藏,看不见,但有位置,与opacity 类似。
display: none; 元素消失,不占据位置
background-color:rgba(0,0,0,0) 背景色透明,但是其子元素不透明
代码1
css sprite https://jsbin.com/pidavavemu/edit?html,css,output