博客列表 >盒模型与背景控制-PHP九期线上班

盒模型与背景控制-PHP九期线上班

老袁
老袁原创
2019年11月01日 11:15:29512浏览

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

width: 宽度

height: 高度

background: 背景

padding: 内边距

border: 外框

margin: 外边距

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

box-sizing解决div盒子被撑爆影响其他盒子的问题。不用它需要不断调整盒子宽高及边距解决。

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子外边距之的合并是怎么回事,并实例演示 *</title>
    <link rel="stylesheet" href="work1.css">
</head>
<body>

<div class="box1"></div>
<div class="box2"></div>

</body>
</html>

运行实例 »

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

实例

.box1{
    width: 100px;
    height: 100px;
    background-color: green;
    margin-bottom: 20px;
}
.box2{
    width: 150px;
    height: 150px;
    background-color: cadetblue;
    margin-top:50px;
}
/**两个平级盒子会发生叠加/也叫外边距的塌陷*/

运行实例 »

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

work1.jpg

1.JPG

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

嵌套盒子用padding来处理边距,而外边距则是margin。

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="work3.css">
    <title> 实例演示: 背景颜色的线性渐变的 </title>
</head>
<body>
<div class="box"></div>
</body>
</html>

.box {
    width: 300px;
    height: 300px;
    background: linear-gradient(yellow,white);
}

运行实例 »

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

work3.jpg

3.JPG

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="work4.css">
    <title>背景图片的大小与位置的设定</title>
</head>
<body>
<div class="box"></div>
</body>
</html>

.box {
    width: 450px;
    height: 500px;
}
.box {
    background-color: lightgreen;
    background-image: url("1.jpg");
    background-repeat: no-repeat;
    background-position: center center;
}

运行实例 »

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

work4.jpg

4.JPG

总结

1.在css开始,记得写box-sizing属性,防止div撑爆变形.

2.padding是内,margin是外.

3.margin垂直合并取最大值.

4.padding,margin简写是上右下左顺时针顺序,如只有2,3个简写,则第二个是左右,第一个是上或上下.

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议