目录
元素的显示与隐藏
display显示
display：none；隐藏对象
display：block；除了转换为块级元素之外，同时还有显示元素的意思。
特点：隐藏之后，不占位置
<style>
.div1 {
/*隐藏元素div1*/
display: none;
width: 200px;
height: 200px;
background-color: orange;
}
.div2 {
width: 200px;
height: 200px;
background-color: purple;
}
</style>visibility可见性
visibility：visible；对象可视
visibility：hidden；对象隐藏
特点：隐藏之后，保留原有的位置
overflow溢出
| 属性值 | 描述 |
| visible | 不剪切内容也不添加滚动条 |
| hidden | 不显示超过对象尺寸的内容，超出的部分隐藏起来 |
| scroll | 不管有没有超出内容，总是显示滚动条，缺点：丑，不常用 |
| auto | 超出自动显示滚动条，不超出不显示滚动条 |
鼠标移动图片变灰的效果
CSS用户界面样式
鼠标样式cursor
| 属性值 | 描述 |
| default | 小白 默认 |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allowed | 禁止 |
<body>
<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>
</body>轮廓线outline
文本框聚焦的效果
outline：outline-color || outline-style || outline-width
用的不多，基本上都是先去掉。
<input type="text" style="outline: 0;"/> // 0或者none都可以
防止拖拽文本域resize
<textarea style="resize:none;"></textarea>
vertical-align垂直对齐
- 块级元素居中对齐 margin：0 auto；
- 文字居中对齐 text-align：center；
图片、表单和文字对齐
vertical-align垂直对齐只针对于行内元素或者行内块元素
vertical-align：baseline | top | middle | bottom
注意：
vertical-align不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，特别是行内块元素，通常用来控制图片/表单与文字的对齐。
去除图片底侧空白缝隙
默认基线对齐
解决方法：
- 给img 添加vertical-align：middle | top等，让图片不要和基线对齐。
- 给img 添加display：block 转换为块级元素。
溢出的文字省略号显示
white-space
设置或检索对象内文本显示方式。通常用于强制一行显示内容
white-space：normal；默认处理方式，自动换行
white-space：nowrap；强制在一行显示所有文本，直到文本结束或者遇到br标签才换行。
text-overflow文字溢出
设置或检索是否使用一个省略标记（...）表示对象内文本的溢出
text-overflow：clip；不显示省略标记（...），而是简单的裁切
text-overflow：ellipsis；当对象内文本溢出时显示省略标记（...）
注意：一定要先强制一行内显示，再和overflow属性搭配使用。
步骤
- 强制一行内显示文本
- 把超出的部分隐藏
- 用省略号代替超出的部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 150px;
height: 25px;
border: 1px solid red;
/*当文字显示不开的时候，自动换行*/
/*white-space: normal;*/
/*1.要文字强制一行内显示，除非遇到br*/
white-space: nowrap;
/*2.溢出隐藏*/
overflow: hidden;
/*3.文字溢出用省略号代替超出的部分*/
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>
我要瘦到100斤，然后我就去吃火锅！
</div>
</body>
</html>推拉门设计
基础语法
<a>
<span></span>
</a>思路
- a设置背景左侧，padding撑开合适的宽度。
- span设置背景右侧，padding撑开合适宽度 剩下由文字继续撑开宽度。
- a包含span是因为整个导航都是可以点击的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*1.a是设置左侧背景（左门）*/
a {
/*背景的大小和文字多少有关，所以需要文字撑开盒子，要用到行内块*/
display: inline-block;
height: 33px;
background: url(image/to.png) no-repeat;
color: #fff;
text-decoration: none;
padding-left: 15px;
margin: 15px;
}
/*2.span是设置右侧背景（右门）*/
a span {
display: inline-block;
height: 33px;
background: url(image/to.png) no-repeat right top;
padding-right: 15px;
}
</style>
</head>
<body>
<a href="#">
<span>首页</span>
</a>
<a href="#">
<span>我要吃火锅</span>
</a>
</body>
</html>margin拓展
1.解决相邻边框重复问题
解决方法：让margin值取负数，往左走一个边框的宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
/*浮动的盒子是紧贴在一起的*/
float: left;
width: 100px;
height: 300px;
border: 1px solid #ccc;
margin-left: -1px;
margin-top: -1px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
2.鼠标经过凸显边框效果
会出现下面的效果：
第一种写法：给当前要突出边框的盒子加上相对定位
（注：这里其实可以把1个div看成两个，1：正常的div（父盒子），2：鼠标悬浮时的div（子盒子））
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
/*浮动的盒子是紧贴在一起的*/
float: left;
width: 100px;
height: 300px;
border: 1px solid #ccc;
margin-left: -1px;
margin-top: -1px;
}
/*div也可以用hover*/
div:hover {
/*因为下一个盒子把上一个的边框遮挡住了*/
/*所以如果想显示全边框，就要把这个盒子放到最上层显示*/
/*这里其他盒子没有用到定位所以不可以用z-index来实现*/
border: 1px solid red;
/*保证当前的盒子是定位就会压住标准流和浮动的盒子*/
position: relative;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>第二种写法：给下面的盒子加上相对定位，提高突出盒子的层级
<style>
div {
position: relative;
/*浮动的盒子是紧贴在一起的*/
float: left;
width: 100px;
height: 300px;
border: 1px solid #ccc;
margin-left: -1px;
margin-top: -1px;
}
/*div也可以用hover*/
div:hover {
/*因为下一个盒子把上一个的边框遮挡住了*/
/*所以如果想显示全边框，就要把这个盒子放到最上层显示*/
border: 1px solid red;
/*父级是定位的盒子，所以可以通过z-index提高层级*/
z-index: 1;
}
</style>
css拓展
css模拟三角形
1.首先来看下把div的宽、高都设置成0，添加边框值的效果
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 0;
height: 0;
border-top: 10px solid red;
border-right: 10px solid yellow;
border-bottom: 10px solid purple;
border-left: 10px solid violet;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2.接下来思考怎么样才能做出一个三角形
思路：将其它的三个三角形的颜色去掉——>四个边框的颜色都要写，写成transparent变成透明
注意：
- 只写一个边框会不显示的！！
- 可以用p标签写。
- p标签写的时候加上 font-size：0；line-height：0；可以照顾兼容性的问题。
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 0;
height: 0;
border: 10px solid;
border-color: transparent violet transparent transparent;
}
</style>
</head>
<body>
<div></div>
</body>
给盒子加三角
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
position: relative;
width: 200px;
height: 150px;
background-color: violet;
margin: 100px auto;
}
p {
position: absolute;
top: -40px;
left: 50%;
margin-left: -20px;
width: 0;
height: 0;
border-style: solid;
border-width: 20px;
border-color: transparent transparent blue transparent;
font-size: 0;
line-height: 0;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
207
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
