text-align: center 的作用
该属性让父元素中的内容对齐，作用在行内元素上使行内内容水平居中
IE 盒模型和 W3C 盒模型的区别?
ie盒模型.JPG
盒模型.JPG
从上图可以看出，ie 盒模型的 content 部分是包括 padding 和 border 的，而 W3C 盒模型的 content 则不包括这两个部分。
box-sizing 属性
* { box-sizing: border-box; } 表示全局使用 ie 盒模型；
* { box-sizing: content-box; } 则表示全局使用标准盒模型。
line-height: 2 和 line-height: 200% 有什么区别?
line-height: 2 表示行高为当前元素字体大小的两倍；
line-height: 200% 则表示行高为当前元素的上级元素的字体大小的两倍。
inline-block 的特性，去除 inline-block 元素间的缝隙以及高度不一样的 inline-block 元素实现对齐
inline-block 属性的元素既拥有了 block 元素可以设置 width 和 height 的特性，又保持了 inline 元素不换行的特性。
去除 inline-block 元素间的缝隙：
- 通过去除空格的方法可以实现
将两个标签之间连接起来不留空隙
<div class="space">
<a href="#">惆怅</a
><a href="#">淡定</a
><a href="#">热血</a>
</div>
使用 html 注释去除空格
<div class="space">
<a href="##">惆怅</a><!--
--><a href="##">淡定</a><!--
--><a href="##">热血</a>
</div>
- 使用margin负值
- 使用 font-size:0
.space {
font-size: 0;
-webkit-text-size-adjust: none;
}
.space a {
font-size: 12px;
}
- 还可以做如下处理：
<div class="space">
<a href="##">惆怅
<a href="##">淡定
<a href="##">热血</a>
</div>
或者
<div class="space">
<a href="##">惆怅
<a href="##">淡定
<a href="##">热血
</div>
- 使用 letter-spacing 或 word-spacing
.space {
letter-spacing: -3px;
}
.space a {
letter-spacing: 0;
}
或
.space {
word-spacing: -6px;
}
.space a {
word-spacing: 0;
}
高度不一样的 inline-block 元素实现对齐
通过设置 vertical-align 属性可以实现各种对齐：
baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
length
% 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit 规定应该从父元素继承 vertical-align 属性的值。
CSS sprite
CSSSprites 又叫 css 精灵，其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的 “background-image”，“background-repeat”，“background-position” 的组合进行背景定位，background-position 可以用数字精确的定位出背景图片的位置。
优点
- 利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
- CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
- 解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
- 更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。
让一个元素“看不见”的方式
opacity: 0; 透明度为0，整体；
visibility: hidden; 和 opacity: 0; 类似；
display: none; 消失，不占用位置；
background-color: rgba(0，0，0，0.2); 只是背景色透明。
【注】版权归 Lucifer 所有，转载请联系作者。
网友评论