CSS基础----背景样式与盒子模型

最新推荐文章于 2024-10-10 11:01:57 发布

原创最新推荐文章于 2024-10-10 11:01:57 发布 · 481 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

笔记

本文介绍了CSS的背景样式，包括背景颜色、背景透明度、背景图片、平铺、位置及图片固定等属性，并详细讲解了盒子模型，涉及外边距、边框和内边距的概念及其对元素布局的影响。最后提到了实践中的应用。

在我们的编程过程中,经常不光会使用到设置字体样式,还会用到设置背景颜色,背景图片等样式,今天我们就来学习一下关于背景的样式设置

CSS的背景样式:

1.背景颜色: background-color: 颜色 这个属性我们为我们的标签设置背景颜色,其中我们有三种属性值的书写方式: 1. 预定义的颜色表示(red,blue,green,black…) 2.十六进制表示(#ff0000) 3.RGB代码表示：rgb(0,0,0) 而在我们实际开发中最常用用的还是十六进制表示的颜色表示

    <style>
        div {
            width: 200px;
            height: 200px;
        }

        .div1 {
            background-color: red;
        }

        .div2 {
            background-color: #be5e5e;
        }

        .div3 {
            background-color: rgb(56, 56, 56);
        }
    </style>

2.背景颜色透明:background:rgba(0,0,0,3) a表示alpha透明度,取值0-1之间,习惯把0.3的0省略掉

    <style>
        .div3 {
            background-color: rgb(56, 56, 56, 0.3);
        }
    </style>

3.背景图片:background-image: 可以为我们的标签设置背景图片属性值有:none( 没有背景)/url(图片的路径)

    <style>
        div {
            width: 200px;
            height: 200px;
            background-image: url(../2020.11.5/images/man.png);
        }
    </style>

4.背景的平铺:background-repet: 参数值:1.repeat背景图像在纵向和横向上平铺的,默认的 2.no-repeat 不平铺 3.repeat-x 横向平铺 4.repeat-y 纵向平铺

5.背景图片的位置:background-position: x,y 可以改变图片在背景中的位置参数的表示1.x,y坐标表示 2.方位名词:top,center,bottom,left,right

<style>
        div {
            width: 200px;
            height: 200px;
            background-image: url(../2020.11.5/images/man.png);
            background-repeat: no-repeat;
            background-position: center;
        }
    </style>

6.背景图片固定:background-attachment:属性设置背景图像是否固定或者随着页面的其余部分滚动 1.background-attachment 后期制作视觉滚动效果 2.scroll 背景图片随着对象内容滚动 3.fixed 背景图像固定的

7.background: 属性值的赋值顺序为:背景颜色,背景图片地址,背景平铺,背景图像滚动,背景图片位置;

接下来,我们将要学习CSS样式中的重中之重----盒子模型

盒子模型

在这里插入图片描述
每个元素我们都可以想象成一个盒子,这个盒子有着外边距(Margin),边框(Border),内边距(Padding)和内容(Conter),我们可以通过对盒子的内外边距的控制来实现对元素或者元素内内容的位置的改变
外边距–Margin
外边距Margin可以赋负值,但是外边距Padding不行,我们还可以通过margin: 0px auto来实现元素的居中显示,还可以单独的为盒子的一边进行赋值例如margin-left: 100px,margin-top: 100px,还有另外一种方法,在我们没有声明为哪一边进行赋值的时候,margin会根据值来分别按照顺时针顺序来为盒子的四个边赋值margin : 100px;margin : 100px 200px这个的意思为给盒子的上下边赋值100px,左右边赋值200px
边框–border:
我们还可以给边框一些样式:
在这里插入图片描述我们可以这样来定义border : 1px(边框的粗细程度) solid(边框样式) red(边框颜色)
内边距–Padding
盒子内边距的定义规则和外边距的定义大致相同,特别一定要注意padding不能够给负值

练习:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            margin-top: 100px;
            margin: 0 auto;
            padding: 50px;
            border: 2px solid red;
        }
    </style>
</head>

<body>
    <div>这是盒子的内容</div>
</body>

在这里插入图片描述

标签

#css #html