HTML5

77不吃香菜.

于 2023-12-21 10:53:45 发布

阅读量343

点赞数 11

文章标签： html5 前端 html

本文链接：https://blog.csdn.net/luna_H/article/details/135125653

版权

1.标准盒子模型
box-sizing:content-box;
2.IE盒子模型||怪异盒子模型
box-sizing: border-box;

flex 属性用于指定弹性子元素如何分配空间

flex-direction 属性指定了弹性子元素在父容器中的位置

lex-direction: row | row-reverse | column | column-reverse
       row横向从左到右排列（左对齐），默认的排列方式。
       row-reverse 反转横向排列（右对齐，从后往前排，最后一项排在最前面。
       column 纵向排列
       column-reverse 反转纵向排列，从后往前排，最后一项排在最上面。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.box1 {
				width: 300px;
				height: 200px;
				background-color: pink;
				box-sizing: content-box;
			}
			.box2 {
				width: 300px;
				height: 200px;
				padding: 200px;
				background-color: orange;
				box-sizing: border-box;
				/* display: none;
				display: block;
				display: inline;
				display: inline-block;
				display: table; */
			}
			.boss {
				width: 400px;
				height: 200px;
				border: 1px solid red;
				display: flex;
				flex-direction: column;
			}
			.boxx1 {
				width: 100px;
				height: 100px;
				background-color: pink;
				/* flex: 2; */
			}
			.boxx2 {
				width: 100px;
				height: 100px;
				background-color: orange;
				/* flex: 8; */
			}
			.boxx3 {
				width: 100px;
				height: 100px;
				background-color: green;
				/* flex: 2; */
			}
		</style>
	</head>
	<body style="height: 2000px;">
		<!-- 1.标准盒子模型
		box-sizing:content-box;
		2.IE盒子模型||怪异盒子模型
		box-sizing: border-box;
		 -->
		<div class="box1"></div>
		<div class="box2"></div>
		<!-- flex 属性用于指定弹性子元素如何分配空间 -->
		<!-- flex-direction 属性指定了弹性子元素在父容器中的位置 -->
		<!-- flex-direction: row | row-reverse | column | column-reverse
		 row横向从左到右排列（左对齐），默认的排列方式。
		 row-reverse  反转横向排列（右对齐，从后往前排，最后一项排在最前面。
		 column  纵向排列
		 column-reverse  反转纵向排列，从后往前排，最后一项排在最上面。
			-->
		<div class="boss">
			<div class="boxx1">1111111</div>
			<div class="boxx2">2222222</div>
			<div class="boxx3">3333333</div>
		</div>
	</body>
</html>