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
- 正数向右边走,负数向左边走
文字围绕浮动元素
巧妙运用浮动元素不会压住文字的特性