一周一章前端书·第23周：《HTML与CSS进阶教程》S02E1
2018-02-21 本文已影响24人
梁同学de自言自语
第13章：CSS实战技巧
13.1 水平居中
13.1.1 非块元素的水平居中
- 文字、
inline行内元素和inline-*复合行内元素用text-align:center来实现水平居中。复合行内元素包括：inline-block、inline-table和inline-flex等元素。
text-align:center;
13.1.2 块元素的水平居中
-
block块元素通过margin-left:auto;margin-right:auto;实现水平居中
margin:0 auto;
13.2 垂直居中
- 单行文字垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
height: 40px;
line-height: 40px;
border: 1px dashed gray;
}
</style>
</head>
<body>
<div>单行文字垂直居中</div>
</body>
</html>
- 多行文字的垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
display: table-cell;
vertical-align: middle;
height: 300px;
width: 500px;
border: 1px dashed gray;
}
span{
display: inline-block;
}
</style>
</head>
<body>
<div>
<span>
多行文字的垂直居中
名人实名举报信发布后被自行删除
中国网络直播用户规模达4.22亿 年增长率达22.6％
美国否决中资收购芝加哥证券交易所
中戏“艺考”今日拉开序幕 易烊千玺现身考场
</span>
</div>
</body>
</html>
-
inline、inline-block和block块元素都可以通过position的方式实现垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.wrapper{
position: relative;
height: 200px;
width: 400px;
border: 1px dashed gray;
}
.content{
position: absolute;
top: 50%;
left: 50%;
margin-top: -25px;/*取自身height的一半*/
margin-left: -50px;/*取自身width的一半*/
width: 100px;
height: 50px;
background-color: gray;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content"></div>
</div>
</body>
</html>
-
inline-block元素还可以通过table-cell结合vertical-middle来实现垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.wrapper{
display: table-cell;
vertical-align: middle;
text-align: center;
width: 440px;
height: 260px;
border:1px dashed gray;
}
img{
vertical-align: middle;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="wrapper">
<img src="../img/weibo.png" alt="weibo" />
</div>
</body>
</html>
13.3 CSS Sprite
- CSS Sprite技术是将零散的图片合并成一张大的背景图，然后利用
background-position属性进行背景定位从而显示相应的小背景图。 - CSS Sprite的工具：
- CSS Sprite Generator可以上传一个图片文件夹的压缩包，然后工具会自动生成雪碧图；
- Sprite Cow可以选中雪碧图中某个图标，自动生成CSS代码；
- 虽然CSS Sprite很方便，但也存在明显的缺点，就是开发和维护比较困难。所以我们在使用CSS Sprite技术的时候，1. 应该在开发后期使用，如果在开发前期就使用，可能需要频繁的变换图标；2. 应该有条理地组织“雪碧图”，按照类型、风格、大小等分门别类放好图标；3. 控制好雪碧图的大小，如果图片超过200KB，会耗费更多的传输时间，则应该分隔成多个雪碧图
13.4 Icon Font图标
使用IonFont图标的四个步骤：
