CSS的盒模型

最新推荐文章于 2024-06-22 17:15:40 发布

Quietw

最新推荐文章于 2024-06-22 17:15:40 发布

阅读量154

点赞数

分类专栏：前端 HTML/CSS

本文链接：https://blog.csdn.net/Mr_Quiet/article/details/82012556

版权

前端同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

HTML/CSS

6 篇文章 0 订阅

订阅专栏

标准盒模型

标准盒模型的大小=设置的witdh+padding+border+margin。

margin:0 auto;标签居中。

margin有合并的现象，当一个块级元素（如div）在另一个块级元素上面时，两个元素下边距与上边距会发生合并，并且保留最大值。

怪异盒模型（CSS3）

怪异盒模型的大小=设置的witdh+margin，设置的padding和border会挤掉标签的内容。

css3有box-sizing，有content-box和border-box两种属性，后者设置怪异盒模型。

伸缩盒模型flexbox（CSS3）

http://www.runoob.com/w3cnote/flex-grammar.html

设置弹性盒模型后，float，clear，vertical-align不起作用。

父元素设置display:flex

子元素可以设置flex-grow设置均分

justify-content设置左右对齐

flex-direction设置正序逆序，以及横竖排。

<!--html5-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link href="img/" rel="icon" type="image/icon"/>
		<link rel="stylesheet" type="text/css" href=""/>
		<title></title>
		<style type="text/css">
			* {margin: 0;padding: 0;}
			#nav {display: flex;background: #000;min-width: 400px;justify-content: flex-end;/* flex-direction: column-reverse; */}
			#nav li{list-style-type: none;height: 20px;width: 80px;/* flex-grow: 1; */text-align: center;padding:2px;margin:2px;background: #fff;}
			#nav li:hover{color: cadetblue;}
			
		</style>
	</head>
	<body>
		<header>
			<nav id="nav">
					<li>登录</li>
					<li>注册</li>
					<li>查看购物车</li>
					<li>关于我们</li>
				</ul>
			</nav>
		</header>
	</body>
</html>