块级标签

无论内容有多少,都会占据一行;

默认宽:与父级标签一致;
默认高:0 ；或者与内容高度一致。

但是可以通过 width和height来设置标签的宽高;

包括: < p>、< h1 >、< ul >、< ol >、< hr / >等。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><p>这是一个段落</p><!--段落标签--><h1>一级标题</h><!--标题标签--><ul><li>列表1</li><li>列表2</li></ul><hr/><!--分割标签--></body>
</html>

运行：

行级标签

只占自身大小,不会占一行;

即使设置宽高也是无效的。

包括 < font >、< b >、< i >、< a >等。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">/* 尝试给行级标签设置宽高,并不会发生变化 */*{width: 600px;height: 100px;}/* 通配选择器,选择所有标签 */</style></head><body><b>加粗字体</b><!--b标签加粗当前字体--> 旁边的文本<i>斜体字体</i><!--i标签将字体变为斜体--><s>文本文本文本</s><!---s标签设置穿过文本的一条线--><a href=""> 这是链接</a><p>段落</p><!--这是块级标签，作为设置宽高的对比--></body>
</html>

运行：浏览器页面点击F12，通过网页调试查看设置的宽高，块级标签p标签受到影响，而行级标签都没有受到影响。

行级块标签

可以设置大小,不会占一行;

包括 < img/> ; < input />;

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><img src="img/tx.png" /><!-- style="width: 500px; height: 200px;"-->旁边的文本<!--图片标签，先把设置的宽高注释掉，对比设置前后的变化--><input type="text" /><!--表单文本输入框--></body>
</html>

运行：

设置宽高之后：

一般情况下使用块级标签包含行级标签，不使用行级标签包含块标签。
a可以包含任何标签，除去a本身；
p标签不能包含任何块级标签。

display

block ：设置标签为块标签 ;
inline ：设置标签为行级标签 ;
inline-block ：设置标签为行级块标签 ;
none ：隐藏标签（标签将在页面中完全消失,不会占用网页空间）。

div 和span

div是一个纯净版的块级标签；可以设置宽高。

span是一个纯净版的行级标签；给定宽高是无效的。

没有任何附加功能。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><hr/><div style="width: 200px; height: 100px;">div标签的属性默认</div><span style="width: 500px;height: 200px;">span标签的编辑属性;行级的,给定宽高是无效的;</span></body>
</html>

运行：
div内设置的宽高有效果；

span内设置宽高无效

在制作网页时经常使用div和span，可配合display改变标签的属性。

CSS块级、行级、行级块标签、display、div、span相关推荐

css变成块级元素_探讨行内元素转换为块级元素_html/css_WEB-ITnose
行内元素和块级元素对于前端来说是一个很重要的概念.在CSS中,只有块级元素有物理属性,而元素则有三种形态: 1. 块级元素:有物理属性,width,height写值起作用,而且要占据一行. 2. 行内 ...
CSS里常见的块级元素和行内元素
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为"block&q ...
[HTML/CSS]盒子模型，块级元素和行内元素
目录概述盒子模型块级元素行内元素可变元素总结概述在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项 ...
CSS块级元素和行内元素
1. 宽高 width:数值; height:数值; 也可用百分比! 长高的设置不会被后代继承 2. 背景 (1)背景颜色 background-color:颜色值; 元素的背景颜色默认为transp ...
html块中的内容垂直居中,css如何设置行内元素与块级元素的内容垂直居中
首先我们先了解一下行内元素和块级元素行内元素(内联元素):没有自己的独立空间,它是依附于其他块级元素存在的,空间大小依附于内容多少.行内元素没有度.宽度.内外边距等属性. 块级元素:占据独立的空间, ...
[css] 行内元素和块级元素有什么区别，如何相互转换？
[css] 行内元素和块级元素有什么区别,如何相互转换? 一般通过display属性来区分块级元素和行内元素,block代表块级元素,inline代表行内元素. 块级元素: 1.内容独占一行. 2.w ...
css块元素与行内元素特点,CSS区分块级元素和行内元素
块级元素(块级元素一般当做容器使用,既可以容纳内联元素也可以容纳块级元素) 特点: 1.每个块级元素都是独自占一行,其后的元素也只能另起一行,并不能两个元素共用一行. 2.元素的高度.宽度.行高和顶底 ...
CSS块级元素与行内元素的区别和联系
块元素(block element)一般是其他元素的容器元素,能容纳其他块元素或内联元素.块元素就好比一个四方块,可以放其他的四方块,并可以呈现在页面上任何地方. 默认情况下块元素,是独占一行的常见 ...
CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...
CSS中的块级元素、行内元素和行内块元素
元素是文档结构的基础,在css里面,每个元素生成了包含内容的框(box),大家都叫"盒子".但是不同的元素显示方式是不同的,有占据一整行的,有水平一个挨着一个的.比如:div 与s ...

CSS块级、行级、行级块标签、display、div、span

文章目录

块级标签

行级标签

行级块标签

display

div 和span

CSS块级、行级、行级块标签、display、div、span相关推荐

最新文章

热门文章