HTML+CSS基础知识个人笔记_7
1. 显示与隐藏
display 不占坑
visibility 占坑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01_显示与隐藏.html</title>
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
/*隐藏, 不占坑！！！*/
/*display: none;*/
/*显示,惯用block，inline的话没有内容还是看不到*/
/*display: block;*/
/*隐藏，占坑!!!*/
/*visibility: hidden;*/
/*显示*/
visibility: visible;
}
p {
width: 100px;
height: 100px;
background-color: purple;
}
</style>
</head>
<body>
<div></div>
<p>123</p>
</body>
</html>
2. 土豆案例
典型处理a .mask
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02_土豆.html</title>
<style>
* {
margin: 0;
padding: 0;
}
a {
/*如果不写宽高和转换成块
(inline-block也不行，可以有效果，但是auto不行了,margin:0 auto,适用于块级元素且有宽)，
撑开是撑开，但是没有宽高*/
width: 520px;
height: 280px;
display: block;
margin: 100px auto;
position: relative;
}
.mask {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4) url(images/icon.png) no-repeat center;
position: absolute;
top: 0;
left: 0;
display: none;
}
a:hover .mask {
display: block;
}
</style>
</head>
<body>
<a href="#">
<img src="images/tb.jpg" />
<div class="mask"></div>
</a>
</body>
</html>
3. overflow
默认，溢出部分显示
overflow: visible;
溢出部分隐藏，不是删除
overflow: hidden;
滚动条，不管有没有超出，都显示滚动条
overflow: scroll;
在超出的时候，加滚动条，body 和 testarea 默认属性
overflow: auto;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02_土豆.html</title>
<style>
div {
width: 300px;
height: 300px;
border: 1px solid red;
/*默认，溢出部分显示*/
/*overflow: visible;*/
/*溢出部分隐藏，不是删除*/
/*overflow: hidden;*/
/*滚动条，不管有没有超出，都显示滚动条*/
/*overflow: scroll;*/
/*在超出的时候，加滚动条，body 和 testarea 默认属性*/
/*overflow: auto;*/
}
</style>
</head>
<body>
<div>
<p>123qwdsfgfnsasvsdvfe</p>
<p>123qwdsfgfnsasvsdvfe</p>
<p>123qwdsfgfnsasvsdvfe</p>
<p>123qwdsfgfnsasvsdvfe</p>
<p>123qwdsfgfnsasvsdvfe</p>
<p>123qwdsfgfnsasvsdvfe</p>
<p>123qwdsfgfnsasvsdvfe</p>
<p>123qwdsfgfnsasvsdvfe</p>
<p>123qwdsfgfnsasvsdvfe</p>
<p>123qwdsfgfnsasvsdvfe</p>
<p>123qwdsfgfnsasvsdvfe</p>
</div>
</body>
</html>
4. cursor
<li style="cursor: default;">我是小白</li>
<li style="cursor: pointer;">我是小手</li>
<li style="cursor: move;">我是移动</li>
<li style="cursor: text;">我是文本</li>
5. 轮廓线和防止文件域拖拽
/*取消轮廓线*/
outline: none;
/*防止文件域拖拽*/
resize: none;
6. vertical-align
只针对行内或者行内块，一般是图片或表单和文字的对齐，不影响块级元素
默认基线对齐，就算不加文字，也会有行高，就会有小空隙
解决：换成block或者换成基线对齐以外的对齐方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06_vertical-align.html</title>
<style>
div {
border: 2px solid red;
/*line-height: 0;*/
}
/*vertical-align不影响块级元素，只针对行内或者行内块，特别是行内块元素（基本上就是行内快），通常用来控制表单 图片和文字的对齐*/
/*图片默认基线对齐，就算不加文字，默认也有行高,如上，行高为0就没有空隙，但这不是解决方法*/
img {
/*法一，转换成块级元素，占一行，则不会有对齐问题*/
/*display: block;*/
/*法二，改成除了base-line之外的，如top middle bottom对齐*/
/*默认的*/
/*vertical-align: baseline;*/
/*vertical-align: top;*/
/*vertical-align: middle;*/
/*vertical-align: bottom;*/
}
</style>
</head>
<body>
<div>
<img src="images/tb.jpg" alt="">
</div>
</body>
</html>
7. 溢出文字省略号
- 文字一行显示
- 溢出隐藏
- 文本溢出省略号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>07_溢出文字省略号.html</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
li {
width: 106px;
height:50px;
border: 1px solid red;
/*white-space可以设置正常文本（亚洲文字和非亚洲文字）显示方式，默认自动换行*/
/*white-space: normal;*/
/*1. 强制一行显示*/
white-space: nowrap;
/*以下两个是针对字母和数字，暂不探讨*/
/*https://www.ablanxue.com/prone_9320_1.html*/
/*word-break: break-all;*/
/*word-wrap: break-word;*/
/*2. 溢出隐藏*/
overflow: hidden;
/*3. 文本溢出部分用省略号代替, 要和overflow：hidden搭配使用！*/
text-overflow: ellipsis;
/*默认*/
/*text-overflow: clip;*/
/*要实现溢出省略号显示，以上三步皆要满足
1. 一行显示
2. 溢出隐藏
3. 溢出省略号*/
}
</style>
</head>
<body>
<!-- <ul> -->
<li>文本显示方式，默认自动换行文本显示方式，默认自动换行文本显示方式，默认自动换行</li>
<!-- <li>sdafsvbdhfsdjsfshvbjdsihvbscshi</li> -->
<!-- </ul> -->
</body>
</html>
8. sprite的使用
本质，是为了减少对服务器的请求次数
形式，将多张小 背景 图片合成一张大图片
使用，计算好background-position
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>08_精灵图使用.html</title>
<style>
h3 {
width: 22px;
height: 23px;
/*精灵图是为了减少对服务器的请求，提高访问速度
一般是把多张小的 背景 图片，合成一张大图片使用*/
/*取负值*/
background: url(images/wzry.png) no-repeat -1px -107px;
}
span {
display: inline-block;
background: url(images/wzry.png) no-repeat;
}
.one {
width: 22px;
height: 25px;
background-position: -1px -144px;
}
.two {
width: 23px;
height: 23px;
background-position: -2px -186px;
}
</style>
</head>
<body>
<h3></h3>
<span class="one"></span>
<span class="two"></span>
</body>
</html>
9. 微信滑动门
要理解透彻
a套span
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>09_微信滑动门.html</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
body {
background: url(images/wx-nav.jpg) repeat-x;
}
/*1. 左侧圆角放a,不可指定宽度！*/
.nav a {
height: 33px;
display: inline-block;
background: url(images/wx-tu.png);
text-decoration: none;
line-height: 33px;
color: #FFF;
font-weight: 700;
padding-left: 15px;
}
/*2. 右侧圆角放span，不可指定宽度！*/
.nav span {
height: 33px;
display: inline-block;
background: url(images/wx-tu.png) right;
padding-right: 15px;
}
/*.nav a:hover { 鼠标经过a的时候，a的背景图改变
background-image: url(images/wx-ou.png);
}
.nav a:hover span { 鼠标经过a的时候，a里面的span背景图改变
background-image: url(images/wx-ou.png);*/
.nav a:hover,
.nav a:hover span {
/*background: url(images/wx-ou.png); 如此就会出错！！！因为默认没有指定时，是repeat left top*/
background-image: url(images/wx-ou.png);
}
</style>
</head>
<body>
<ul class="nav">
<li>
<a href="#">
<span>首页</span>
</a>
<a href="#">
<span>使用指南</span>
</a>
<a href="#">
<span>微信小程序</span>
</a>
</li>
</ul>
</body>
</html>