CSS笔记整理2 -- div与span 和标签的显示模式

最新推荐文章于 2023-04-10 17:25:53 发布

原创最新推荐文章于 2023-04-10 17:25:53 发布 · 1.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#CSS

CSS 专栏收录该内容

6 篇文章

订阅专栏

本文主要探讨CSS中的div和span标签及其显示模式。div作为块级元素用于网页布局，可嵌套并调整位置。span是行内元素，适用于文本。此外，文章还介绍了块显示、行显示和行内块显示的特性及其转换方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS笔记整理2 -- div与span 和标签的显示模式

div图层
div标记与 span标记
- div标记--跨段块标记
- span标记--跨字符块标记
标签的显示模式

div图层

图层：设计网页时用于定位元素或者布局的一种技术，它可以将图层里包含的内容放置到浏览器的任意位置，其包含的内容有文字、图片、动画甚至是图层。

在一个网页文件中可以使用多个图层，图层可以嵌套、重叠。

div

：定义文档中的分区或节。

块级标记

格式：<div id="" class="" style=""></div>
属性：

style：设置图层的样式
取值如下：
1. position ：取值static静态定位、absolute绝对定位、relative相对定位、fixed图层位置固定；即定位。
2. border：取值线粗细、线性、线颜色；即边框，可以设置风格粗细颜色等属性。
3. background-color：取值十六进制、rgb()函数、英文颜色字；即背景颜色。
4. left：取值像素、百分比；即规定图层左边距离。
5. top：取值像素、百分比；即规定图层与顶部的距离。
6. width：取值像素、百分比；即规定图层的宽度。
7. height：取值像素、百分比；即规定图层的高度。
8. float：取值left左浮动，right右浮动、none不浮动；即浮动。
9. clear：取值left清除左浮动、righ清除右浮动、both清除两边浮动、none允许两边浮动；即清除浮动。
10. overflow：取值scroll始终显示滚动条、visible不显示滚条但超出部分可见、auto内容超出时显示滚动条、hidden超出时显示滚动条；即内容溢出控制。
11. z-index：取值aoto子图层按照父层属性显示、数字；即层叠关系，数值越大图层越上方。
12. display：取值none元素不显示、inline行内元素、block块级元素、inline-block行内块元素、inherit规定从父元素继承display属性；即显示模式。

图层嵌套

：在图层中不仅可以包含内容有文字、图片、动画，还可以包含其他的图层。

图层与图层之间可以不相交，也可以重叠。

图层的层叠

前提条件：position属性设置为absolute
使用z-index实现层叠

div标记与 span标记

常用的两个标记：div标记和span标记。

常用于网站页面的排版布局；

div标记–跨段块标记

块标记
一般包含较大范围
在区域前后会自动换行
div中可以有标题、段落、图片、文字

div 包含span，span不能包含div

span标记–跨字符块标记

行内标记
一般包含范围较窄
在区域外不会自动换行
span中只能放文字

格式：<span id="" class=""></span>

关于div+css排版的优点：执行效率高

标签的显示模式

块显示标记

：块级元素，以块状显示，自动换行，标记从上往下排列；

display取值：block

特性：

可以设置宽度和高度；
如果不指定宽度，默认宽度是100%；
如果不指定高度，默认高度是0px；

行显示标记

：行内元素，在行内显示，标记从左往右排列。

display取值：inline

特性：

不能指定宽度和高度；
不指定宽度，默认宽度是0；
不指定高度，默认高度是0；
转换成块显示：display:block;

超链接<a>标记是行内元素无法设置宽高；
如果<a>标记转成块显示后，可以设定宽度和高度，但是排列变成了上下排列，如果要实现左右排列同时还要设定宽度和高度，可将显示模式设置为display:inline-block;。

行内块标记

display取值：inline-block
特性：

在行内显示，标记从左往右排列；
可以设置宽度和高度；

注意：不是说所有的标记都能分成行显示标记和块显示标记，比如<br><head><title><meta>等等，这些标记本来就不是用来显示页面内容的，所以不能用块显示很热行显示概念来套用。
<img>标记比较特殊，既有行显示标记的特性，又有块显示标记的特性。默认情况下是inline-block显示方式。