Blogger Information
Blog 37
fans 0
comment 0
visits 21209
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
前端第四课:盒模型与背景控制-PHP培训九期线上班
渡劫小能手
Original
582 people have browsed it

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

1、width:设置盒子的宽度

2、height:设置盒子的高度

3、border:设置盒子的边框属性,包括是否显示边框,边框线的种类、颜色

4、background:背景

5、padding:内边距,设置盒子边框与内容之间的距离

6、margin:外边距,设置盒子边框与外部元素之间的距离

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

1、没有设置box-sizing:border-box,width/height=content

2、设置了box-sizing:border-box,width/height=content+padding+border

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

同级盒子之间,同时添加外边距,并未出现想象中的边距叠加,而是出现了外边距的合并, 这种现象,  也叫外边距的塌陷
二个盒子之间的间距, 最终由以较大值确定

 

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外边距的塌陷</title>
</head>
<style>
    div {
        box-sizing: border-box;
    }
    .box1 {
        width: 100px;
        height: 100px;
        background-color: lightblue;
        margin-bottom: 20px;
    }
    .box2{
        width: 150px;
        height: 150px;
        background-color: lightpink;
        margin-top: 30px;
    }
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>

运行实例 »

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

2019-11-04_154240.jpg

2019-11-04_154839.jpg

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

1、当父盒子不设置边框时,设置子盒子的margin上边距,会发生子盒子上边距传递到父盒子上

2、解决方法:给父盒子设置padding内边距,或者给父盒子设置边框

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景颜色的线性渐变的</title>
    <style>
        .box {
            border: 1px solid gray;
            width: 450px;
            height: 500px;
            box-sizing: border-box;
        }
        .box {
            /*从蓝到白, 默认从上到下方向渐变*/
            background: linear-gradient(green, white);

            /*!*向右渐变*!*/
            /*background: linear-gradient(to right,green, white);*/

            /*!*向左渐变*!*/
            /*background: linear-gradient(to left,green, white);*/

            /*!*向上渐变*!*/
            /*background: linear-gradient(to top,green, white);*/

            /*!*向右下方渐变*!*/
            /*background: linear-gradient(to right bottom,green, white);*/

            /*!*角度渐变*!*/
            /*background: linear-gradient(30deg,green, white);*/

            /*!*可连续设置多种颜色的渐变效果, 很少用到*!*/
            /*background: linear-gradient(red, green, blue, white);*/
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

运行实例 »

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

2019-11-04_161304.jpg

2019-11-04_165154.jpg

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            border: 1px solid gray;
            width: 450px;
            height: 500px;
            box-sizing: border-box;
        }
        .box {
            /*设置背景图片*/
            background-image: url("../images/dog.jpg");

            /*设置背景重复: repeat, no-repeat, repeat-x, repeat-y*/
            background-repeat: no-repeat;

            /*设置背景图片的位置: 水平, 垂直*/
            /*支持关键字设置*/
            /*background-position: center center;*/
            /*background-position: left center;*/
            /*background-position: right bottom;*/
            /*支持数值或百分比*/
            /*background-position: 75px 75px; !* 水平垂直居中 *!*/
            background-position: 50% 50%;

            /*设置背景图片的大小*/
            /*图片拉伸等比例填充,完全覆盖盒子,比例不同可能会有部分图片内容被隐藏*/
            background-size: cover;
            /*图片完全填充, 比例不同,盒子可能会出现空白区域*/
            /*background-size: contain;*/
        }

        
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

运行实例 »

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

2019-11-04_170506.jpg

2019-11-04_170715.jpg

七、总结

学习了CSS的盒子模型,内外边距的控制,同级盒子外边距的塌陷,子盒子margin上边距的传递,渐变颜色和背景的控制。

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