web学习---CSS学习---笔记(四)

最新推荐文章于 2024-09-05 10:06:52 发布
最新推荐文章于 2024-09-05 10:06:52 发布
阅读量228 收藏 1
点赞数
分类专栏： WEB 文章标签： css 前端 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/IOSSHAN/article/details/124665363
版权

定位

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。

定位 = 定位模式 + 边偏移

定位模式用于指定一个元素在文档中的定位方式。
边偏移则决定了该元素的最终位置

定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值可以分为4个：
在这里插入图片描述

边偏移，就是定位的盒子移动到最终的位置
有top、bottom、left、right4个属性

相对定位relative

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的
语法：
选择器 {position: relative;}

相对定位的特点：

  1. 它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）
  2. 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对它。（不脱标，继续保留原来位置）

参照物是原来的自己

绝对定位 absolute

绝对定位是元素在移动位置的时候，是相对于它的祖先元素来说的
语法：
选择器 {position: absolute;}
绝对定位的特点：

  1. 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位
  2. 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置
  3. 绝对定位不再占有原先的位置（脱标 ）

子绝父相
子级是绝对定位的话，父级要用相对定位
相对定位经常用来作为绝对定位的父级

因为父级需要占有位置，因此是相对定位
子盒子不需要占有位置，因此是绝对定位

当然，不是一层不变的，其他情况也可能会遇到。只是子绝父相比较常见

参照物是祖先元素

固定位置fixed

固定位置是元素 固定浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变
语法：
选择器 {position: fixed;}

固定定位的特点：

  1. 以浏览器的可视窗口为参照点移动元素
  2. 跟父元素没有任何关系
  3. 不随滚动条滚动
  4. 固定定位不再占有原先的位置

类似于固定在顶部的tableView的section

粘性定位 sticky

粘性定位可以被认为是 相对定位和固定定位的混合
语法：
选择器{position: sticky; top: 10px;}

粘性定位的特点：

  1. 以浏览器的可视窗口为参照点移动元素（固定定位特点）
  2. 粘性定位占有原先的位置（相对定位特点）
  3. 必须添加top、left、right、bottom其中一个，才有效

定位叠放次序 z-index

就是，在Z轴方向的大小
语法：
选择器 {z-index: value};（value没有单位，比如1即可）
数值越大，越在前面。可以为负数或0
如果属性值相同，则后来者居上
只有定位的盒子，才有z-index属性

  • 行内元素添加绝对或者固定定位，可以直接设置高度和宽度

  • 块级元素添加绝对或者固定定位，不给宽度高度，默认是内容的大小

  • 浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）。但是绝对定位（固定定位）会压住下面标准流所有的内容。浮动之所以不会压住文字，因为浮动产生的最初目的：就是为了做文字环绕效果的
    在这里插入图片描述

  • 如果一个盒子既有left属性，又有right属性，则默认执行left属性

  • 如果一个盒子既有top属性，又有bottom属性，则默认执行top属性

淘宝焦点图练习

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" lang="en">
		<title></title>
		
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}
			
			li {
				list-style: none;
			}
			
			.tb-promo {
				position: relative;
				top: 30px;
				left: 50%;
				margin-left: -200px;
				width: 400px;
				height: 200px;
			}
			
			.tb-promo img {
				height: 100%;
				width: 100%;
			}
			
			.left, .right {
				position: absolute;
				top: 50%;
				margin-top: -10px;
				width: 20px;
				height: 30px;
				background-color: rgba(0,0,0,0.3);
				color: white;
				text-align: center;
				line-height: 30px;
				text-decoration: none;
			}
			
			.tb-promo .left {
				left: 0;
				border-top-right-radius: 15px;
				border-bottom-right-radius: 15px;
			}
			
			.tb-promo .right {
				right: 0;
				border-top-left-radius: 15px;
				border-bottom-left-radius: 15px;
			}
			
			.tb-promo .promo-nav {
				float: left;
				position: absolute;
				bottom: 15px;
				left: 50%;
				width: 70px;
				height: 13px;
				margin-left: -35px;
				background-color: rgba(255, 255, 255, 0.3);
				border-radius: 6.5px;
			}
			
			.tb-promo .promo-nav li {
				float: left;
				width: 8px;
				height: 8px;
				background-color: white;
				border-radius: 4px;
				margin: 3px;
			}
		</style>
	</head>
	<body>
		<div class="tb-promo">
			<img src="./img/企业微信20220420-165631@2x.png" alt="">
			
			<a href="#" class="left"> < </a>
			<a href="#" class="right"> > </a>
			
			<ul class="promo-nav">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		
	</body>
</html>

元素的显示与隐藏

1. display

display: none;隐藏对象
display: block;除了转换为块级元素之外，同时还有显示元素的意思
display隐藏元素后，不再占有原来的位置

