背景设置和CSS盒子模型

最新推荐文章于 2022-11-22 10:53:49 发布

1900's 88 keys

最新推荐文章于 2022-11-22 10:53:49 发布

阅读量343

点赞数 1

分类专栏： # HTML/CSS 正在路上的前端攻城狮的烂笔记文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_45660621/article/details/120676577

版权

正在路上的前端攻城狮的烂笔记同时被 2 个专栏收录

90 篇文章 2 订阅

订阅专栏

HTML/CSS

20 篇文章 1 订阅

订阅专栏

color属性

文本颜色用color属性来设置。
color 属性包括 5 种不同的值： RGB、HEX、RGBA、HSLA、HSL、
比较常用的是RGB和HEX。

RGB由红色、绿色和蓝色的值从0-255组成RGB(255,255,255)。每种颜色的最小值是 0（十六进制：#00）。最大值是 255（十六进制：#FF）。
HEX是十六进制颜色表示法。#FFFFFF。
HSL 模式基于一个 360 色相环。hsl(360,90%,50%)
- 第一个数字代表色相（色相环角度），60 度时为黄色，120 度绿色，180 度青色，240 度蓝色，300 度洋红色，360 度红色。
- 第二个数数字代表饱和度，值为百分比。
- 第三个数字是亮度，值为百分比。
RGBA和HSLA分别是在 RGB 和 HSL的基础上加上了透明度。
- rgb(255,0,0,50%)和hsla(360,90%,70%,50%)其中50%表示透明度。

背景设置background

background-color

background-color属性设置一个元素的背景颜色。

background-image

background-image 属性为元素设置背景图像。
一般情况background-color和background-image属性一起使用，避免因网络等原因引起background-image 属性加载图像失效后，显示背景色。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>背景属性</title>
    <style>
        body {
            background-image: url("img/2.png");
            background-color: #cccccc;
        }
    </style>
</head>
<body>
    <p>背景属性设置~</p>
</body>
</html>

在这里插入图片描述

background-repeat

background-repeat 属性设置是否及如何重复背景图像。
从上面效果可以看到当图片无法铺满背景的时候，浏览器会默认背景图像在水平和垂直方向上重复，铺满整个屏幕。我们可以通过background-repeat属性去更改图片的覆盖方式。

repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
我们在上面代码中添加代码

 background-repeat: repeat-x;

在这里插入图片描述
重新设置属性值

  background-repeat: repeat-y;

在这里插入图片描述
当设置

background-repeat: no-repeat;

在这里插入图片描述

background-position

background-position 属性设置背景图像的起始位置。
可以通过ABC

background-position:A|B|C;

可以通过A、B、C三种不同的方式去设置背景的位置:
A:（top、left、right、bottom、center）两两组合，如果仅规定了一个关键词，那么第二个值将是”center”。默认值：0% 0%。

background-position: top;

在这里插入图片描述
B:（x% y%）第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另一个值将是 50%。

			height: 500px;
            background-position: 50% 100%;

在这里插入图片描述
C:(xpos ypos)第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果仅规定了一个值，另一个值将是50%。可以混合使用 % 和 position 值。

 background-position: 150px 150px;

在这里插入图片描述

background-size

background-size 属性规定背景图像的尺寸。

background-size: 200px 70px;

第一个值设置宽度，第二个值设置的高度。
在这里插入图片描述
如果只给了一个仅有的值是auto，则代表此时背景图默认尺寸展示。

 background-size: auto;

如果只给出一个值，第二个是设置为： auto,这个auto 值则是自适应大小。

background-size: 400px auto;

background-attachment

background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。

scroll：背景图片随页面的其余部分滚动。默认值。
fixed：背景图像是固定的。
local：背景图片随滚动元素滚动。

background

background 是一个简写属性，可以在一个声明中设置上面所有的背景属性。对设置属性的顺序也没有要求。

background:#f00 url(xxx.jpg) no-repeat;

在同时声明 background-position 和 background-size，由于其单位可能是相同的，所以要按照 background-position/background-size的规则进行声明。
比如：

background:50px 50px/50px 50px;

CSS盒子模型

盒子模型的特性

盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和。
盒子的总高度= height+上下内边距之和+上下边框宽度之和+上下外边距之和。

(1)外边距(margin)：盒子与其他元素之间的额距离
(2)内边距(padding)：也称为填充距离,内容和边框之间的距离
(3)边框(border)
(4)内容(content)
在这里插入图片描述

