css背景设置

CSS 三角形

div {
   width: 0; 
   height: 0;
   line-height:0；
   font-size: 0;
   border-top: 10px solid red;
   border-right: 10px solid green;
   border-bottom: 10px solid blue;
   border-left: 10px solid #000; 
     }

1. 我们用css 边框border可以模拟三角效果
2. 内容宽度高度为0
3. 我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了
4. 为了照顾兼容性 低版本的浏览器，加上 font-size: 0; line-height: 0;

CSS用户界面样式

所谓的界面样式， 就是更改一些用户操作样式，以便提高更好的用户体验。

• 更改用户的鼠标样式
• 表单轮廓等。
• 防止表单域拖拽

2.1 鼠标样式

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

属性值	描述
default	小白 默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

<ul>
  <li style="cursor:default">我是小白</li>
  <li style="cursor:pointer">我是小手</li>
  <li style="cursor:move">我是移动</li>
  <li style="cursor:text">我是文本</li>
  <li style="cursor:not-allowed">我是文本</li>
</ul>

2.2 轮廓线 outline

是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

outline : outline-color ||outline-style || outline-width 

一般为消除表单的轮廓线
最直接的写法是 ： outline: 0; 或者 outline: none;

2.3 防止拖拽文本域resize


<textarea  style="resize: none;"></textarea>

2.4 用户界面样式总结

属性	用途	用途
鼠标样式	更改鼠标样式cursor	样式很多，重点记住 pointer
轮廓线	表单默认outline	outline 轮廓线，我们一般直接去掉，border是边框，我们会经常用
防止拖拽	主要针对文本域resize	防止用户随意拖拽文本域，造成页面布局混乱，我们resize:none

vertical-align 垂直对齐

• 有宽度的块级元素居中对齐，是margin: 0 auto;
• 让文字居中对齐，是 text-align: center;

vertical-align 垂直对齐，它只针对于「行内元素」或者「行内块元素」

设置或检索对象内容的垂直对其方式。
vertical-align : baseline 基线|top 顶线 |middle中线 |bottom 底线

注意：

vertical-align 不影响块级元素中的内容对齐，它只针对于整体「行内元素」或者「行内块元素」，

特别是行内块元素， 通常用来控制图片/表单与文字的对齐。

3.1 图片、表单和文字对齐

我们可以通过vertical-align 控制图片和文字的垂直关系了。默认的图片会和文字基线对齐。

3.2 去图片底侧空白缝隙

原因：图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。

就是图片底侧会有一个空白缝隙。

解决方法：

• 给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐。

• 给img 添加 display：block; 转换为块级元素就不会存在问题了。

溢出的文字省略号显示

4.1 white-space

• white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容

white-space:normal ；默认处理方式

white-space:nowrap ； 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。

4.2 text-overflow 文字溢出

• 设置或检索是否使用一个省略标记（…）标示对象内文本的溢出

text-overflow : clip ；不显示省略标记（...），而是简单的裁切 

text-overflow：ellipsis ； 当对象内文本溢出时显示省略标记（...）

「注意」：

一定要首先强制一行内显示，再次和overflow属性 搭配使用

4.3 总结三步曲

/*1. 先强制一行内显示文本*/
    white-space: nowrap;
/*2. 超出的部分隐藏*/
    overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
    text-overflow: ellipsis;