2. visibility

visibility: visible;元素可见
visibility: hidden;元素隐藏

visibility隐藏元素后，继续占有原来的位置

3. overflow 溢出
什么是溢出呢？

超出元素内容的部分，就是溢出

overflow: visible;溢出部分可见
overflow: hidden;溢出部分隐藏
overflow: scroll;溢出部分显示滚动条，可以滚动查看
overflow: auto;溢出了，溢出部分显示滚动条；不溢出，不显示滚动条
该元素不是针对元素的，而是针对溢出部分的

土豆案例练习

鼠标一经过就出现遮罩与按钮

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" lang="en">
		<title></title>
		
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}
			
			.box {
				position: relative;
				width: 444px;
				height: 320px;
				background-color: green;
				margin: 30px auto;
			}
			
			.box img {
				width: 100%;
				height: 100%;
			}
			
			.box .mask {
				display: none;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, 0.4) url(img/3.1@2x.png) no-repeat center;
			}
			
			.box:hover .mask{
				display: block;
			}
			
		</style>
	</head>
	<body>
		<div class="box">
			<div class="mask"></div>
			<img src="img/企业微信20220420-165631@2x.png" >
			
		</div>
		
	</body>
</html>

需要注意的是：.box:hover，冒号左右不能留有空格

CSS高级技巧

精灵图

有许多小图，每次频繁请求服务器，但是每次都要一个小图标，太浪费
所以，可以在请求的时候，一下响应发送一张包括很多图标的大图

精灵技术的目的：有效减少服务器接收和发送请求的次数，提高页面的加载速度

比如，这个sprite（精神）精灵图：
在这里插入图片描述
那，怎么使用其中的小图标呢？

主要是通过移动背景图片的位置，background-position

使用的时候，可以使用：

background: url(img/sprite.png);
background-position: -182px 0px;

或者简写：

background: url(img/sprite.png) no-repeat -182px 0px;
练习：拼出自己的名字

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" lang="en">
		<title></title>
		
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}
			
			span{
				display: inline-block;
			}
			
			.a {
				width: 115px;
				height: 130px;
				background: url(img/abcd.jpg) no-repeat 0px 0px;
			}
			
			.s {
				width: 115px;
				height: 130px;
				background: url(img/abcd.jpg) no-repeat -250px -410px;
			}
			
			.i {
				width: 68px;
				height: 130px;
				background: url(img/abcd.jpg) no-repeat -322px -130px;
			}
		</style>
	</head>
	<body>
		<span class="a"></span>
		<span class="s"></span>
		<span class="i"></span>
		<span class="a"></span>
	</body>
</html>
  • 如果遇到一些结构和样式比较简单的小图标，可以用字体图标

CSS三角型

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box {
				width: 0px;
				height: 0px;
				border-left: 100px solid pink;
				border-right: 100px solid green;
				border-top: 100px solid red;
				border-bottom: 100px solid blue;
			}
			
			.box1 {
				width: 0px;
				height: 0px;
				margin: 100px auto;
				border-left: 100px solid transparent;
				border-right: 100px solid rgba(0, 0, 0, 0);
				border-top: 100px solid red;
				border-bottom: 100px solid rgba(0, 0, 0, 0);
			}
		</style>
	</head>
	<body>
		<div class="box">
		</div>
		
		<div class="box1">
		</div>
	</body>
</html>
三角形练习

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.bigBox {
				margin: 100px auto;
				width: 100px;
				height: 100px;
				background-color: pink;
				position: relative;
			}
			
			.arrowBox {
				width: 0px;
				height: 0px;
				margin: 100px auto;
				border-left: 10px solid transparent;
				border-right: 10px solid rgba(0, 0, 0, 0);
				border-top: 10px solid transparent;
				border-bottom: 10px solid pink;
				position: absolute;
				bottom: 0px;
				left: 50px;
				margin-left: -10px;
			}
		</style>
	</head>
	<body>
		<div class="bigBox">
			<div class="arrowBox">
			</div>
		</div>
		
	</body>
</html>

CSS用户界面样式

更改一些用户操作样式，以便提高更好的用户体验

  • 更改用户的鼠标样式
  • 表单轮廓
  • 防止表单域拖拽
1. 鼠标样式cursor

li {cursor: pointer};

在这里插入图片描述

  • 当点击文本框的时候，有颜色，可以使用input {outline: none;}去除颜色
  • textarea多行文本输入的时候，右下角默认有托大变小功能，可以使用textarea {resize: none;}去掉
  • <textarea rows="10" cols="22"></textarea>中间不要换行或者留空格，不然输入字段第一个字会有距离变化
  • vertical-align经常用于设置图片或表单和文字垂直（只针对行内元素或行内块元素有效）

在这里插入图片描述

解决图片下方留有一点点空白

