CSS 10-01 显示隐藏 界面样式 垂直对齐 精灵技术 滑动门 笔记
1.元素显示与隐藏
案例:土豆网播放页面
鼠标经过的box的时候 让上面的mask显示出来
Document
1.1display显示(重点)
使用较多
display:none 隐藏 ,不保留位置
display:block 显示/转换成块级元素
1.2 visibility可见性(了解)
使用较少
visibility:hidden 隐藏元素,保留位置(停职留薪)
visibility:visible 显示元素
1.3overflow溢出(重点)
1.清除浮动
2.保证盒子的内容不会超出该盒子范围
overflow:visible 默认 不剪切内容也不添加滚动条
overflow:hidden 不显示超出对象尺寸的内容,超出部分隐藏掉
overflow:scroll 不管超出内容否,总是显示滚动条
overflow:auto 超出自动显示滚动条,不超出不显示滚动条
2.1 鼠标样式cursor
| 属性值 | 描述 |
|---|---|
| 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>
禁止: 只是一个鼠标样式 并不是不能点了 不能点要通过js来实现
2.2轮廓线
一般是去掉的,取消轮廓线 比如输入框点击后的边框,会导致大小不一样
outline:none;或者0;
直接初始化
input {
outline:none
}
2.3 防止拖拽文本域resize
resize: none;
<textarea style="resize: none;">textarea>
注意:textarea最好是写在一行上,不然里面会有空行*
2.4 用户界面样式总结
| 属性 | 用途 | 用途 |
|---|---|---|
| 鼠标样式 | 更改鼠标样式cursor | 样式很多，重点记住 pointer |
| 轮廓线 | 表单默认outline | outline 轮廓线，我们一般直接去掉，border是边框，我们会经常用 |
| 防止拖拽 | 主要针对文本域resize | 防止用户随意拖拽文本域，造成页面布局混乱，我们resize:none |
3. vertical-align 垂直对齐
- 有宽度的块级元素居中对齐，是margin: 0 auto;
- 让文字居中对齐，是 text-align: center;
但是我们从来没有讲过有垂直居中的属性。
vertical-align 垂直对齐，它只针对于行内元素或者行内块元素，
vertical-align : baseline |top |middle |bottom
设置或检索对象内容的垂直对其方式。
-
注意：
vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，
特别是行内块元素， 通常用来控制图片/表单与文字的对齐。
3.2 去除图片底侧空白缝隙
-
原因：
图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。就是图片底侧会有一个空白缝隙。
-
解决的方法就是：
- 给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐。
- 给img 添加 display：block; 转换为块级元素就不会存在问题了。
- 给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐。
4. 溢出的文字省略号显示
4.1 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;
5. CSS精灵技术（sprite) 重点
5.1 为什么需要精灵技术
为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。
5.3 精灵技术使用的核心总结
- 精确测量，每个小背景图片的大小和 位置。
- 给盒子指定小背景图片时， 背景定位基本都是 负值。
先给测量宽高,然后bg url x y 负值就可以了
如果简写,一定要注意权重的问题!!!不然图片加载不出来 或者定位不准!!!
5.4字体图标**
一.unicode方法
1.使用:把下载的fonts文件放到页面根目录下
2.css样式中style引入 声明 创建字体 直接复制一大坨
修改路径
3.往html中放进去demo.html中的小图标
复制到tubiao
4.给
span {
font-family:iconfont;
font-size:100px;
color:pink;
}
二.第二种本地方法
1.link 引入iconfont.css 一定要加http:
2.复制下面的内容到html 并且修改icon-xx
3.修改字体样式:在style里面
.icon-xx {
font-size
color
}
三.服务器方法!!!
1.我的项目 2.新建 3.添加至项目 4.复制链接到style里面 5.然后在html里面给span任意盒子复制字体下面的6.在style里面写span { font-family:“iconfont”}
6. 滑动门
核心技术
核心技术就是利用CSS精灵（主要是背景位置）和 盒子padding撑开宽度, 以便能适应不同字数的导航栏。
一般的经典布局都是这样的：
<li>
<a href="#">
<span>导航栏内容span>
a>
li>
css样式
* {
padding:0;
margin:0;
}
body{
background: url(images/wx.jpg) repeat-x;
}
.father {
padding-top:20px;
}
li {
padding-left: 16px;
height: 33px;
float: left;
line-height: 33px;
margin:0 10px;
background: url(./images/to.png) no-repeat left ;
}
a {
padding-right: 16px;
height: 33px;
display: inline-block;
color:#fff;
background: url(./images/to.png) no-repeat right ;
text-decoration: none;
}
li:hover,
li:hover a {
background-image:url(./images/ao.png);
}
总结：
- a 设置 背景左侧，padding撑开合适宽度。
- span 设置背景右侧， padding撑开合适宽度 剩下由文字继续撑开宽度。
- 之所以a包含span就是因为 整个导航都是可以点击的。
7.1 margin负值之美
1). 负边距+定位：水平垂直居中
咱们前面讲过， 一个绝对定位的盒子， 利用 父级盒子的 50%， 然后 往左(上) 走 自己宽度的一半 ，可以实现盒子水平垂直居中。
2). 压住盒子相邻边框
给父盒子一个相对定位
margin:-1px
给子盒子 z-index:1 提高等级
这个时候大盒子会向左边出去一像素,就大盒子一个margin-left:1px;
加边框:hover
如果li没有定位 添加相对定位就可以了
li 有定位就提高层级z-index
7.2 CSS三角形之美
div {
width: 0;
height: 0;
line-height:0；
font-size: 0;
border-width:10px;
border-style:solid;
border-color:transparent transparent transparent pink;
div {
width:0;
height:0;
border:10px solid transpant;
border-left-color:red;
}
必须是块级元素
- 我们用css 边框可以模拟三角效果
- 宽度高度为0
- 我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了
- 为了照顾兼容性 低版本的浏览器，加上 font-size: 0; line-height: 0;