透明度，margin为负数的应用，圣杯布局，倒三角

最新推荐文章于 2023-08-19 17:02:38 发布

boxyuan

最新推荐文章于 2023-08-19 17:02:38 发布

阅读量510

点赞数

分类专栏： Html+CSS 文章标签： css html ui 前端

本文链接：https://blog.csdn.net/boxyuan/article/details/76577870

版权

Html+CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

如果定位的盒子没有宽高，那么默认宽高为0
如果给子盒子设置宽度为100%，那么这个子盒子的宽与父盒子一样宽
透明度：opacity，取值0-1之间的小数

margin为负数的应用

如果margin-left设置为负数，那么将来这个盒子会像左方向移动

如果margin-right设置为负数，那么盒子向右移动

圣杯布局

左右两边内容保持不变，中间内容根据浏览器大小而改变

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>圣杯</title>
		<style>
				.content
				{
					height: 200px;
					padding: 0 200px;
					
				}
				.center
				{
					height: 200px;
					width: 100%;
					min-width: 200px;
					background-color: lemonchiffon;
					float: left;
				
				}
				.left
				{
					height: 200px;
					width: 200px;
					background-color: lightcyan;
					margin-left: -200px;
					float: left;
				}
				.right
				{
					height: 200px;
					width: 200px;
					background-color:pink;
					margin-right: -200px;
					float:left;
				}
		</style>
	</head>
	<body>
		<div class="content">
				<div class="left"></div>
				<div class="center"></div>
				<div class="right"></div>
		</div>
		
	</body>
</html>

倒三角

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div
			{
				position: relative;
			}
			span
			{
				top: 5px;
				position: absolute;
				height: 0;
				width: 0;
				display: inline-block;
				border-color:orange transparent transparent transparent;
				border-width:5px;
				border-style:solid solid solid solid;  
			}
		</style>
	</head>
	<body>
		<div>这是一个三角<span></span></div>
	</body>
</html>

boxyuan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
透明度，margin为负数的应用，圣杯布局，倒三角

如果定位的盒子没有宽高，那么默认宽高为0如果给子盒子设置宽度为100%，那么这个子盒子的宽与父盒子一样宽透明度：opacity，取值0-1之间的小数margin为负数的应用如果margin-left设置为负数，那么将来这个盒子会像左方向移动如果margin-right设置为负数，那么盒子向右移动圣杯布局左右两边内容保持不变，中间内容根据浏览器大小而改变圣杯
复制链接

扫一扫