CSS高级特性③(文字溢出省略，常见布局技巧，CSS初始化)
原创
©著作权归作者所有：来自51CTO博客作者十八岁讨厌编程的原创作品，请联系作者获取转载授权，否则将追究法律责任
文章目录
溢出的文字省略号显示
分为两种情况：
- 单行文本溢出显示省略号
- 多行文本溢出显示省略号
单行文本溢出显示省略号
三个步骤：
- 强制一行内显示文本
- 超出的部分隐藏
- 文字用省略号替代超出的部分
代码实现：
/*1. 先强制一行内显示文本*/
white-space: nowrap; （ 默认 normal 自动换行）
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;
多行文本溢出显示省略号
多行文本溢出显示省略号，有较大兼容性问题， 适合于webKit浏览器或移动端（移动端大部分是webkit内核）
代码实现：
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
注意要严格控制盒子的大小，否则会出现在倒数第二行末尾出现省略号，最后一行依旧存在
常见布局技巧
巧妙利用一个技术更快更好的布局：
- margin负值的运用
- 文字围绕浮动元素
- 行内块的巧妙运用
- CSS三角强化
margin负值的运用
情况一：在用浮动做一排紧挨着的盒子的时候，相邻盒子的边框会挨着，这会将边框的宽度增加，如果我们想让其保持一个边框的宽度，就可以使用margin负值
例如：
ul li {
position: relative;
float: left;
list-style: none;
width: 150px;
height: 200px;
border: 1px solid red;
margin-left: -1px;
}有人可能会认为每一个盒子都向左移动，相当于还是没变。实际上并不是这样，浏览器在进行渲染的时候，先li–>渲染CSS样式–>li -->CSS样式…
衍生情况二：这个时候如果给边框进行上色，会发现每个盒子总有一边的边框颜色不同。
这是因为那个边框被相邻盒子给压住了，此时有两种解决办法：
- 如果这个盒子没有定位，则为其添加相对定位(保留位置)
- 如果这个盒子有定位，则为其设定z-index，提高其层级。
例如：
ul li:hover {
/*1. 如果盒子没有定位，则鼠标经过添加相对定位即可*/
position: relative;
border: 1px solid blue;
}
ul li:hover {
/* 2.如果li都有定位，则利用 z-index提高层级 */
z-index: 1;
border: 1px solid blue;
}文字环绕浮动效果
前面提到过浮动元素是不会压住文字的。
利用这一特性我们可以快速地制作出文字环绕浮动效果。
例如：
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 70px;
background-color: pink;
margin: 0 auto;
padding: 5px;
}
.pic {
float: left;
width: 120px;
height: 60px;
margin-right: 5px;
}
.pic img {
width: 100%;
}
</style>
</head>
<body>
<div class="box">
<div class="pic">
<img src="images/img.png" alt="">
</div>
<p>【集锦】热身赛-巴西0-1秘鲁 内马尔替补两人血染赛场</p>
</div>
行内块的应用
行内块用来做这些翻页标签非常的适合
这里利用了行内块元素的两个特点：
- 行内块元素之间有空隙
- 给父级添加 text-align:center; 其中所有的行内块元素会水平居中
在制作如图例子时，如果盒子的大小不能够容纳下其中的文字，那么文字会溢出来，此时就应该重新定义那些装有文字的盒子的大小。
CSS三角强化
在CSS中我们的盒子一般都是矩形，也可以做出来圆角的(圆形也可以)，但是这种梯形的是怎么做出来的呢？
梯形的盒子我们可以看成是矩形和三角形拼接而成，矩形好说，所以这就把问题转化成了如何做出一个三角形的盒子(前面我们说过等腰直角三角形的，此处则需要直角三角形的)。
首先第一步：将下边框的宽度设为0
变为
第二步：将上边框的宽度进行提升
变为
第三步：将左边框的宽度设为0
变为
第四步：将上边框设为透明
变为
代码实现：
width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 22px 8px 0 0;
京东砍价代码实现：
.price {
width: 160px;
height: 24px;
line-height: 24px;
border: 1px solid red;
margin: 0 auto;
}
.miaosha {
position: relative;
float: left;
width: 90px;
height: 100%;
background-color:red;
text-align: center;
color: #fff;
font-weight: 700;
margin-right: 8px;
}
.miaosha i {
position: absolute;
right: 0;
top: 0;
width: 0;
height: 0;
border-color: transparent #fff transparent transparent;
border-style: solid;
border-width: 24px 10px 0 0;
}
.origin {
font-size: 12px;
color: gray;
text-decoration: line-through;
}
</style>
</head>
<body>
<div class="price">
<span class="miaosha">
¥1650
<i></i>
</span>
<span class="origin">¥5650</span>
</div>
</body>CSS初始化
不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS 初始化
简单理解： CSS初始化是指重设浏览器的样式。 (也称为CSS reset）
每个网页都必须首先进行 CSS初始化。
这里我们以 京东CSS初始化代码为例。
/* 把我们所有标签的内外边距清零 */
* {
margin: 0;
padding: 0
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
font-style: normal
}
/* 去掉li 的小圆点 */
li {
list-style: none
}
img {
/* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
border: 0;
/* 取消图片底侧有空白缝隙的问题 */
vertical-align: middle
}
button {
/* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
cursor: pointer
}
a {
color: #666;
text-decoration: none
}
a:hover {
color: #c81623
}
button,
input {
/* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}
body {
/* CSS3 抗锯齿形 让文字显示的更加清晰 */
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
color: #666
}
.hide,
.none {
display: none
}
/* 清除浮动 */
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}
.clearfix {
*zoom: 1
}
Unicode编码字体：
把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。
比如：
黑体 \9ED1\4F53
宋体 \5B8B\4F53
微软雅黑 \5FAE\8F6F\96C5\9ED1
