web前端学习10-css盒子模型

最新推荐文章于 2024-07-26 08:00:00 发布

修罗_

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量88

点赞数

分类专栏： web前端新手必看16篇文章标签： css html web

本文链接：https://blog.csdn.net/weixin_45843676/article/details/106728388

版权

web前端新手必看16篇专栏收录该内容

16 篇文章 1 订阅

订阅专栏

学习10-css盒子模型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css盒子模型</title>
		<style type="text/css">
			.div1{
				text-align: center;
				border: 1px solid red;
				background-color: #00FFFF;
				padding-top: 5%;/* 内边距-上 */
				padding-bottom: 5%;/* 内边距-下 */
				padding-left: 5%;/* 内边距-左 */
				padding-right: 5%;/* 内边距-右 */
				padding: 50px 50px 50px 50px;/* padding比上面的属性更高权重优先执行
				如果此属性只设一个值则四个方向内边距都为这个值，四个值则是左上右下顺时针方向 */
				background-clip: content-box;/* content-box设置背景色只显示在文字内容 */
				margin-top: 20px;/* 外边距与内边距类似 */
				margin-bottom: 20px;
				margin-left: 20px;
				margin-right: 20px;
				/* margin: 20px; */
			}
		</style>
	</head>
	<body>
		<div class="div1">css盒子模型</div>
	</body>
</html>

文章仅供参考

修罗_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
web前端学习10-css盒子模型

学习10-css盒子模型<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>css盒子模型</title> <style type="text/css"> .div1{ text-align: center; border: 1px solid red; background-color: #00FFFF;
复制链接

扫一扫