文章目录

溢出的文字省略号显示
- 单行文本溢出显示省略号
- 多行文本溢出显示省略号
常见布局技巧
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;
}

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
</ul>

有人可能会认为每一个盒子都向左移动，相当于还是没变。实际上并不是这样，浏览器在进行渲染的时候，先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
}