博客列表 >1031作业

1031作业

無雙ヾ
無雙ヾ原创
2019年11月01日 13:11:09898浏览

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

content(width,height)内容

border边框

margin外边距

padding内边距

background背景

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

box-sizing可以清除内边距和边框对于盒子大小的影响。如果不用可以使用总宽度=内边距+内容+边框为盒子宽度

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

盒子外边距合并是,当一个盒子的下边距和同级盒子的上边距都有值得时候,将会取值比较大的准。

 

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子外边距之的合并是怎么回事,并实例演示 </title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: lawngreen;

        }
        .box2{
            width: 150px;
            height: 150px;
            background-color: lightsalmon;
        }
        .box1{
            margin-bottom: 30px;
        }
        .box2{
            margin-top: 50px;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>

运行实例 »

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

360截图20191101124239698.jpg

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

嵌套盒子之间盒子边距处理。给子盒子添加外边距时,外边距将直接叠加在父盒子上。如果要给子盒子设置外边距。则可使用父盒子的内边距来实现。

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实例演示: 背景颜色的线性渐变的</title>
    <style>
        .box1{
            width: 400px;
            height: 300px;
            background:linear-gradient(green,yellow,white);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

运行实例 »

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

360截图20191101125116420.jpg

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这例演示: 背景图片的大小与位置的设定</title>
    <style>
        .box1{

            width: 600px;
            height: 600px;
            /*默认重复平铺*/
            /*background: url("https://img.php.cn/upload/avatar/000/082/543/5dba8cfda79e7484.jpg");*/
            /*不平铺*/
            background: url("https://img.php.cn/upload/avatar/000/082/543/5dba8cfda79e7484.jpg") no-repeat;
            /*横向平铺*/
            /*background: url("https://img.php.cn/upload/avatar/000/082/543/5dba8cfda79e7484.jpg") repeat-x;*/
            /*纵向平铺*/
            /*background: url("https://img.php.cn/upload/avatar/000/082/543/5dba8cfda79e7484.jpg") repeat-y;*/
            /*纵向平铺*/
            /*background: url("https://img.php.cn/upload/avatar/000/082/543/5dba8cfda79e7484.jpg") 50% 50%;*/
            /*水平垂直居中*/
            /*background-position: 50% 50%;*/
            /*等比例缩放*/
            /*background-size: cover;*/
            /*完全填充,有可能显示不全,*/
            /*background-size: contain;*/
            background-color: lavender;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

运行实例 »

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

 360截图20191101131042577.jpg

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