CSS知识点：属性、定位、浮动-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_70314704/article/details/139347686

CSS常用属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			p {
				font-family: 'Courier New', Courier, monospace;
				/* 设置字体 */
				font-size: 50px;
				/* 设置字体大小 */
				font-style: italic;
				/* 设置字体风格 */
				font-weight: 100px;
				/* 设置字体粗细 */
				color: white;
				/* 设置字体颜色 */

				background-color: red;
				/* 设置背景颜色 */

				letter-spacing: 20px;
				/* 设置文本间距 */
				text-decoration: underline;
				/* 设置划线 */
				text-align: center;
				/* 设置文本对齐方式 */

				border: black 10px solid;
				/* 设置边框颜色、粗细、样式 */
			}

			p#p2 {
				background-image: url(../img/hyg.jpg);
				/* 设置背景图片 */
			}

			button {
				background-image: url(../img/hyg.jpg);
				/* 设置背景图片 */
				width: 500px;
				/* 设置宽度 */
				height: 500px;
				/* 设置高度 */
				background-repeat: repeat-y;
				/* 设置平铺方向 */
			}
		</style>
	</head>
	<body>
		<p>这是一个标签</p>
		<p id="p2">这是另一个标签</p>
		<button>这是一个按钮</button>
	</body>
</html>

CSS盒子模型

效果图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 内外边距可以通过
			 margin:30px
			 margin-top\margin-bottom\margin-left\margin-right:30px
			 margin:30px 30px 30px 30px
			 三种方式设置
			 */
			div#div1 {
				border: red 5px solid;

				margin: 30px;
				/* 设置上下左右外边距 */
				padding: 20px;
				/* 设置上下左右内边距 */
			}

			div#div2 {
				border: blue 5px solid;

				margin: 30px;
				/* 设置上下左右外边距 */
				padding: 20px;
				/* 设置上下左右内边距 */
			}

			div#div3 {
				border: green 5px solid;

				width: 200px;
				/* 设置宽度 */
				height: 200px;
				/* 设置高度 */

				margin: 0 auto;
				/* 居中显示 */
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<div id="div2">
				这是一个双层的盒子
			</div>
		</div>
		<div id="div3">这是另一个盒子</div>
	</body>
</html>

CSS定位

常用的定位方式有：相对定位、绝对定位、固定定位

都是由position来控制

相对定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#manager {
				border: orange 1px solid;
				margin-top: 80px;
			}

			#box01 {
				border: red 1px solid;
				width: 100px;
				height: 100px;
			}

			#box02 {
				border: green 1px solid;
				width: 100px;
				height: 100px;

				position: relative;
				/*相对定位：保留原有位置，针对于原有位置进行位移*/
				top: 50px;
				left: 50px;

			}

			#box03 {
				border: blue 1px solid;
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>

		<div id="manager">
			<div id="box01"></div>
			<div id="box02"></div>
			<div id="box03"></div>
		</div>

	</body>
</html>

绝对定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#manager {
				border: orange 1px solid;
				margin-top: 80px;
			}

			#box01 {
				border: red 1px solid;
				width: 100px;
				height: 100px;
			}

			#box02 {
				border: green 1px solid;
				width: 100px;
				height: 100px;

				position: absolute;
				/*相对定位：不保留原有位置，
				会寻找父标签是否有position属性，如果有，相对于父标签，
				如果没有，继续向上寻找，直到body标签
				*/
				top: 50px;
				left: 50px;

			}

			#box03 {
				border: blue 1px solid;
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>

		<div id="manager">
			<div id="box01"></div>
			<div id="box02"></div>
			<div id="box03"></div>
		</div>

	</body>
</html>

固定定位

固定定位是将某一元素固定在页面的某一位置，常用于页面中的一键置顶、回到首页等固定操作

<!DOCTYPE html>
<html><!-- 根标签 -->
	<head>
		<meta charset="utf-8" /><!-- 编码格式 -->
		<title></title><!-- 标签页title -->
		<style>
			button {
				position: fixed;
				/* 固定定位，将元素固定在页面某一位置 */
				top: 90%;
				left: 90%;
			}
		</style>
	</head>
	<body>

		<button>
			<a href="#top">置顶</a>
		</button>

		<a href="top"></a>
		<a href="#news01">国内新闻</a>
		<a href="#news02">国际新闻</a>
		<a href="#news03">娱乐新闻</a>

		<a name="news01"></a>
		<h1>国内新闻</h1>
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<a name="news02"></a>
		<h1>国际新闻</h1>
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<a name="news03"></a>
		<h1>娱乐新闻</h1>
		</dl>
	</body>
</html>

浮动

一般浮动分为左浮动（flex:left）和有浮动（flex:rught），如果需要铺满，则可以通过宽度（width）和高度（height）控制

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#manager {
				border: orange 1px solid;
			}

			#box01 {
				border: red 1px solid;
				width: 100px;
				height: 100px;

				float: left;
				/* 左浮动 */
			}

			#box02 {
				border: green 1px solid;
				width: 100px;
				height: 100px;

				float: left;
				/* 左浮动 */
			}

			.clear {
				clear: both;
				/*让同级别的标签回归普通流*/
			}
		</style>
	</head>
	<body>

		<div id="manager">
			<div id="box01"></div>
			<div id="box02"></div>
			<div class="clear"></div>
		</div>

	</body>
</html>

拓展

阴影、圆角（常用于制作好看的图片展示、消息展示、头像等）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body {
				background: url(../img/渐变色.jpg) center top repeat-x #EAF4FF;
				/* 使用 渐变图片 添加背景时 */
				/* 居中显示	 从顶部开始	横向平铺	 如果背景图像不可用或无法加载，浏览器将使用此颜色作为背景*/
			}

			button {
				width: 100px;
				height: 50px;
				color: white;
				font-weight: bolder;
				background-color: orange;
				border-radius: 5px;
				/*圆角属性*/
				box-shadow: 10px 10px 5px gainsboro;
				/*添加按钮阴影 X轴偏移量 Y轴偏移量 阴影模糊半径*/
				text-shadow: 5px 5px 5px black;
				/*添加文本阴影 X轴偏移量 Y轴偏移量 阴影模糊半径*/
			}

			img {
				width: 100px;
				height: 100px;
				border-radius: 50%;
			}
		</style>
	</head>
	<body>

		<button>普通按钮</button>
		<br />
		<img src="../img/avatar.jpg" />

	</body>
</html>
or: orange;
				border-radius: 5px;
				/*圆角属性*/
				box-shadow: 10px 10px 5px gainsboro;
				/*添加按钮阴影 X轴偏移量 Y轴偏移量 阴影模糊半径*/
				text-shadow: 5px 5px 5px black;
				/*添加文本阴影 X轴偏移量 Y轴偏移量 阴影模糊半径*/
			}

			img {
				width: 100px;
				height: 100px;
				border-radius: 50%;
			}
		</style>
	</head>
	<body>

		<button>普通按钮</button>
		<br />
		<img src="../img/avatar.jpg" />

	</body>
</html>