273节---------4月29日

溢出的文字省略号显示

单行文本溢出显示省略号

必须满足三个条件

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

对应的代码分别为

white-space：nowrap；（默认normal自动换行）
overflow：hidden；
text-overflow：ellipsis；

多行文本溢出显示省略号

overflow：hidden；

text-overflow: ellipsis；
/*变成弹性伸缩盒子模型*/

display：-webkit-box；
/*在第几行隐藏文字*/

-webkit-line-clamp：2；
/*设置或检索伸缩盒对象的子元素的排列方式*/

-webkit-box-orient：vertical；

---

常见布局技巧

margin负值的运用

盒子的细线边框：

让每个盒子的margin往左侧移动-1px正好压住相邻盒子边框

margin-left：-1px；

如果要使鼠标移动到盒子上面时边框可以变个颜色

可以提高当前盒子的层级（盒子没有定位，添加相对定位即可；如果Li都有定位，使用z-index）

然后li：hover{border：1px solid blue}（）

---

文字围绕浮动元素

给图片盒子浮动属性，将文字写到父盒子里

---

CSS的初始化

不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS进行初始化。

每个网页都必须首先进行CSS初始化

* {
    margin: 0;
    padding: 0；/*把我们所有标签的内外边距清零*/
}


em,
i {
    font-style：normal /*em 和i斜体的文字不倾斜*/
}


li {
    list-style：none /*去掉li的小圆点*/
}


img {
    border：0; /*照顾低版本浏览器*/
    vertical-align：middle /*取消图片底侧有空白缝隙的问题*/
}


button {
    cursor: pointer /*当鼠标经过button按钮的时候，鼠标变成小手*/
}


a {
    color：颜色;/*定义链接的颜色*/
    text-decoration：none/*取消下划线*/
}


a: hover {
color：颜色/*鼠标经过变颜色*/
}


.clearfix:after {
    visibility：hidden;
    clear：both;
    display：block;
    content：". ";
    height：e
}/*清除浮动*/
.clearfix i
*zoom: 1
}

Unicode编码文字

把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。

比如：黑体\9ED1\4F53