1 CSS用户界面样式
-
更改用户的鼠标样式
-
表单轮廓等。
-
防止表单域拖拽
鼠标样式cursor
li {
cursor: pointer;
}
| 属性值 | 描述 |
|---|---|
| default | 小白，默认 |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allowed | 禁止 |
轮廓线outline
给表单添加 ： outline: 0; 或者 outline: none;就可以去掉默认的蓝色边框
防止拖拽文本域resize
textarea {
resize: none;
}
| 属性 | 用途 | 用途 |
|---|---|---|
| 鼠标样式 | 更改鼠标样式cursor | 样式很多，重点记住 pointer |
| 轮廓线 | 表单默认outline | outline 轮廓线，我们一般直接去掉，border是边框，我们会经常用 |
| 防止拖拽 | 主要针对文本域resize | 防止用户随意拖拽文本域，造成页面布局混乱，我们resize:none |
2 vertical-align 垂直对齐
-
有宽度的块级元素居中对齐，是margin: 0 auto;
-
让文字居中对齐，是 text-align: center;
vertical-align 垂直对齐，它只针对于「行内元素」或者「行内块元素」
图片、表单和文字对齐
图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。就是图片底侧会有一个空白缝隙。
解决的方法就是：
- 给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐。
- 给img 添加 display：block; 转换为块级元素就不会存在问题了。
3 溢出的文字省略号显示
white-space：normal || nowrap text-overflow： clip || ellipsis
/* 1.先强制一行内显示文本 */
white-space: nowrap; /*默认 normal 是自动换行，nowrap是强制一行显示文本*/
/* 2.超出的部分隐藏 */
overflow: hidden;
/* 3.文字用省略号替代超出的部分*/
text-overflow: ellipsis;
/* clip ；不显示省略标记（...），而是简单的裁切 */
/*ellipsis:省略号*/
注意：一定要首先强制一行内显示，再次和overflow属性 搭配使用
4 CSS精灵技术（sprite)
为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度
技术讲解
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图
这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来
我们需要使用CSS的：
-
background-image
-
background-repeat
-
background-position属性进行背景定位
-
其中最关键的是使用
background-position属性精确地定位
精灵技术核心总结
主要针对于背景图片，插入的图片img 是不需要这个技术的
-
精确测量，每个小背景图片的大小和 位置。
-
给盒子指定小背景图片时， 背景定位基本都是 负值。
5 CSS布局技巧
CSS三角形
-
我们用css 边框可以模拟三角效果
-
宽度高度为0
-
我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了
-
为了照顾兼容性 低版本的浏览器，加上 font-size: 0; line-height: 0
div {
/*我们用css 边框可以模拟三角效果*/
width: 0;
height: 0;
border-top: 10px solid red;
border-right: 10px solid green;
border-bottom: 10px solid blue;
border-left: 10px solid pink;
}
p {
width: 0;
height: 0;
border-style: solid;
border-width: 10px;
border-color: transparent transparent transparent red;
font-size: 0;
line-height: 0;
}margin负值的运用
- 两个盒子加边框1px，浮动，贴紧会出现 1 + 1 = 2px
- 给右边盒子添加
margin-left: -1px - 正数向右边走，负数向左边走
文字围绕浮动元素
巧妙运用浮动元素不会压住文字的特性
