简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 盒模型练习----2019年1月14日23时59分
Blogger Information
Blog 4
fans 0
comment 0
visits 2423
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
盒模型练习----2019年1月14日23时59分
aptx_1999的博客
Original
545 people have browsed it

通过盒模型，了解内边距、边框等概念

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>一切可见元素都是盒子</title>
	<style>
		.box1{
			width: 200px;
			height: 200px;
			background-color: lightgreen;
			/*设置内边距*/
			/*padding-top: 10px;
			padding-right: 20px;
			padding-bottom: 30px;
			padding-left: 40px;*/
			/*简写*/
			padding: 10px 20px 30px 40px;
			/*如果左右边距都是30px，上下边距分别为10px 40px*/
			padding: 10px 30px 40px;
			/*如果左右边距为30px 上下为40px*/
			padding: 40px 30px;
			/*设置边框 上边框*/
			/*border-top: 10px;
			border-top-style: solid;
			border-top-color: red;*/
			/*简写*/
			border-top: 10px solid red;
			/*设置边框 右边框*/
			/*border-right: 10px;
			border-right-style: dashed;
			border-right-color: blue;*/
			/*简写*/
			border-right: 10px dashed blue;
			/*设置边框 下边框*/
			/*border-bottom: 10px;
			border-bottom-style: dotted;
			border-bottom-color: yellow;*/
			/*简写*/
			border-bottom: 10px dotted yellow;
			/*设置边框 左边框*/
			/*border-left: 10px;
			border-left-style: double;
			border-left-color: pink;*/
			/*简写*/
			border-left: 10px double pink;
			/*如果边框都一样*/
			border: 10px solid red;
		}	

		.box2{
			height: inherit; /*继承父级*/
			background-color: lightgrey;
		}
	</style>
</head>
<body>
	<div class="box1">
		<div class="box2"></div>
	</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

以上代码涉及知识点总结：

一.内边距padding,按上右下左设置.如padding:10px 20px 30px 40px;

二.如果padding左右为30px，上为10px，下为40px，写法padding:10px 30px 40px;

三.如果padding左右为30px，上下为40px，写法padding:30px 40px;

四.边框border写法border:大小 样式 颜色;如border:10px solid red;

五.继承父级:inherit

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！