前端基础-CSS-07

turbosqi

已于 2022-11-05 21:31:04 修改

阅读量128

点赞数 1

分类专栏：前端基础文章标签： css 前端 css3

于 2022-11-05 21:03:18 首次发布

本文链接：https://blog.csdn.net/Lshuangye/article/details/127675285

版权

前端基础专栏收录该内容

9 篇文章 0 订阅

订阅专栏

前端CSS基础系列
前端基础-CSS-01
前端基础-CSS-02
前端基础-CSS-03
前端基础-CSS-04
前端基础-CSS-05
前端基础-CSS-06
前端基础-CSS-07

文章目录

9.1. 元素的显示与隐藏

9.1.1. display 显示

目的：让一个元素在页面中消失或者显示出来

代码示例：

<style>
    .damao {
        /* 隐藏元素 */
        display: none;
        /* 显示元素 */ 
      	display: block;
      
        width: 200px;
        height: 200px;
        background-color: pink;
    }
    .ermao {
        width: 250px;
        height: 250px;
        background-color: purple;
    }
</style>

<body>
    <div class="damao"></div>
    <div class="ermao"></div>
</body>

示例效果：

9.1.2. visibility 可见性

代码示例：

<style>
    .damao {
        /* hidden隐藏元素 */
        visibility: hidden;
        /* 显示元素 */
      	visibility: visible;
      
        width: 200px;
        height: 200px;
        background-color: pink;
    }
    .ermao {
        width: 250px;
        height: 250px;
        background-color: purple;
    }
</style>

<body>
    <div class="damao"></div>
    <div class="ermao"></div>
</body>

9.1.3. overflow 溢出

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容

属性值

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出内容否，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

代码示例：

<style>
    div {
        /* 1.溢出隐藏--超过盒子大小的部分隐藏起来 */
        /* overflow: hidden; */

        /* 2.显示滚动条 */
        /* overflow: scroll; */

        /* 3.超出自动显示滚动条，不超出不显示滚动条 */
        /* overflow: auto; */

        /* 4.不剪切也不显示滚动条 */
        /* overflow: visible; */

        width: 150px;
        height: 150px;
        border: 1px solid red;
    }
</style>

<body>
    <div>
        清澈的河流
        壮观的瀑布
        珍稀的植物
        绝美的风景
        ....
        这一切就在
        清澈的河流
        壮观的瀑布
        珍稀的植物
        绝美的风景
        ....
        这一切就在
        清澈的河流
        壮观的瀑布
        珍稀的植物
        绝美的风景
        ....
    </div>
</body>

示例效果：

总结

属性	区别	用途
display	隐藏对象，不保留位置	配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单，应用极为广泛
visibility	隐藏对象，保留位置	使用较少
overflow	只是隐藏超出大小的部分	1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围

9.2. 鼠标样式

cursor用于设置鼠标样式
属性值：

属性值描述
default 小白默认
pointer 小手
move 移动
text 文本
not-allowed 禁止

属性值	描述
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>

9.3. 轮廓线

outline用于取消轮廓线

语法：

/* outline: none 取消轮廓线 */
<style>
    input {
   		 outline: none;
    }
</style>

9.4. 防止拖拽文本域

resize用于防止拖拽文本域

代码示例：

<style>
    textarea {
        height: 250px;
        width: 400px;
        outline: none;
        border: 1px solid blue;
        resize: none;
    }
</style>

9.5. 垂直对齐

vertical-align 垂直对齐（只对行内元素和行内块元素有效）
```
vertical-align : baseline |top |middle |bottom 
```

设置图片、文字和表单对齐

<style>
    .one {
    		/* 默认的是基线对齐 */
    		vertical-align: baseline;
    }
    .two {
    		vertical-align: middle;
    }
    .three {
   		 vertical-align: top;
    }
</style>

<body>
    <div>
        <img src="images/logo.png" alt="" class="one"> nishousha 
    </div>
    <div>
        <img src="images/logo.png" alt="" class="two"> nishousha 
    </div>
    
    <div>
        <img src="images/logo.png" alt="" class="three"> nishousha 
    </div>
</body>

请添加图片描述

