CSS的元素显示模式和CSS的背景~,~等都是文字类块级标签，里面不能放其他块级元素。~、

Posted on 2024年5月26日 by hackdl

一.CSS的元素显示模式

1.1什么是元素的显示模式

1.2块元素

1.3行内元素

1.4 行内块元素

1.5元素显示模式总结

1.6元素显示模式转换

1.7一个小技巧，单行文字垂直居中的代码

1.8单行文字垂直居中的原理

二.CSS的背景

2.1背景颜色

2.2背景图片

2.3背景平铺

2.4背景图片位置

2.5背景图像固定(背景附着）

2.6背景复合写法

2.7背景色半透明

2.8背景总结

一.CSS的元素显示模式

1.1什么是元素的显示模式

作用：网页的标签元素非常多，在不同的地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页。

元素显示模式就是元素(标签)以什么方式进行显示，比如

自己占一行,比如一行可以放多个.

HTML元素一般可以分为块元素和行内元素两种类型。

1.2块元素

常见的块元素有

~

,

等。其中

标签是最典型的块元素。

块元素的特点：

比较霸道，自己独占一行。
高度，宽度，外边距，以及内边距都可以控制。
宽度默认是容器（父其宽度）的100%。
是一个容器及盒子，里面可以放块级元素。

注意：

文字类的元素内不能使用块级元素。
标签主要用于存放文字，因此

里面不能放块级元素，特别是不能放

。
同理，

~

等都是文字类块级标签，里面不能放其他块级元素。

1.3行内元素

常见的行内元素有 ~~等。其中标签是最典型的行内元素，有的地方也将行内元素称为内联元素。~~

行内元素的特点：

相邻和行类元素在一行上，一行可以显示多个
高宽直接设置时无效的
默认宽度就是他本身内容的宽度
行内元素只能容纳文本或者其他行内元素。

注意：

链接里面不能再放链接
特殊情况链接里面可以放块级元素，但是个转换一下块级模式最安全。

1.4 行内块元素

在行内块元素中有几个特殊的标签——,,

行内块元素的特点：

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

1.5元素显示模式总结

元素模式	元素排列	设置样式	默认宽度
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%
行内元素	一行可以放置多个元素	不可以直接设置宽度高度	它本身内容的宽度
行内块元素	一行可以放多个行内块元素	可以设置高度和宽度	他本身内容的宽度

1.6元素显示模式转换

特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另外一种模式的特性，比如想要增加的触发范围。

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





    
    
    
    Document
    
        a {
            width: 150px;
            height: 50px;
            background-color: pink;
            /* 把行内元素a转换为块级元素 */
            /* display: block; */
            text-decoration: none;
            /* 转换为行内元素 */
            /* display: inline; */
            /* 转换为行内块元素 */
            display: inline-block;
        }
    



    C罗
    C罗

1.7一个小技巧，单行文字垂直居中的代码

CSS没有给我们提供文字垂直居中的代码，这里我们可以用一个小技巧是这个问题实现。

解决问题的方案：让文字的行高等于盒子的高度，就可以让当前文字在盒子内垂直居中。

1.8单行文字垂直居中的原理

行高的上空隙和下空隙把文字挤到了中间了是如果行高小于盒子高度。文字会偏上。如果行高大于盒子高度，则文字偏下。

二.CSS的背景

通过CSS的背景属性，可以给页面元素添加背景样式。

背景属性是可以设置背景颜色，背景图片，背景平铺，背景图片位置，背景图像固定等。

2.1背景颜色

background-color 属性定义了元素的背景颜色。

使用： background-color：颜色值;

一般情况下元素背景颜色是transparent;

2.2背景图片

background-image属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者是超大背景图片，优点是非常便于控制位置。

使用： background-image: none|url(url) 地址

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

2.3背景平铺

如果需要HTML页面上对背景图像进行平铺。可以使用background-repeat 属性。

使用： background-repeat:repeat|no-repeat|repeat-x|repeat-y|

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

2.4背景图片位置

利用background-position属性可以设置改变图片在背景中的位置。

使用： background-position： x y;

参数代表的意思是：x坐标和y坐标，可以使用方位名词或者精确单位。

参数值	说明
length	百分数\|由浮点数字和单位标识符组成的长度值
position	top\|center\|bottom\|left\|center\|right 方位名词

参数方位名词

如果指定的两个都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一样

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

参数是精确单位

如果参数是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标。

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

参数是混合单位

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

2.5背景图像固定(背景附着）

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

background-attachment 后期可以制作视差滚动的效果。

使用： background-attachment: scroll | fixed

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

2.6背景复合写法

为了简化背景属性的代码，我们可以将折现属性合并简写在同一个属性 background中，从而节约代码量，当使用简写属性时，没有特定书写顺序，一般习惯约定顺序为：

background：背景颜色，背景图片，背景图片地址，背景平铺，背景图像滚动，背景图片位置。

使用： background: transparent url(image.jpg) repeat-y fixed top; 实际开发比较提倡。

2.7背景色半透明

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

background: rgba(0,0,0,0.3);、

注意：

最后一个参数时alpha透明度，取0~1之间。
我们习惯把0.3的0省略掉，写为background(0,0,0.3);
注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响。
CSS3新增属性，IE9+版本浏览器才支持的。
但是现在实际开发中，我们不关注兼容性写法了，可以放心使用。

2.8背景总结

属性	作用	值
background-color	背景颜色	预定义的颜色值/十六进制/RGB代码
background-image	背景图片	url(图片路径)
background-repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y
background-position	背景位置	length/position 分别为x和y坐标
background-attachment	背景附着	scroll(背景滚动)/fixed(背景固定)
背景简写	书写更简单	背景颜色,背景地址，背景平铺，背景滚动，背景位置
背景色半透明	背景颜色半透明	background: rgba(0,0,0,.3); 后面必须时四个值

背景图片：实际开发中常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置。

上一篇：C语言——数组

下一篇：CSS盒子模型

提问和评论都可以，用心的回复会被更多人看到
评论

发布评论

全部评论
()
最热
最新

相关文章

CSS中元素显示模式的转换

CSSCSSCSS中元素显示模式的转换1.块元素(block)(block)(block)，独占一行，可调整像素宽，高。2.行内元素(inline)(inline)(inline)，一行可以有多个，不能调整像素宽高。3.行内块元素(inline−block)(inline-block)(inline−block)，一行既可以有多个，也可以调整像素宽高。

行内元素

块元素

块级元素

html

宽高
CSS基础-CSS的显示模式

Div 和 Span 标签什么是 Div? 作用：一般用于配合 css 完成网页的基本布局

div和span标签 .heade

CSS3

块级元素

html

css
CSS——CSS元素的显示与隐藏

文章目录元素的显示与隐藏display 显示visibility 可见性overflow 溢出溢出案例案例：播放图标的显示元素的显示与隐藏在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是 display visibility 和 overflow。他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。最常见的是网站广告，当我们点击类似关闭不见了，但是我们重新刷新页面，它们又会出现和你玩躲猫猫！display 显示display 设置或检索对象是否及如何显示。disp

CSS
09CSS元素显示模式

1.什么是元素显示模式作用：网页的标签很多，在不同的地方会用到不同类型的标签，了解它们的特点可以更好的布局我们的网页。元素显示模式就是元素(标签)以什么方式进行显示，例如

自己占一行，一行中可以放多个。HTML元素一般可以分成块元素和行内元素两种类型。2.块元素常见的块元素有

~

、

CSS
元素显示模式转换（HTML、CSS）

元素显示模式转换（HTML、CSS）

html

css

css3

显示模式

块元素

div和span标签&&css元素的显示模式

div和span标签1.什么是div?作用: 一般用于配合css完成网页的基本布局2.什么是span?作用: 一般

块级元素

行内元素

css
【网页前端】CSS进阶之元素的显示模式

为了不同场景应用不同显示模式，更好布局页面，我们需要系统学习元素的显示模式。

前端

网页

css

html

css3
【CSS】标签显示模式 ① ( 标签显示模式 | 块级元素 )

一、标签显示模式 ( 块级元素 | 行内元素 )二、块级元素1、块级元素简介2、块级元素特点3、文字块级元素4、代码示例

css

html

前端

标签显示模式

块级元素
【CSS】标签显示模式 ② ( 行内元素 | 行内块元素 )

一、行内元素1、行内元素简介2、行内元素特点3、代码示例二、行内块元素1、行内块元素简介2、行内块元素特点3、代码示例

css

html

行内元素

行内块元素

标签显示模式
css显示模式（行内元素，块元素，行内块元素）

不同元素之间可以通过变换实现不同的功能。1.块元素 1.1.性质：html/1.自己独占一行。//2.高，宽，外边距和内边距可控//3.宽默认为父级的100%就是父类元素的宽//4.可以看作一个盒子，里面可以装块元素和行内元素//常见的块元素：/

块元素

行内元素

宽高
CSS显示模式

CSS显示模式块元素独占一行高度，宽度，外边距以及内边距都能控制宽度默认是100%是一个容器及盒子，里面可以放行内或者块级元素行内元素一行可以显示多个宽高无法设置默认高度是本身内容的宽度行内元素只能容纳文本或行内元素行内块元素宽高可调一行多个默认高度是本身内容的宽度CSS模式转化行内元素转块级元素：display: block;块元素转化为行内元素：display：inline;转化为行内块元素：display：inline-biock;注意：单行文字垂直居

css

前端
CSS元素的显示与隐藏

文章目录

前端

显示隐藏

可见性

网页特效
CSS——CSS标签显示模式（display）

文章目录标签的类型(显示模式)块级元素(block-level)行内元素(inline-level)块级元素和行内元素区别行内块元素（inline-block）标签显示模式转换 display案例：显示模式转换标签的类型(显示模式)HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。具体如下：块级元素(block-level)每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。霸道常见的块元素有

~&

CSS
css的元素显示模式

1.块级元素 ①默认情况下，块级元素会另起一行 ②块级元素中一般可以放块级元素和行内元素，但是一些文字类的元素里面不能使用·块级元素 ③可以设置宽度和高度 2.行内元素 ①不能设置宽度和高度 ②只能容纳文本或其他行内元素 ③一行上可以放多个行内元素,但是链接里面不能再放链接 3.行内块元素 ①同时具 …

行内元素

块级元素

块元素

数据
CSS：元素显示模式

什么是元素的显示模式网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。元素显示模式就是元素（标签）以什么方式进行显示，比如

自己占一行，比如一行可以放多个。 HTML元素一般分为块元素和行元素两种类型。元素显示模式的分类块元素独占一 …

CSS

块级元素

行内元素

显示模式

块元素
CSS3：元素的边框、背景和大小

边框和边框相关的属性例如以下。border-width用于设置边框的宽度，可选择包含： 1）：将边框宽度设为以CSS度量单位（如em、px、cm）表达的长度值。 2）：将边框宽度值设为边框绘制区域的宽度的百分数； 3）thin、medium和thick：将边框宽度设为预设宽度。这

背景图

内边距

属性值

外边距

默认值
css：元素显示模式（块元素、行内元素、行内块元素）

1、什么是元素的显示模式作用：网页的标签非常多，在不同的地方会用到不同类型的标签，了解他们的特点可以更好地布局我们的网页元素的显示模式就是元素以什么方式来进行显示，比如

自己独占一行，一行又可以放多个 html一般分为块元素和行内元素两种类型 2、块元素（1）常见的块元素：

html

行内元素

块级元素

块元素

显示模式
css元素显示模式块元素、行内元素、行内块元素

…

JAVA
CSS：元素的显示与隐藏

display visibilit overflow …

CSS
c for语言 c语言种for

说明:c语言的很多语法部分都和JAVA,AS等相同特别是for的用法. c语言中的for循环语句使用最为灵活,不仅可以用于循环次数已经确定的情况,而且可以用于循环次数不确定而只给出循环结束条件的情况,它完全可以代替while语句. for(表达式1 ;表达式2 ; 表达式3)

c for语言

i++

for语句

初值
android备份ios 安卓ios备份

在之前的文章中，小编给大家详细介绍了iOS 16测试版下载和安装的详细教程，有兴趣的小伙伴可以自行按照教程升级。由于iOS 16还处于测试阶段，不可避免存在许多BUG，小编不建议大家用主力设备进行升级，最好用备用机去尝试一下就好！如果没有备用机，又确实想升级，请在升级iOS 16之前先备份好手机上的重要数据。由于是跨版本升级，一旦降级无法恢复iOS 16备份的数据，所以在升级iOS 16之前一定要

android备份ios

ios

iphone

iOS

数据
array json mysql 创建索引 mysql创建索引类型

以下的文章主要描述的是MySQL索引类型，MySQL索引一共可以分为5中不同类型，以下的文章就是对正5种索引的具体应用以及实际创建方式的描述，希望会给你带来一些帮助在MySQL索引类型方面。 (1)MySQL索引类型：普通索引这是最基本的索引，它没有任何限制。它有以下的文章主要描述的是MySQL索引类型，MySQL索引一共可以分为5中不同类型，以下的文章就是对正5种索引的具体应用以及实际创建方式

mysql的索引类型与创建

MySQL

ci

主键
android 填空输入 android填空题

Android面试宝典—-1.选择填空分析及答案一、选择题： 1、下列哪些语句关于内存回收的说明是正确的? (b )A、程序员必须创建一个线程来释放内存B、内存回收程序负责释放无用内存 C、内存回收程序允许程序员直接释放内存 D、内存回收程序可以在指定的时间释放内存对象分析：A, 程序员不需要创建一个线程来释放内存，android内存回收是由垃圾回收

android 填空输入

Android

android面试题

面试选择题

面试题
ios一个参数传入方法 ios传值方式

iOS页面间的传值细分有很多种，基本的传值方式有三种：委托Delegate传值、通知NSNotification传值、Block传值，其他在项目中可能会遇到的还有：UserDefault或文件方式传值、单例模式传值、通过设置属性传值，再有其他的传值方式没有遇到使用过在此不做说明。场景适合，自己使用舒服就是好的方式。　　在iOS开发的过程中，常见的页面跳转传值方式大致可以分为两种，现归纳总结一下：　

ios一个参数传入方法

#pragma

赋值

代理方法

wx623be5bda3857

关注

分类列表

# JavaScript5篇
# html和css17篇
# 微信1篇
# C语言练习题5篇

近期文章

1.雪花算法理解与实现
2.PPT|某制造企业SAP MES项目解决方案P61
3.k8s部署的四种方法
4.改变linux的grub开机顺序
5.openGauss学习笔记-01 什么是openGauss

文章目录

一.CSS的元素显示模式
1.1什么是元素的显示模式
1.2块元素
1.3行内元素
1.4 行内块元素
1.5元素显示模式总结
1.6元素显示模式转换
1.7一个小技巧，单行文字垂直居中的代码
1.8单行文字垂直居中的原理
二.CSS的背景
2.1背景颜色
2.2背景图片
2.3背景平铺
2.4背景图片位置
2.5背景图像固定(背景附着）
2.6背景复合写法
2.7背景色半透明
2.8背景总结

意见
反馈

举报文章

请选择举报类型

内容侵权
涉嫌营销
内容抄袭
违法信息
其他

具体原因

包含不真实信息
涉及个人隐私

原文链接（必填）

补充说明

0/200

上传截图

格式支持JPEG/PNG/JPG，图片不超过1.9M

已经收到您得举报信息，我们会尽快审核

51CTO首页

内容精选

博客

学堂

精培

企业培训

CTO训练营

智能汽车

开源基础软件社区

WOT全球技术创新大会

公众号矩阵

移动端

免费课程
课程排行
直播课
软考学堂

精品班
厂商认证
IT技术
2023年软考
PMP项目管理

在线学习
企业服务

CTO训练营
技术经理研习营
LeaTech峰会

文章
资源
问答
开源课堂
专栏
直播

51CTO

开源基础软件社区

51CTO技术栈

51CTO官微

51CTO学堂

51CTO博客

CTO训练营

开源基础软件社区订阅号

51CTO学堂APP

51CTO学堂企业版APP

开源基础软件社区视频号

51CTO博客

首页
关注
排行榜
订阅专栏

搜索历史
清空

热门搜索

查看【

】的结果
首发福利

写文章
创作中心
登录注册

官方博客	全部文章	热门标签	班级博客
了解我们	在线客服	网站地图	意见反馈

一.CSS的元素显示模式

1.1什么是元素的显示模式

1.2块元素

~

,

~

等都是文字类块级标签，里面不能放其他块级元素。

1.3行内元素

1.4 行内块元素

1.5元素显示模式总结

1.6元素显示模式转换

1.7一个小技巧，单行文字垂直居中的代码

1.8单行文字垂直居中的原理

二.CSS的背景

2.1背景颜色

2.2背景图片

2.3背景平铺

2.4背景图片位置

2.5背景图像固定(背景附着）

2.6背景复合写法

2.7背景色半透明

2.8背景总结

~

、 CSS

~&

51CTO博客

、

CSS