前端学习：元素显示模式与背景属性

real_laugh

已于 2022-02-17 16:32:33 修改

阅读量391

点赞数

文章标签：前端学习 css

于 2022-02-17 16:22:41 首次发布

本文链接：https://blog.csdn.net/real_laugh/article/details/122984843

版权

元素显示模式

元素显示模式就是元素(标签)以什么方式进行显示，比如<div>自己占一行，一行可以放多个<span>。
HTML元素一般分为块元素和行内元素。
块元素：常见的有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等。
块级元素的特点：
独占一行。
高度、宽度、外边距以及内边距都可以控制。
宽度默认是容器(父级宽度)的100%。
是一个容器及盒子，里面可以放行内或者块级元素。
注：文字类的元素内不能使用块级元素。
<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>。
同理，<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素。

行内元素：常见的有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等。
行内元素的特点：
相邻行内元素在一行上，一行可以显示多个行内元素。
高、宽直接设置是无效的。
默认宽度就是他本身内容的宽度。
行内元素只能容纳文本或其他行内元素。
注：链接里面不能在放链接。
特殊情况链接<a>里卖弄可以放块级元素，但是给<a>转换一下块级模式最安全。

行内块元素：在行内元素中有几个特殊的标签<img/>、<input/>、<td>，它们同时具有块元素和行内元素的特点。
行内块元素的特点：
和相邻行内元素(或行内块元素)在一行上，但是它们之间会有空白缝隙，一行可以显示多个。
默认宽度就是他本身内容的宽度。
高度、宽度、外边距以及内边距都可以控制。

元素显示模式的转换：
转换为块级元素：display:block;
转换为行内元素：display:inline;
转换为行内块元素：display:inline-block;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素显示模式的转换</title>
    <style>
        a {
            /* 行内元素无法改变链接的范围 */
            width: 150px;
            height: 50px;
            background-color: pink;
            /* 把行内元素a转换为块级元素，块级元素会独占一行 */
            display: block;
        }

        div {
            width: 300px;
            height: 100px;
            background-color: purple;
            /* 把div块级元素转换为行内元素，会显示在一行上并且无法修改大小 */
            display: inline;
        }

        span {
            width: 100px;
            height: 50px;
            background-color: skyblue;
            /* 把span转换为行内块元素，会显示在一行上并且可以修改大小 */
            display: inline-block;
        }
    </style>
</head>

<body>
    <a href="#">阿姨</a>
    <a href="#">阿姨</a>
    <div>我是块级元素</div>
    <div>我是块级元素</div>
    <span>行内元素转换为行内块元素</span>
    <span>行内元素转换为行内块元素</span>
</body>

</html>

运行结果：

背景属性

通过CSS背景属性，可以给页面元素添加背景样式。
背景属性可以设置背景颜色(background-color)、背景图片(background-image)、背景平铺(background-repeat)、背景图片的位置(background-position)、背景图像固定(background-attachment)等。

background-color属性定义了元素的背景颜色。
语法：
background-color: 颜色值;
一般情况下元素背景颜色默认值是transparent(透明)。

background-image属性描述了元素的背景图像。常用于logo、装饰性的小图片或者超大的背景图片。相比于插入的图片更便于控制位置。
语法：
background-image: 属性值;
属性值有两个：none表示无背景图；url(图片地址)。

background-repeat可以对背景图片进行平铺。
语法：
background-repeat: 属性值;
属性值有：repeat表示平铺(默认值)；no-repeat表示不平铺；repeat-x沿着x轴平铺；repeat-y沿着y轴平铺。
background-repeat属性并不改变盒子大小，只是改变图片平铺方式。

div {
    width: 1000px;
    height: 1000px;
    background-color: pink;
    background-image: url(8.image/2.png);
    /* 沿着x轴平铺 */
    background-repeat: repeat-x;
    background-position: center top;
}

div {
    width: 1000px;
    height: 1000px;
    background-color: pink;
    background-image: url(8.image/2.png);
    /* 沿着y轴平铺 */
    background-repeat: repeat-y;
    background-position: center top;
}

div {
    width: 1000px;
    height: 1000px;
    background-color: pink;
    background-image: url(8.image/2.png);
    /* 不平铺 */
    background-repeat: no-repeat;
    background-position: center top;
}

background-position属性可以改变图片在背景中的位置。
语法：
background-position: x y;
参数代表的意思是x坐标和y坐标。可以使用方位名词或者精确单位。

方位名词：水平方向上(x)有left、center、right；垂直方向上(y)有top、center、bottom。
注：如果指定的两个值都是方位名词，则两个值前后顺序无关，如top left和left top效果一致。
如果只指定了一个方位名词，另一个值默认居中对齐。

body {
    background-image: url(8.image/bg.jpg);
    background-repeat: no-repeat;
    /* 将图片设置在中间的顶部 */
    background-position: center top;
}

精确单位：
注：如果指定了两个值，第一个必须是x坐标，第二个必须是y坐标。
如果只指定一个值，那该数值是x坐标，另一个默认垂直居中。

body {
    background-image: url(8.image/bg.jpg);
    background-repeat: no-repeat;
    /* 将图片的水平位置设置100px，垂直位置设置为200px */
    background-position: 100px 200px;
}

混合单位：
注：如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标。

background-attachment属性设置背景图像是否固定或者其余部分随着页面滚动。
语法
background-attachment: 属性值;
属性值有：scroll指背景图像随对象内容滚动；fixed指背景图像固定。

背景复合写法：
该写法没有特定的书写顺序，一般习惯约定顺序为：background: 背景颜色背景图片地址背景平铺背景图像滚动背景图片位置;

body {
    /* background-image: url(8.image/bg.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed; */
    background: url(8.image/bg.jpg) no-repeat fixed center top;
    font-size: 20px;
}

背景色半透明：
background: rgba(数值1,数值2,数值3,数值4);
数值1、数值2、数值3代表颜色；数值4表示alpha透明度，范围在0~1之间。
注：背景色半透明不影响盒子里的内容，只是将盒子背景半透明。

div {
    width: 300px;
    height: 300px;
    background: rgba(0, 0, 0, 0.3);
}

结果图：

real_laugh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习：元素显示模式与背景属性

元素显示模式元素显示模式就是元素(标签)以什么方式进行显示，比如<div>自己占一行，一行可以放多个<span>。HTML元素一般分为块元素和行内元素。块元素：常见的有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等。块级元素的特点：独占一行。高度、宽度、外边距以及内边距都可以控制。宽度默认是容器(父级宽度)的100%。是一个容器及...
复制链接

扫一扫