由于图片与文字默认是baseline模式，所以，默认图片下方会留有一点空白，供文字使用
如果想图片下方没有空白，可以使用如下方法：

方法一(推荐)

使用vertical-align，model除了baseline的任意模式

方法二

图片改为块级元素img {display: block;}

溢出的文字省略号显示

单行文本溢出显示省略号

必须满足三个条件

  1. 强制一行内显示white-space: nowrap;(nowrap，不要换行)
  2. 溢出的部分隐藏：overflow: hidden;
  3. 使用省略号代替超出部分：text-overflow: ellipsis;
  • margin-left: -1px;可解决边框重复颜色加深的问题

用上面的方法是可以解决边框重复，但是有个问题，如果有经过边框颜色变换的时候，中间的边框，有一边是不同颜色的

在这里插入图片描述

解决方法：
鼠标经过某个盒子的时候，提高当前盒子的层级
如果没有定位，则添加相对定位(position: relative;)
如果有定位，则加z-index(z-index: 1;)

小练习

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			* {
				margin: 0;
				padding: 0;
			}
		
			.box {
				width: 300px;
				height: 70px;
				background-color: pink;
				margin: 10px auto;
				padding: 5px;
			}
			
			.picBox {
				float: left;
				width: 120px;
				height: 60px;
				margin-right: 10px;
			}
			
			img {
				width: 100%;
			}
		</style>
	</head>
	<body>
		<div class="box">
			
			<div class="picBox">
				<img src="img/img.png" alt="">
			</div>
			
			<p>的哈较好的卡号SD卡函数的卡上打卡机还打算科技活动</p>
		</div>
	</body>
</html>
底部page练习

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			* {
				margin: 0;
				padding: 0;
			}
			
			.box {
				margin: 100px auto; 
				text-align: center;
			}
			
			.box a{
				display: inline-block;
				width: 36px;
				height: 36px;
				background-color: #f7f7f7;
				border: 1px solid lightgray;
				/* text-underline-style: none; */
				text-align: center;
				line-height: 36px;
				text-decoration: none;
				color: black;
			}
			
			.box a:hover {
				list-style: none;
			}
			
			.box .pre,
			.box .next {
				width: 80px;
			}
			
			.box .noBorder{
				border: none;
				background-color: white;
			}
			
			.box input {
				height: 36px;
				width: 45px;
				border: 1px solid #ccc;
				outline: none;
			}
			
			.box button {
				width: 60px;
				height: 36px;
				background-color: #f7f7f7;
				border: 1px solid #ccc;
				
			}
		</style>
	</head>
	<body>
		<div class="box">
			<a href="#" class="pre">&lt&lt上一页</a>
			<a href="#" class="noBorder">2</a>
			<a href="#">3</a>
			<a href="#">4</a>
			<a href="#">5</a>
			<a href="#">6</a>
			<a href="#" class="noBorder">...</a>
			<a href="#" class="next">下一页&gt&gt</a>
			跳转到第
			<input type="text" name="" id="" value="" />
			页
			
			<button type="button">确定</button>
		</div>
		
	</body>
