css技巧（day7）

最新推荐文章于 2022-11-01 17:11:16 发布

洛洛的学习时光

最新推荐文章于 2022-11-01 17:11:16 发布

阅读量181

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_45808482/article/details/109465793

版权

目标
理解

能说出元素显示隐藏最常见的写法
能说出精灵图产生的目的
能说出去除图片底侧空白缝隙的方法

应用

能写出最常见的鼠标样式
能使用精灵图技术
能用滑动门做导航栏案例

元素的显示与隐藏

目的：
让一个元素在页面中消失或者显示出来
场景：
类似网站广告，当我们点击关闭就不见了饿，但是我们重新刷新页面，会重新出现。

1.display显示（重点）

/*隐藏元素*/
			/*1.先隐藏
			2.不保留位置*/
			display: none;
``          display: block;
			/*这里除了转换为块级元素以外，还可以 显示元素*/`

2.visibility（理解）

/*1.hidden 隐藏元素*/
			/*2.保留位置*/
			visibility: hidden;
			visibility: visible;
			/*显示元素*/

3.overflow溢出（重点）
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容
在这里插入图片描述

overflow: hidden;
			/*溢出隐藏--超出盒子大小部分 隐藏起来*/
overflow: hidden;visible
	/*默认状态下，显示*/
overflow: scroll;
			/*显示滚动条 总是会显示 不会超出盒子大小 内容显示全 太丑了我们不常用*/
   overflow: auto;
          /*  1.如果超出就显示滚动条
            2.如果不超出，不显示滚动条 我们还是不用*/

css用户界面样式
所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。

更改用户的鼠标样式（滚动条因为兼容性非常差，我们不研究）
表单轮廓等
防止表单域拖拽

鼠标样式cursor

在这里插入图片描述
轮廓线
是绘制于元素周围的一条线，位于边框边缘外围，可能起到突出元素作用
最直接的写法：outline：0；或者outline：none；

input {
        outline：none；
        }

防止拖拽文本域 resize
复习：textarea 文本框，留言框

<style>
		textarea {
			width: 500px;
			height: 249px;
			/*取消轮廓线*/
			outline: none;
			/*边框改变颜色*/
			border: 1px solid skyblue;
			/*防止用户拖拽文本域*/
			resize: none;
		}
	</style>
</head>
<body>
	<textarea>请留言</textarea>
	123123

vertical-align 垂直对齐

L有宽度的块级元素居中对齐，是margin：0 auto；
让文字居中对齐是text-align：center；
vertical-align 垂直对齐，它只针对行内元素 或者行内块元素
特别是行内块元素，通常用来控制图片/表单与文字的对齐

图片、表单和文字对齐

去除图片底侧空白缝隙
解决方法：

只要不是基线对齐就好了
给img vertical-align：middle/top/bottom 让图片不要和文字基线对齐
给img添加display：block；转换为块级元素就不会存在问题了。

溢出的文字省略号显示
总结三部曲：
1.white-space 强制一行显示
white-space：normal 正常显示
white-space：nowrap 强制一行显示，直到遇到br标签才换行
2.over-flow：hidden 溢出隐藏超出部分
3.text-overflow 文字用省略号代替超出部分

div {
			width: 150px;
			height: 25px;
			border: 1px solid pink;
			/*当文字显示不开的时候，自动换行*/
			white-space: normal;
			/*1.要文字强制一行内显示 除非 遇到 br*/
			white-space: nowrap;
			/*2.溢出隐藏*/
			overflow: hidden;
		  /*文字溢出切除显示*/
		   text-overflow: clip;
		    /*3.文字溢出，用省略号替代*/
		   text-overflow: ellipsis;

		}

css精灵技术重点
为了有效减少服务器接收和发送请求的次数，提高页面的加载速度
精灵技术使用核心总结：
1.精确测量，每个小背景图片大小和位置
2.给盒子指定小背景图片时，背景定位基本都是负值

制作精灵图（了解）
规范：

精灵图上放的都是小的装饰性的背景图片，插入图片不能往上放
我们可以横向摆放也可以纵向摆放，但是每个图片之间留有适当的空隙
在我们精灵图最低端，留一片空隙，方便我们以后添加其他精灵图
网页中图片分辨率为72px

滑动门
核心技术
核心技术就是利用css精灵（主要是背景位置和盒子padding撑开宽度

<style>
		/*1.a 是设置左侧背景（左门）*/
		a {
			display: inline-block;
			height:33px;
			margin: 100px;
			background:  url(images/to.png) no-repeat;
			padding-left: 15px;
			color: #fff;
		}
		a span {
			display: inline-block;
			height:33px;
			background:  url(images/to.png) no-repeat right top;
			padding-right: 15px;
			line-height: 33px;
		}
		/*2.span是设置右侧背景 （右门）*/
		/*3.因为整个导航栏是链接，所以a要包含span*/
         /* 4.因为我们是滑动门，左右推拉，跟文字内容多少有关系，此时需要文字撑开盒子，就要用到行内块*/

总结：

a设置背景左侧，padding撑开合适宽度
span设置背景右侧，padding撑开合适宽度，剩下文字继续撑开宽度
之所以a包含span是因为整个导航都是可以点击的

鼠标经过了a链接首先换背景图片，然后里面的span也要换背景图片

margin负值之美

压住盒子相邻边框

css三角之美
我们用css边框可以模拟三角效果
css三角做法如下：
1.我们用css边框可以模拟三角效果
2.宽度高度为0
3.我们四个边都要写，只保留需要边框的颜色，其余不能省略，都改为transparent 透明就好了
4.为了照顾兼容性，加上font-siaze：0；line-height：0；

div {
			margin: 100px ;
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 10px;
			border-color:  skyblue transparent transparent  transparent;
			font-size: 0;
			line-height: 0;
		}