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

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

Angel-Wind
Angel-Wind原创
2019年11月01日 18:45:59507浏览

        通过学习盒模型,了解到盒模型对于布局来说是非常重要的。而背景的控制可以进一步美化布局,让整个网页多姿多彩。下面就盒模型与背景控制做一下总结。


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

        width:内容的宽度,height: 内容的高度,padding:内边距,边框到内容的距离,border: 边框,就是指的盒子的宽度  margin:外边距,盒子边框到附近最近盒子的距离


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

        `box-sizing`: 解决了内边距与边框对盒子大小的影响问题。不用它应该要把内边距加边框加内容才是盒子的大小。


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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外边距对盒子位置的影响</title>
    <style>
        .box1{
            width: 150px;
            height: 150px;
            background-color: lawngreen;
            margin-bottom: 20px;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: lightcoral;
            margin-bottom: 50px;
        }
    </style>
</head>
<body>
<!--同级关系: 外边距合并-->
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>

运行实例 »

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


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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外边距对盒子位置的影响</title>
    <style>
        .box1{
            width: 300px;
            height: 300px;
            background-color: lawngreen;
            padding-top: 50px;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: lightcoral;
            /*塌陷现象,解决方法:在父级用padding-top*/
            /*margin-top: 50px;*/
        }
    </style>
</head>
<body>
<!--嵌套关系: -->
<!--1. 外边距由内向外传递-->
<div class="box1">
    <div class="box2"></div>
</div>
</body>
</html>

运行实例 »

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


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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>线性渐变</title>
    <style>
        .box{
            width: 400px;
            height: 500px;
            border: 1px solid gray;
            /*向右下方渐变,从红到白*/
            background: linear-gradient(to right bottom,red,white);
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

运行实例 »

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


6. 这例演示: 背景图片的大小与位置的设定

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>线性渐变</title>
    <style>
        .box{
            width: 400px;
            height: 500px;
            border: 1px solid gray;
            /*设置背景图片*/
            background-image: url("../images/girl.jpg");
            /*设置背景不重复*/
            background-repeat: no-repeat;
            /*设置背景图片的位置*/
            background-position: left center;
            /*设置背景图片的大小*/
            background-size: cover;
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

运行实例 »

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


上述代码和总结中涉及知识点注释总结:

1.盒模型的基本特征

2.内边距与边框对盒子大小的影响

3.外边距对盒子位置的影响

4.背景控制的知识

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