</html>
秒杀新旧价格练习

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" lang="en">
		<title></title>
		
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}
			
			.box {
				width: 160px;
				height: 24px;
				line-height: 24px;
				border: 1px solid red;
				margin: 50px auto;
			}
			
			.miaosha {
				position: relative;
				float: left;
				width: 90px;
				height: 100%;
				background-color: red;
				text-align: center;
				color: white;
				font-size: 17px;
				font-weight: 500;
				margin-right: 8px;
			}
			
			.miaosha i {
				position: absolute;
				right: 0;
				top: 0;
				
				width: 0;
				height: 0;
				border-color: transparent white transparent transparent;
				border-style: solid;
				border-width: 24px 10px 0 0;
			}
			
			.origin {
				font-size: 12px;
				color: gray;
				text-decoration: line-through;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<span class="miaosha">
				￥1000
				<i>
					
				</i>
			</span>
			<span class="origin">￥2000</span>
		</div>
	</body>
</html>
AsiaSun.
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
＜el-input＞ textarea文本域显示滚动条（超过高度就自动显示）+ ＜el-input ＞不能正常输入，输入了也不能删除的问题
qq_42192641的博客
10-07 1902
需求：首先是给定高度，输入文本框要自适应这个高度。文本超出高度就会显示滚动条否则不显示。
去除文本框边侧滚动条
嘿嘿嘿的博客
06-27 1893
有很多项目要求用IE浏览器，刚好这次解决了一个问题：去除文本框边侧的滚动条，跟大家分享一下。 此时只需要一个属性就OK了 <textarea style="overflow-y:hidden" ></textarea> 我们来看看这个属性的作用 ...
ElementUI样式优化：el-input修改样式、el-table 修改表头样式、斑马格样式、修改滚动条样式、
weixin_47194802的博客
06-28 2859
表格部分js部分添加} else {// 表格斑马自定义颜色。
html解决滚动条右下角出现的白块
qq_14810897的博客
12-27 808
css滚动条右下角出现的白块
vue element 输入框textarea设置autosize自适应高度出现滚动条问题
weixin_48624392的博客
08-17 5176
如果设置了autosize属性，rows='n'方法就不生效了，但是可以通过赋值:autosize="{ minRows: 1 maxRows: 100}"设置最小行数和最大行数。：我设置了maxRows为100，但是在谷歌和edge浏览器上输入内容不到10行就出现了滚动条，但是IE浏览器正常，没有出现滚动条；：其实autosize就是给文本框设置最小高度和高度样式来自适应。在网上查找资料之后我找到了解决方法，只要在新增一个样式就OK啦！
web-development:使用HTML，CSS和JavaScript学习现代Web开发
05-06
它是我们学习时从许多来源摘录的经整理的笔记。 您可以为材料的质量做出贡献，并采取与为开源项目做出贡献相同的步骤。 讲师 讲师 接触 A. Camariana-设计师和老师 248-8842 | Ebrima Touray -MDI的CS学生
web开发-css完整笔记
05-17
这篇“web开发-css完整笔记”涵盖了多个CSS相关的知识点，让我们逐一深入探讨。 1. **CSS背景色与前景色**：背景色可以通过`background-color`属性来设置，而前景色则是通过`color`属性来设定。例如，`background-...
CSS-X:CSS Extras 的电子学习平台。 在#Laravel 的帮助下制作
05-30
CSS Extras 的电子学习平台。 它是旧 CSS-X（Beta 1）的继承者。 随着系统的彻底检修。 什么是 CSS-X？ CSS-X 是一个由额外 CSS 实现的电子学习平台。 该平台用于上传 CSS 成员的作业并为其评分。 为什么要创建一...
Teaching-web-technologies-spring-2019-2020：核心PHP Web项目
01-30
从【压缩包子文件的文件名称列表】"teaching-web-technologies-spring-2019-2020-master"来看，这个压缩包可能包含课程的源代码、笔记、示例项目、作业和测试，供学生学习和参考。 在学习这个课程时，学生可能会学...
web--bootstrap入门基础笔记
09-26
这个"web--bootstrap入门基础笔记"是专科计算机软件设计专业大二学生在一个月内通过32节90分钟课程学习的总结，适用于从零开始学习的初学者，同时也为有一定经验的开发者提供参考。 首先，Bootstrap的核心概念是...
滚动条样式修改
s_9527_s的博客
07-29 3810
滚动条样式修改
浅谈自定义el-table的滚动条样式，各种踩坑
qq_55711325的博客
01-29 2583
自定义el-table的滚动条样式
textarea去除右下角默认样式
易函123
12-10 1344
textarea{ resize:none } textarea去除右下角默认样式
一文读懂css的相对定位【relative position】以及相对定位为什么要设置偏移量？
念兮为美
07-24 1916
一文读懂css的相对定位【relative position】以及相对定位为什么要设置偏移量？我们在开发的过程中，经常使用相对定位，但相对定位是相对谁定位，那么，它的起始位置又是什么呢？这篇文章会带你熟悉相对定位的。......
html想实现文字环绕图片,HTML/CSS实现文字环绕图片布局
weixin_29406875的博客
06-05 7154
在一个图文并茂的网页上，文字环绕图片可以使布局美观紧凑，如何实现呢？有两种办法：1.利用图片属性实现代码如下： HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图...
CSS 尺寸 (Dimension)
最新发布
lly202406的博客
09-05 402
CSS 尺寸属性是控制网页布局的关键。通过理解并有效使用这些属性，您可以创建既美观又。
从零开始：我的JaveWeb学习笔记之网页设计初探：探索 HTML 、CSS的奇妙世界（JavaWeb、HTML、CSS）
Hanbuhuic的博客
09-04 1609
HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言。它定义了网页的结构和内容，但不包括样式和行为。HTML 由一系列的元素组成，这些元素可以被浏览器识别并渲染成可视化的网页。CSS（层叠样式表，Cascading Style Sheets）是一种用于描述HTML或XML文档的样式表语言。它能够控制网页的布局、颜色、字体以及其他视觉和版式特性。CSS 允许开发者将页面的内容（HTML）与页面的表现（CSS）分离，这样可以更灵活地进行设计和维护。
CSS学习笔记：WEB开发中的样式精华
"很好的css学习笔记，pdf格式（64页），包含了CSS+DIV的学习内容，适合初学者逐步了解和掌握CSS技术。" 这篇CSS学习笔记详细介绍了CSS的基础知识，包括其起源、作用以及如何改善HTML页面的设计。CSS，即层叠样式表...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值