CSS（三角制作，用户界面样式，放置拖拽文本域，vertical-align属性应用，溢出的文字省略号显示，常见布局技巧，CSS初始化）

加粗样式## CSS三角制作

网页中常见的一些三角形，使用CSS直接就可以画出来，不必做成图片或文字图标

div{
    width:0;
    height:0;
    line-height:0;
    font-size:0;
    border：50px solid transparent;
    border-left-color:pink;
}

CSS用户界面样式

鼠标样式

li{ cursor：pointer；}

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
default：小白 默认
pointer：小手
move：移动
text：文本
not-allowed：禁止

轮廓线 outline
给表单添加outline：0；或者outline：none；样式之后，就可以去掉默认的蓝色边框。

input{ outline：none；}

防止拖拽文本域

textarea{resize：none；}

vertical-align属性应用

CSS的vertical-align属性使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐
官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效
语法：

vertical-align：baseline| top |middle | bottom

baseline：默认。元素放置在父元素的基线上
top：把元素的顶端与行最高的顶端对齐
middle：把此元素放置在父元素的中部
bottom：把元素的顶端与行中最低的元素的顶端对齐

解决图片底部默认空白缝隙问题
bug：图片底部会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。
主要解决方法有两种：
1.给图片添加vertical-align：middle | top | bottom等。（提倡使用的）
2.把图片转换为块级元素display：block；

溢出的文字省略号显示

单行文本溢出显示省略号–必须满足三个条件
1.先强制一行内显示文本

white-space：nowrap；（默认normal自动换行）

2.超出的部分隐藏

overflow：hidden；

3。文字用省略号替代超出的部分

text-overflow：elipsis；

多行文本溢出显示省略号
有较大兼容性问题，适合于webkit浏览器或移动端（移动端大部分是webkit内核）

/*弹性伸缩盒子模型显示*/
display：-webkit-box；
/*限制在一个块元素显示的文本的行数*/
-webkit-line-clamp：2；
/*设置或检索伸缩盒对象的子元素的排列方式*/
-webkit-box-orient：vertical；

常见布局技巧

margin复值运用
让每个盒子margin往左移动-1px正好压住相邻盒子边框
三角强化

width：0；
height：0；
border-color：transparent red transparent transparent；
border-style：solid；
border-width：22px 8px 0 0；

CSS初始化

不同浏览器对有些标签的默认值是不同的，为了消除不同的浏览器对html文本显现的差异，照顾浏览器兼容，我们需要对CSS初始化
简单理解：CSS初始化是指重设浏览器的样式（也称为CSS reset）
每个网页都必须首先进行CSS初始化
可以 参考京东CSS初始化代码。
Unicode编码字体：
把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。
比如：
黑体\9ED1\4F53
宋体\5B8B\4F53
微软雅黑\5FAE\8F6F\96C5\9ED1