CSS

最新推荐文章于 2024-06-13 09:45:33 发布
最新推荐文章于 2024-06-13 09:45:33 发布
阅读量50 收藏
点赞数 1
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56706590/article/details/119981343
版权

五、解决ie6下固定定位失效问题

1.fixed

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#test{
				position: fixed;
				left: 50px;
				top: 50px;
				width: 100px;
				height: 100px;
				background: pink;
			}
		</style>
	</head>
	<body style="height: 3000px;">
		<div id="test">
			
		</div>
	</body>
</html>

2.滚动条

① html 身上永远都不会有滚动条
② 如果 html 和 body 当中只有一个有 overflow属性，那么滚动条出现在html的上一层，也就是窗口
③ 如果要让 body 身上出现滚动条，那么 html 和 body 都要有 overflow属性

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html{
				margin: 30px;
				height: 80%;
				border: 1px solid;
				overflow: hidden;
			}
			body{
				margin: 30px;
				height: 80%;
				border: 1px solid deeppink;
				overflow: auto;
			}
		</style>
	</head>
	<body>
		<div id="test" style="height: 3000px;">
		</div>
	</body>
</html>

3.禁止系统滚动条

禁止系统滚动条的做法：
① 将 html、body 都设置为 overflow:hidden
② 再声明一个元素 wrap ，充当视口
③将 wrap 元素设置为 overflow:auto，使滚动条出现在其身上

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html{
				height: 100%;
				overflow: hidden;
			}
			body{
				height: 100%;
				overflow: hidden;
			}
			#wrap{
				height: 100%;
				border: 1px solid deeppink;
				overflow: auto;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div id="test" style="height: 3000px;">
			</div>
		</div>
	</body>
</html>

4.利用绝对定位模拟固定定位

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html{
				height: 100%;
				overflow: hidden;
			}
			body{
				height: 100%;
				overflow: hidden;
			}
			#wrap{
				height: 100%;
				border: 1px solid deeppink;
				overflow: auto;
			}
			#pink{
				position: absolute;
				left: 0;
				top: 0;
				width: 200px;
				height: 200px;
				background: pink;
			}
		</style>
	</head>
	<body>
		<!-- 初始包含块: 是一个视窗大小的矩形 -->
		<div id="wrap">
			<div id="pink">
				
			</div>
			<div id="test" style="height: 3000px;">
				
			</div>
		</div>
	</body>
</html>

5.绝对定位

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#test{
				width: 200px;
				height: 200px;
				background: pink;
				position: absolute;
				left: 0;
				top: 0;
			}
		</style>
	</head>
	<body style="height: 3000px;">
		<div id="test">
			
		</div>
	</body>
</html>

四、新增UI方案

3.新增UI样式

（4）边框图片

在这里插入图片描述
① border-image-source
在这里插入图片描述
② border-image-slice
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
③ border-image-repeat
在这里插入图片描述
④ border-image-width
在这里插入图片描述
⑤ border-image-outset
在这里插入图片描述
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#test{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				width: 200px;
				height: 200px;
				border: 50px solid;
				border-image-source: url(img/border-image.png);
				border-image-slice: 33.333333%;
				border-image-repeat: round;
				border-image-width: 30px;
				border-image-outset:10px;
			}
		</style>
	</head>
	<body>
		<div id="test">
			
		</div>
	</body>
</html>

效果
在这里插入图片描述

（5）css2背景

① background-color
在这里插入图片描述
② background-image
在这里插入图片描述
③ background-repeat
在这里插入图片描述
④ background-position
在这里插入图片描述
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#test{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				width: 200px;
				height: 200px;
				background-color:pink;
				/* background-image: url(img/border-image.png),url(img/avatar.jpg); */
				background-image: url(img/avatar.jpg);
				background-repeat: no-repeat;
				background-position: 10% 10%;
				background-position: -40px -40px;
			}
		</style>
	</head>
	<body>
		<div id="test">
			
		</div>
	</body>
</html>