border

为每一条边框单独设置样式、宽度和颜色时，不同的值是有不同的设置顺序滴：

4 个值：上、右、下、左（顺时针方向）
3 个值：上、右左、下
2 个值：上下、右左

border-style

border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
属性值：

dotted：圆点状边框
solid：实线框
dashed：虚线边框
double：双线边框
groove：3D 凹槽边框
ridge：3D 垄状边框
inset：3D inset 边框
outset：3D outset 边框

    <style type="text/css">
        p{
            width: 200px;
        }
        .dotted {border-style: dotted}
        .dashed {border-style: dashed}
        .solid {border-style: solid}
        .double {border-style: double}
        .groove {border-style: groove}
        .ridge {border-style: ridge}
        .inset {border-style: inset}
        .outset {border-style: outset}
    </style>
</head>
<body>
   <p class="dotted">dotted border</p>
   <p class="dashed">dashed border</p>
   <p class="solid">solid border</p>
   <p class="double">double border</p>
   <p class="groove">groove border</p>
   <p class="ridge">ridge border</p>
   <p class="inset">inset border</p>
   <p class="outset">outset border</p>
</body>

在这里插入图片描述

border-width

border-width 简写属性为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
属性值:

medium：定义中等的上边框。默认值。
thin：细的上边框。
thick：粗的上边框。
length：自定义上边框的宽度。如2px。

    <style>
        p {
            width: 200px;
            border-style: solid;
            }
        .medium { border-width: medium;}
        .thin { border-width: thin; }
        .thick { border-width: thick;}
        .length { border-width: 2px;}
    </style>
    
    <body>
    <p class="medium">medium border</p>
    <p class="thin">thin border</p>
    <p class="thick">thick border</p>
    <p class="length">length border</p>
</body>

在这里插入图片描述

border color

border-color 属性设置四条边框的颜色。

border简写

border 简写属性在一个声明设置所有的边框属性。
语法如下:

border:border-width|border-style|border-color;

如：

border:1px solid red;

可以通过如下属性为
在这里插入图片描述

border-radius

border-radius 属性是border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius四个属性简写属性，用于设置四个角边框的形状。

   div {
            background: lightblue;
            width: 100px;
            height: 100px;
            border-radius: 15px;
        }

在这里插入图片描述
这段话同时将每个圆角的"水平半径"（Horizontal radius）和"垂直半径"（Vertical radius）都设置为 15px。

border-radius 可以同时设置 1 到 4 个值:

设置 1 个值，表示 4 个角都使用这个值。
设置 2 个值，表示左上角和右下角使用第一个值，右上角和左下角使用第二个值。
设置 3 个值，表示左上角使用第一个值，右上角和左下角使用第二个值，右下角使用第三个值。
设置 4 个值，则依次对应左上角、右上角、右下角、左下角（顺时针顺序）。

 div {
            background: lightblue;
            width: 100px;
            height: 100px;
            border-radius: 15px 30px 40px;
        }

在这里插入图片描述
border-radius 还可以用斜杠设置第二组值。

第一组值表示水平半径，第二组值表示垂直半径。
第二组值也可以同时设置 1 到 4 个值，应用规则与第一组值相同。

border-radius: 15px 30px 40px/ 15px 30px;

在这里插入图片描述

margin

margin 是盒子的外边距，即盒子与盒子之间的距离。margin 始终是透明的。

margin-top、margin-right、margin-bottom、margin-left

margin 通过使用单独的属性，可以对上、右、下、左的外边距进行设置。

设置 1 个值，表示表示上右下左的值。
设置 2 个值，表示左右的值。
设置 3 个值，表示表示上左右下的值。
设置 4 个值，表示上右左下四个方向（顺时针顺序）。

padding

padding 是内边距，是盒子的边与盒子内部元素的距离。

padding-top、padding-righ、padding-bottom、padding-left

padding: 上右下左
内边距不能设置负值。
不能同时设置相对的两个边距。

1900's 88 keys

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
背景设置和CSS盒子模型

目录color属性背景设置backgroundbackground-colorbackground-imagebackground-repeatbackground-positionbackground-sizebackground-attachmentbackgroundCSS盒子模型盒子模型的特性borderborder-styleborder-widthborder colorborder简写border-radiusmarginmargin-top、margin-right、margin-botto
复制链接

扫一扫