CSS高级特性③(文字溢出省略，常见布局技巧，CSS初始化)

CSS高级特性③(文字溢出省略，常见布局技巧，CSS初始化)

文章目录

​​溢出的文字省略号显示​​

​​单行文本溢出显示省略号​​​​多行文本溢出显示省略号​​

​​常见布局技巧​​

​​margin负值的运用​​​​文字环绕浮动效果​​​​行内块的应用​​​​CSS三角强化​​

​​CSS初始化​​

溢出的文字省略号显示

分为两种情况：

单行文本溢出显示省略号

三个步骤：

强制一行内显示文本超出的部分隐藏文字用省略号替代超出的部分

代码实现：

/*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; }

文字环绕浮动效果

前面提到过浮动元素是不会压住文字的。

利用这一特性我们可以快速地制作出文字环绕浮动效果。

例如：

【集锦】热身赛-巴西0-1秘鲁 内马尔替补两人血染赛场

行内块的应用

行内块用来做这些翻页标签非常的适合

这里利用了行内块元素的两个特点：

行内块元素之间有空隙给父级添加 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; }

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。