Blogger Information
Blog 27
fans 2
comment 0
visits 19611
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
盒模型与背景控制---PHP九期线上班
一丁
Original
663 people have browsed it

1.默写盒模型的全部属性,并准确说出他们的应用场景

image.png


2. `box-sizing`: 解决了什么问题, 不用它应该如何处理

设置box-sizing,就算设置了padding,margin,border,盒子模型都不会改变大小。如果不用box-sizing,就需要计算padding,margin,border的像素。


3.盒子外边距之的合并是怎么回事,并实例演示


div2设置了padding:10px;后,dive2上下左右都会增加10px。

实例

<!DOCTYPE html>
<html>
<head>
	<title>盒子外边距的合并是怎么回事,并实例演示</title>
	<style>
		.div1{
			background: green;
			width: 300px;
			height: 300px;
			border: 1px solid black;

		}
		.div2{
			width: 150px;
			height: 150px;
			background: orange;
			padding: 10px;
		}
	</style>
</head>
<body>
<div class="div1">
	<div class="div2"></div>
</div>
</body>
</html>


手写代码:

image.png


运行实例 »

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

运行结果图:

image.png


4.嵌套盒子之间内边距与外边距的表现有何不同, 如何处理

嵌套盒子内边距是盒子内增加的像素,外边距是外部增加的像素,如果设置了背景颜色,内边距的像素也会变成对应颜色,外边距则是透明,只会看到盒子改变了对应像素的位置。


5.实例演示: 背景颜色的线性渐变的

实例

<!DOCTYPE html>
<html>
<head>
	<title>实例演示: 背景颜色的线性渐变的</title>
	<style>
		div{
			width: 300px;
			height: 300px;
			background:linear-gradient(to top,green,blue);
		}
	</style>
</head>
<body>
<div></div>
</body>
</html>

运行实例 »

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



运行结果图:

image.png

主要代码部分:

image.png


6.背景图片的大小与位置的设定

background-size可以设置图片大小,可以是固定像素,可以%,background-position可以设置图片位置,

实例

<!DOCTYPE html>
<html>
<head>
	<title>背景图片大小与位置</title>
	<style>
		.div1{
			width: 300px;
			height: 300px;
			border: 10px solid orange;
			
		}
		.div2{
			width: 100%;
			height: 100%;
			background:url("images/cat.png") repeat-y;
			background-size: 80%;
			background-position: center;
		}
	</style>
</head>
<body>
<div class="div1">
	<div class="div2"></div>
</div>
</body>
</html>

运行实例 »

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


运行结果图:

image.png


主要代码部分:

image.png

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