⑤ background-attachment
在这里插入图片描述
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#test{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				width: 200px;
				height: 200px;
				background-image: url(img/avatar.jpg);
				background-repeat: no-repeat;
				background-attachment: fixed;
				overflow: auto;
			}
		</style>
	</head>
	<body>
		<div id="test">
			哈哈<br>哈哈<br>哈哈<br>哈哈<br>哈哈<br>哈哈<br>
			哈哈<br>哈哈<br>哈哈<br>哈哈<br>哈哈<br>哈哈<br>
			哈哈<br>哈哈<br>哈哈<br>哈哈<br>哈哈<br>哈哈<br>
			哈哈<br>哈哈<br>哈哈<br>哈哈<br>哈哈<br>哈哈<br>
			哈哈<br>哈哈<br>哈哈<br>哈哈<br>哈哈<br>哈哈<br>
			哈哈<br>哈哈<br>哈哈<br>哈哈<br>哈哈<br>哈哈<br>
			哈哈<br>哈哈<br>哈哈<br>哈哈<br>哈哈<br>哈哈<br>
			哈哈<br>哈哈<br>哈哈<br>哈哈<br>哈哈<br>哈哈<br>
		</div>
	</body>
</html>
（6）css3背景

① background-origin
在这里插入图片描述
② background-clip
在这里插入图片描述
示例： 默认情况下背景图片是从 padding box 开始绘制，从 border box 开始剪裁

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#test{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				width: 300px;
				height: 300px;
				border: 50px solid rgba(0,0,0,.2);
				padding: 50px;
				background-color:pink;
				background-image: url(img/avatar.jpg);
				background-repeat: repeat;
				background-origin: padding-box;
				-webkit-background-clip: text;
				font: bold 80px/300px "微软雅黑";
				text-align: center;
				color: rgba(0,0,0,.3);
			}
		</style>
	</head>
	<body>
		<div id="test">
			哈哈
		</div>
	</body>
</html>

效果
在这里插入图片描述

③ background-size
在这里插入图片描述
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#test{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				width: 300px;
				height: 300px;
				border: 50px solid rgba(0,0,0,.2);
				padding: 50px;
				background-color:pink;
				background-image: url(img/avatar.jpg);
				background-repeat: no-repeat;
				background-origin: padding-box;
				background-clip: border-box;
				background-size: 100%;
			}
		</style>
	</head>
	<body>
		<div id="test">
			
		</div>
	</body>
</html>

效果
在这里插入图片描述

④ background
在这里插入图片描述

