【慕课网】前端零基础入门---步骤二：页面化妆师CSS---03-盒子模型

最新推荐文章于 2024-04-22 13:50:02 发布

dqh_zsh

最新推荐文章于 2024-04-22 13:50:02 发布

阅读量187

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_43405634/article/details/103969008

版权

03-盒子模型

第1章盒子模型的概念

在这里插入图片描述

第2章盒子模型属性

2-1 width属性

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<style type="text/css">
		div{width: 600px;background: pink;}
		.one{width: 50%;background: yellow;}
		.two{max-width: 30%;background: yellow;}
		.three{min-width: 70%;background: yellow;}
	</style>
</head>
<body>
	<div>
		<p class="one">第一个p标签是父元素宽度的50%</p>
		<p class="two">第二个p标签的最大宽度是父元素的30%</p>
		<p class="three">第三个p标签的最小宽度是父元素的70%</p>
	</div>
</body>
</html>

2-2 height属性

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<style type="text/css">
		div{width: 600px;background: pink;height: 600px;}
		.one{width: 30%;background: yellow;height: 30%;}
		.two{max-width: 30%;background: yellow;max-height: 30%;}
		.three{max-width: 300px;background: yellow;min-height: 200px;}
	</style>
</head>
<body>
	<div>
		<p class="one">第一个p标签是父元素宽、高的30%</p>
		<p class="two">第二个p标签的最大宽度是父元素的30%，最大高度是父元素的30%</p>
		<p class="three">第三个p标签的最小高度是200px，最大宽度是300px</p>
	</div>
</body>
</html>

2-3 哪些元素可设置width和height属性

在这里插入图片描述

2-4 border边框属性

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<style type="text/css">
		li{width: 200px;height: 50px;}
		.li1{border-top: 2px red solid;}
		.li2{border-right: 2px green dotted;}
		.li3{border-bottom: 2px blue dashed;}
		.li4{border-left: 3px purple double;}
		.li5{border: 2px orange solid;}
	</style>
</head>
<body>
	<ul>
		<li class="li1">第一个li</li>
		<li class="li2">第二个li</li>
		<li class="li3">第三个li</li>
		<li class="li4">第四个li</li>
		<li class="li5">第五个li</li>
	</ul>
</body>
</html>

2-5 padding填充属性

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<style type="text/css">
		.container{
			width: 200px;
			height: 200px;
			background-color: pink;
			padding-top: 50px;
			padding-left: 100px;
		}
		.content{
			width: 100px;
			height: 100px;
			background-color: orange;
			padding-top: 30px;
			padding-left: 30px;
			padding-right: 30px;
		}
		span{background-color: yellow;}
	</style>
</head>
<body>
	<div class="container">
		<div class="content">
			<span>我是span元素</span>
		</div>
	</div>
</body>
</html>

2-6 margin外边距属性

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		ul{
			list-style: none;
			width: 300px;
			height: 400px;
			background-color: pink;
			padding-top: 80px;
			padding-left: 40px;
		}
		li{
			width: 200px;
			height: 50px;
			background-color: yellow;
		}
		.one,.two{margin-top: 40px;}
	</style>
</head>
<body>
	<ul>
		<li>HTML</li>
		<li class="one">CSS</li>
		<li class="two">JavaScript</li>
	</ul>
</body>
</html>

2-7 盒子计算

在这里插入图片描述

第3章盒子模型的应用

3-1 display属性

在这里插入图片描述

3-2 编程练习

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<style type="text/css">
		ul{width: 200px;}
		li{display: none;}
		ul:hover li{display: inline-block;}
	</style>
</head>
<body>
	<ul>
		<h2>家电</h2>
		<li>冰箱</li>
		<li>空调</li>
		<li>洗衣机</li>
	</ul>
</body>
</html>

3-3 编程练习

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<style type="text/css">
		body,div,.div1,.div2,.div3,.elec,.wash,.clothes,h3,li{margin: 0;padding: 0;}
		.big{
			width: 110px;
			margin: auto;
			border: 1px #CCCCCC solid;
		}
		.div1,.div2,.div3{
			border-bottom: 1px #AAAAAA solid;
		}
		h3{
			background-color: #CCCCCC;
			text-align: center;
			padding-top: 2px;
			padding-bottom: 2px;
		}
		li{
			list-style: none;
			margin-bottom: 6px;
			margin-top: 6px;
			display: none;
		}
		.elec,.wash,.clothes{
			background-color: #FFFFFF;
			padding-left:38px;
		}
		.div1:hover .elec li{display: block;}
		.div2:hover .wash li{display: block;}
		.div3:hover .clothes li{display: block;}
	</style>
</head>
<body>
	<div class="big">
		<div class="div1">
			<h3>家电</h3>
			<ul class="elec">
				<li>冰箱</li>
				<li>洗衣机</li>
				<li>空调</li>
			</ul>
		</div>
		<div class="div2">
			<h3>洗护</h3>
			<ul class="wash">
				<li>洗衣液</li>
				<li>消毒液</li>
				<li>柔顺剂</li>
			</ul>
		</div>
		<div class="div3">
			<h3>衣物</h3>
			<ul class="clothes">
				<li>衬衫</li>
				<li>裤子</li>
				<li>卫衣</li>
			</ul>
		</div>
	</div>
</body>
</html>

dqh_zsh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【慕课网】前端零基础入门---步骤二：页面化妆师CSS---03-盒子模型

01-CSS选择的艺术第1章 CSS基础语法1-1 CSS基础语法1-2 CSS使用方法1-3 CSS使用方法优先级第2章 CSS选择器2-1 选择器（标签选择器和类选择器）2-2 选择器（ID选择器）2-3 群组选择器和全局选择器2-4 css后代选择器2-5 伪类选择器第3章 CSS继承、层叠和优先级3-1 CSS继承和层叠3-2 css选择器优先级3-3 css权...
复制链接

扫一扫

【慕课网】前端零基础入门---步骤二：页面化妆师CSS---03-盒子模型

03-盒子模型

第1章 盒子模型的概念

第2章 盒子模型属性

2-1 width属性

2-2 height属性

2-3 哪些元素可设置width和height属性

2-4 border边框属性

2-5 padding填充属性

2-6 margin外边距属性

2-7 盒子计算

第3章 盒子模型的应用

3-1 display属性

3-2 编程练习

3-3 编程练习

“相关推荐”对你有帮助么？

第1章盒子模型的概念

第2章盒子模型属性

第3章盒子模型的应用