CSS2day.2(块内元素，行内元素，行内块元素，背景(background的复合写法))

荻风溪畔

已于 2022-08-08 10:19:46 修改

阅读量1.1k

点赞数

分类专栏： web笔记文章标签： css3 css html

于 2022-05-29 16:38:31 首次发布

本文链接：https://blog.csdn.net/qq_44976531/article/details/125031230

版权

web笔记专栏收录该内容

37 篇文章 0 订阅

订阅专栏

CSS元素显示模式

作用：更好的布局我们的网页
HTML一般分为块元素和行内元素两种类型
比如div独占一行，一行可以放多个span。

块元素

常见块内元素有：h1~h6，p，div，ul，ol，li等。
块级元素的特点：

独占一行
高，宽，外边距和内边距都可以控制
宽度默认是容器（父级宽度）的100%
可看做是一个容器（盒子），里面可以放行内或者块级元素
以下注意：
文字类的元素内不能使用块级元素
标签主要用于存放文字，因此里面不能放块级元素，比如div.
同理 h1~h6等都是文字类块级元素，也不能放其他块级元素

行内元素

常见行内元素有：<a>,,,,,<del>,<s>,<ins>,,等。(行内元素有时也称为内联元素）
行内元素的特点：

一行多个
高，宽直接设置是无效的,要间接
默认宽度是本身内容的宽度
行内元素只能容纳文本或其他的行内元素
以下注意！！！
链接（<a>）里面不能再放链接（<a>）
特殊情况行内元素<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全

行内块元素

在行内元素有几个特殊的标签：<img>,<input>,<td>等。他们同时具有块元素和行内元素的特点。称为行内块元素
行内块元素特点：

和相邻行内元素在一行上，之间有空白缝隙，一行显示多个（行内元素特点）
默认宽度是本身内容的宽度（行内元素特点）
高，宽（行高），外边距和内边距都可以控制（块级元素特点）

总结：

请添加图片描述

显示模式的转换：

特殊情况下，我们需要元素模式的转换，即一个模式的元素需要另外一种显示模式的特性
比如：增加链接<a>的触发范围
原理：间接更改行内元素的高宽
语法：

转化为块元素： display:block;
转换为行内元素：display:inline;
转换为行内块元素：display:inline-block;

<style>
    a {
        width: 200px;
        height: 100px;
        background-color: rgb(2, 241, 82);
        /* 把行内元素a转换为块级元素 */
        display: block;
    }

    div {
        width: 200px;
        height: 100px;
        background-color: rgb(29, 126, 236);
        /* 把块级元素div转换为行内元素*/
        display: inline;
    }

    span {
        width: 200px;
        height: 100px;
        background-color: skyblue;
        /* 把块级元素div转换为行内元素*/
        display: inline-block;
    }
</style>

<body>
    <a href="https://www.baidu.com/">点击我</a>
    <hr>
    <a href="https://www.bilibili.com/">点击我</a>
    <div>我是块级元素</div>
    <div>我是块级元素</div>
    <span>行内元素span转换为行内块元素</span>
</body>

网页结果示例如下说明：

span转换为行内块元素后，能够设置高度和宽度。
div转换为行内元素后，只显示在一行
a转换为块内元素后，能够设置链接的点击范围

侧边栏案例：

请添加图片描述
没有注意的问题： line-height: 40px;

要把行高设置成和a标签的高度一样，这样能使得文字水平居中

文字的行高等于盒子的高度，可以让文字在当前盒子（不限于a标签）内垂直居中

CSS背景：

背景颜色（background-color）：

background-color:颜色值;

一般情况下默认值是transparent。

背景图片（background-image）：

常见于一些logo或者装饰性的小图片或者超大的背景图片，相比较<img>插入图片而言，更便于控制位置。

background-image: none | url (url);

参数值	作用
none	无背景图（默认）
url	使用绝对或相对地址指定背景图像

背景平铺（background-repeat）：

background-repeat: repeat | no-repeat | repeat-x | repeat-y;

参数值	作用
repeat	背景图像在纵向和横向上平铺（默认的）
no-repeat	背景图像不平铺
repeat-x	背景图像在横向上平铺
repeat-y	背景图像在纵向上平铺

背景方位（background-position）重要：

background-position: x y;

可以使用方位名词或者精确单位

参数值	作用
length	百分数：由浮点数字和单位标识符组成的长度值
position	top、cneter、bottom、left、center、right 方位名词

参数是方位名词

如果指定的是方位名词，则两个值顺序不影响效果，例如 left top 和top left 一样效果

如果只指定了一个方位名词，另一个省略，则第二个值默认居中对齐

 div {
     width: 300px;
     height: 300px;
     background-color: pink;
     background-image: url(../day2/up.jpg);
     background-repeat: repeat-y;
     /* background-position: center right; */
  /*  top此时顶部对齐 第二个参数省略x轴 是居中显示的 */
     background-position: top;             
      /*  right此时水平一定是靠右侧对齐  第二个参数省略y轴 是垂直居中显示的*/
     background-position: right;           
 }

参数是精确单位

第一个肯定是x坐标，第二个肯定是y坐标
如果只指定一个数，那该数值一定是x坐标。另一个默认垂直居中

参数是混合单位

精确单位和方位名词混用，第一个肯定是x坐标，第二个肯定是y坐标

背景图像固定（background-attachment）：

又称为背景附着

可以制作视差滚动的效果
设置背景图像是否固定或者随着页面的其余部分滚动
语法：

background-attachment:scroll | fixed

参数	作用
scroll	背景图像随着对象内容滚动
fixed	背景图像固定

背景复合写法（background）重点记住复合写法。：

语法及顺序(顺序可以改变，但不提倡)：
background:背景颜色背景图片地址背景平铺背景图像滚动背景图片位置

background: transparent url(image.jpg) repeadt-y fixed center top;

示例：

<style>
    h3 {
        width: 150px;
        height: 40px;
        background-color: white;
        line-height: 40px;
        background-image: url(https://game.gtimg.cn/images/js/title/title_sprite.png);
        background-repeat: no-repeat;
        background-position: -30px;
        text-indent: 1.5em;
    }

    body {
        /* background-image: url(./images/wangzhebeijing.jpg);
        background-position: center 60px;
        background-repeat: no-repeat;
        background-attachment: fixed; */
        background: url(./images/wangzhebeijing.jpg) no-repeat scroll center 60px;
    }
</style>

<body>
    <h3>成长守护平台</h3>
	p{天王盖地虎，提莫一米五}*100
<body>

效果:背景图片会随图片内容滚动
请添加图片描述

背景色半透明（background-color）：

CSS为我们提供了背景颜色半透明的效果。

语法（用rgb表示，最后一个参数alpha透明度，取值0~1）：
background-color: rgb(112, 143, 96, 0.3); （网上还有其他写法！！！）
背景半透明是指盒子背景半透明，盒子里面的内容不受影响

背景总结：

请添加图片描述

综合案例：

五彩导航：

<style>
    .nav a {
        width: 120px;
        height: 58px;
        background-color: rgb(112, 143, 96, 0.3);
        display: inline-block;
        text-decoration: none;
        /* 保证水平居中 */
        text-align: center;
        /* 保证垂直居中，用行高 */
        line-height: 50px;
        color: aliceblue;

    }

    /* hover 直接选择 .n1不行，还需要选择父类标签下的.n1才行？啥原理 */
    .nav .n1:hover {

        background-image: url(./images/bg11.png);
    }

    .nav .n1 {
        background-image: url(./images/bg1.png);
        background-repeat: no-repeat;
    }
</style>

<body>
    <div class="nav">
        <a href="#" class='n1'>五彩导航</a>
    </div>
</body>

在这里插入图片描述
注意hover的用法，在这里我们必须在父级下选择要hover的a标签。
注意垂直居中，用的是line-height来保证文字的垂直居中。

荻风溪畔

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS2day.2(块内元素，行内元素，行内块元素，背景(background的复合写法))

文章目录CSS元素显示模式块元素行内元素行内块元素总结：显示模式的转换：CSS元素显示模式作用：更好的布局我们的网页HTML一般分为块元素和行内元素两种类型比如div独占一行，一行可以放多个span。块元素常见块内元素有：h1~h6，p，div，ul，ol，li等。特点：独占一行高，宽，外边距和内边距都可以控制宽度默认是容器（父级宽度）的100%可看做是一个容器（盒子），里面可以放行内或者块级元素以下注意：文字类的元素内不能使用块级元素
复制链接

扫一扫