weixin_56706590
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS 样式优先级
08-04 2万+
什么是CSS优先级？
css投影
weixin_41824429的博客
10-08 6565
css投影
CSS表格
m0_57774967的博客
04-24 5561
一、表格边框 指定css表格边框，使用border属性 下面例子指定一个表格的th和td元素的黑色边框 html代码： css代码： 浏览器呈现效果： 注意：在上面的例子中的表格有双边框，这是因为表和th/td元素有独立的边界，为了显示一个表的单个边框，使用border-collapse属性 二、折叠边框 border-collapse属性设置表格的边框是否被折叠成一个单一的边框或隔开 html代码： css代码： ...
CSS 阴影效果
Dominic_W的博客
05-14 3万+
CSS中，通过text-shadow、box-shadow两个属性分别为文本和元素添加阴影效果。 CSS语法 box-shadow: h-shadow v-shadow blur spread color inset; 向元素添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。 h-shadow: 必需。水平阴影的位置，可以为负值 v-shadow:必需。垂直阴影的位置，可以为负值 blur:可选，阴影模糊的
CSS——rem
qq_48613863的博客
04-09 1万+
一、移动适配 1、什么是移动适配？ 答：就是当设备宽度不同的时候，网页元素的宽度和高度都要适配。 2、移动适配的两个解决方案。 rem：目前多数企业在用的解决方案; vw / vh：未来的解决方案。 两种都必须掌握！！！ 二、rem rem是移动适配的解决方案之一； rem就是一个单位； 回想之前学的单位，px不可以自动适配；百分比只能让宽自动适配，高还是要设置固定的值。 1、rem单位 是相对单位；rem单位是相对于HTML标签的字号计算结果；1rem = 1HTML字号大小。
CSS——less
qq_48613863的博客
04-09 8633
1、less简述 less就是简便书写css的工具，还是像写css那样写，只是有些比较简洁，可以写除法、选择器套选择器等等。保存.less文件，就会在同级别下自动生成.css文件。 在px单位转换到rem单位过程中，哪项工作是最麻烦的？ 答：除法运算。CSS不支持计算写法。解决方案：可以通过Less实现。 Less是一个CSS预处理器, Less文件后缀是.less； 扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力； 注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CS
CSS遮罩层
weixin_44282093的博客
07-19 9231
css遮罩层
CSS中 设置( 单行、多行 )超出显示省略号
热门推荐
明天也要努力的博客
12-05 12万+
css设置超出显示省略号可分两种情况：但使用的核心代码是一样的：需要先使用 “overflow:hidden;” 来把超出的部分隐藏，然后使用“text-overflow:ellipsis;”当文本超出时显示为省略号。 思路： 1、使用 overflow:hidden; 语句不显示超过对象尺寸的内容，就是把超出的部分隐藏了； 2、使用 -webkit-line-clamp: 行数; 语句限制显示文本的行数； 3、使用 text-overflow:ellipsis; 语句用省略号“…”隐藏超出范围的文本 说明
【CSS】滚动条样式详解
NineWaited的博客
08-21 4万+
浏览器设置滚动条样式详解
28个炫酷的纯CSS特效动画示例（含源代码）
大剑师兰特的GIS世界
01-15 1万+
CSS是网页的三驾马车之一，是对页面布局的总管家，2024年了，这里列出28个超级炫酷的CSS动画示例，让您的网站更加炫目多彩。
bootstrap.css
01-27
bootstrap的css文件
cssgrid
03-30
cssgrid
CSS钢琴
03-02
CSS钢琴
main.css:用于开发HTML5 Boilerplate CSS文件main.css的存储库
04-13
使用安装： npm install main.css并从生成的node_modules/main.css/dist文件夹中node_modules/main.css/dist所需的内容用安装： yarn add main.css并从生成的node_modules/main.css/dist文件夹中node
CSS中，设置 0.5px 会生效吗
Keep trying, keep going
06-12 339
在高分辨率屏幕（例如 Retina 屏幕）上，0.5px 的设置通常会生效，因为这些屏幕具有更高的像素密度，可以显示更细的细节。在这些设备上，1 个 CSS 像素可能对应多个设备像素，因此可以实现 0.5px 的效果。，因为这些屏幕的像素密度较低，可能无法精确地显示半个像素的大小。在这种情况下，浏览器会对 0.5px 的值进行。在 CSS 中，设置 0.5px 是有效的，浏览器会尝试渲染出这种细微的大小差异。然而，在低分辨率屏幕上，0.5px 的设置可能无法完美呈现。
CSS 列表样式（ul）全面解析
2401_83810323的博客
06-11 230
属性用于定义列表项的标记类型。常见的值包括disc（实心圆）、circle（空心圆）、square（方块）以及none（无标记）。此外，也可以使用decimal（十进制数字）、（小写字母）、（大写罗马数字）等来生成不同的编号效果。ul {/* 方块标记 */ol {/* 大写罗马数字 */
HOW - CSS 常见效果实现
weixin_58540586的博客
06-11 886
常见 CSS 效果实现总结。
px转rem插件postcss-plugin-px2rem使用方法（浏览器缩放页面自适应）
最新发布
x_XDGS的博客
06-13 426
浏览器缩放自适应，px转rem，postcss-plugin-px2rem插件
css
06-02
CSS（Cascading Style Sheets）是一种用于描述网页样式和排版的语言。通过 CSS，我们可以将网页内容和样式分离开来，从而使得网页的结构和样式更加清晰易于维护。 CSS 由三个部分组成： 1. 选择器（Selector）：...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值