去除图片底侧空白缝隙
- 原因：图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐,就是图片底侧会有一个空白缝隙
- 解决办法：
  1. 给img vertical-align:middle | top| bottom等等。让图片不要和基线对齐
  2. 给img 添加 display：block; 转换为块级元素就不会存在问题了

9.6. 溢出的文字省略号显示

white-space

/* 默认处理方式 */
white-space:normal;
/* 强制在同一行内显示所有文本,直到文本结束或者遭遇br标签对象才换行 */
white-space:nowrap;

text-overflow 文字溢出

/* 不显示省略标记（...），而是简单的裁切 */ 
text-overflow : clip;
/* 当对象内文本溢出时显示省略标记（...） */
text-overflow：ellipsis ；

代码示例：

<style>
    div {
        width: 150px;
        height: 25px;
        border: 1px solid pink;
        /* 当文字显示不开的时候,自动换行 */
        /* white-space: normal; */

        /* 1.要文字在一行内显示，除非遇到br */
        white-space: nowrap;
        /* 2.溢出隐藏 */
        overflow: hidden;
        /* 3.文字溢出，用省略号 */
        text-overflow: ellipsis;
    }
</style>

<body>
    <div>
        hi~laizixinxinxdeiguisvuigrdfhrf
    </div>
</body>

示例效果：

9.7. CSS精灵技术

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图
总结：

css精灵技术主要针对于背景图片，插入的图片img 是不需要这个技术
1. 精确测量，每个小背景图片的大小和位置
2. 给盒子指定小背景图片时，背景定位基本都是负值

代码示例：

<style>
    .icon1 {
        width: 23px;
        height: 23px;
        background: url(images/index.png) no-repeat 0 -107px;
        /* background-position: 0 -107px; */
    }
    .icon2 {
        width: 23px;
        height: 23px;
        background: url(images/index.png) no-repeat -157px -107px;;
		}
</style>

<body>
    <div class="icon1"></div>
    <div class="icon2"></div>
</body>

示例效果：
补充说明

9.8. 滑动门技术

核心技术就是利用CSS精灵（主要是背景位置）和盒子padding撑开宽度, 以便能适应不同字数的导航栏

经典布局

<li>
  <a href="#">
    <span>导航栏内容</span>
  </a>
</li>

滑动门实现的核心

代码示例：微信导航栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>微信导航栏案例</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		li {
			list-style: none;
		}
		body {
			background: url(images/wx.jpg) repeat-x;
		}
		.nav {
			margin-top: 20px;
		}
		.nav li {
			float: left;
			margin: 0 5px;
		}
		.nav li a {
			display: inline-block;
			height: 33px;
			background: url(images/to.png) no-repeat;
			padding-left: 15px;
			color: #fff;
			line-height: 33px;
			font-size: 14px;
		}
		.nav li a span {
			display: inline-block;
			height: 33px;
			background: url(images/to.png) no-repeat right;
			padding-right: 15px;
		}
		/*鼠标经过了a 链接首先换背景图片 然后 链接里面的span 也要换*/
		.nav a:hover,
		.nav a:hover span {
			background-image: url(images/ao.png);
		}
	</style>
</head>
<body>
	<div class="nav">
		<ul>
			<li>
				<a href="#">
					<span>首页</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span>帮助与反馈</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span>公众平台</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span>开放平台</span>
				</a>
			</li>
		</ul>
	</div>
</body>
</html>

示例效果：

9.9. margin负值之美

代码示例：

<style>
    div {
        /*浮动的盒子是紧贴在一起的*/
        float: left;
        width: 200px;
        height: 300px;
        border: 1px solid #ccc;
      	/* 设置负值让两个盒子的重叠部分不会压在一起 */
        margin-left: -1px;
        margin-top: -1px;
    }
</style>

代码示例：突出显示

/*鼠标经过div 的意思  p:hover */
div:hover {
    /*我要让当前鼠标经过的这个div 升到最高处来就好了*/
    /*定位的盒子是最高层的  */
    border: 1px solid #f40;
    /*我们只要保证当前的这个盒子 是定位 就会压住 标准流和浮动盒子*/
    position: relative;
    /*我们只能用相对定位  它是占位置的*/
}

9.10. CSS三角形之美

代码示例：

<style>
    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;
    }
</style>