前言

行内元素,行内块元素是html中的一个基本概念,想要进行良好的页面布局,就需要理解什么是行内元素,块元素,并理解他们如何进行转换

考

一、了解各个元素的概念

1.概念：

可以将web页面中的一行，认为是一块领地,每个标签是一个首领行内元素:就是在web页面布局时可以与其他元素一块共享一行的元素
块元素：就是每一个元素,占有一行,即使自己的内容不够多也不让其他元素侵犯自己的底盘
行内块元素：块元素经过一系列转换,终于被征服,所以就变成了行内块元素,与行内元素没有了本质的区别

2.举个例子：

<!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>Document</title><style>* {/* 这里是将每个元素外间隔为3像素,背景颜色变色方便我们观察 */margin: 3px;}span,p{background-color: aquamarine;}</style>
</head>
<body><span>Hello,我是行内元素</span><span>Hello,我是行内元素</span><p>我是p标签,我是块元素</p><p>我是p标签，我是块元素</p>
</body>
</html>

3.样式展示

 如图所示,占据一行的就是块元素,一行有两块的就是行内元素

二、如何将块元素变为行内块元素？

1.修改css中的dispaly属性

 相对于刚才,给p标签加入了一个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>Document</title><style>* {/* 这里是将每个元素外间隔为3像素,背景颜色变色方便我们观察 */margin: 3px;}span,p{background-color: aquamarine;}p {display: inline-block;}</style>
</head>
<body><span>Hello,我是行内元素</span><span>Hello,我是行内元素</span><p>我是p标签,我是块元素</p><p>我是p标签，我是块元素</p>
</body>
</html>

图示：

2.在进行样式选择的时候加入浮动

代码如下：

<!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>Document</title><style>* {/* 这里是将每个元素外间隔为3像素,背景颜色变色方便我们观察 */margin: 3px;}span,p{background-color: aquamarine;}p {float: left;}</style>
</head>
<body><span>Hello,我是行内元素</span><span>Hello,我是行内元素</span><p>我是p标签,我是块元素</p><p>我是p标签，我是块元素</p>
</body>
</html>

图示：

三、将行内元素变为块元素？

1.代码示例

 使用的还是display这个属性

<!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>Document</title><style>* {/* 这里是将每个元素外间隔为3像素,背景颜色变色方便我们观察 */margin: 3px;}span,p{background-color: aquamarine;}span{display: block;}</style>
</head>
<body><span>Hello,我是行内元素</span><span>Hello,我是行内元素</span><p>我是p标签,我是块元素</p><p>我是p标签，我是块元素</p>
</body>
</html>

2.效果展示

总结

清楚块元素、行内元素、行内块元素的概念,可以是我们更规范的布局,css样式表将块元素修改为行内块元素属于css知识,后续会在css专栏细说,大家在这里知道这三种元素的区别就好。

一文搞懂行内元素、块元素、行内块元素相关推荐

css变成块级元素_探讨行内元素转换为块级元素_html/css_WEB-ITnose
行内元素和块级元素对于前端来说是一个很重要的概念.在CSS中,只有块级元素有物理属性,而元素则有三种形态: 1. 块级元素:有物理属性,width,height写值起作用,而且要占据一行. 2. 行内 ...
元素（块、行内、行内块
块元素的特点 1.支持所有样式 2.块级元素独占一行 3.块级元素默认宽度和父元素一样常用块元素块级元素一般 div p ol ul h1-h6 li dl dt dd 等都是初始化(样式重置 ...
html 块内元素下移,html——行内元素、块元素、行内块元素
行内元素:span ,a, ,strong , em, del, ins.特点:在一行上显示:不能直接设置宽高:元素的宽和高就是内容撑开的宽高. 块元素:div,h1-h6,p,ul,li.特 ...
什么是块元素?什么是行内元素?
什么是块元素?什么是行内元素?想必学习web前端培训知识的同学们,课上都会有提到这一方面,如果对这个知识点还不是很熟悉,可以看看下面小编整理的内容. 什么是块元素?什么是行内元素? HTML标签语言提 ...
同一DIV内，两个行内块元素不对齐的解决方案
同一DIV内,两个行内块元素不对齐的解决方案参考文章: (1)同一DIV内,两个行内块元素不对齐的解决方案 (2)https://www.cnblogs.com/qfly/p/8085125.htm ...
Web前端技术分享：什么是块元素?什么是行内元素?
什么是块元素?什么是行内元素?想必学习web前端知识的同学们,课上都会有提到这一方面,如果对这个知识点还不是很熟悉,可以看看下面小千整理的内容. 什么是块元素?什么是行内元素? HTML标签语言提供了 ...
html能插入背景的行级元素,Html元素类型：块级元素、行内元素（内联元素）和行内块级元素...
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? html中的标签元素大体被分为三种不同的类型:块级元素.内联元素(又叫行内元素)和内联块级元素.事实上,我以前用的时候只 ...
块级元素和行内元素，以及行内块元素
目录讲解: CSS中规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,比如div默认display属性值为"block",成为" ...
HTML元素分类：行内元素，块级元素，行内块元素；及其各自的特点
目录块级元素行内元素(内联元素) 行内块元素(内联块级元素) 一.块级元素(block) 定义:默认情况下,独占一行的元素就是块级元素. 特点: 每个块级元素独占一 ...

一文搞懂行内元素、块元素、行内块元素

文章目录

前言

一、了解各个元素的概念

1.概念：

2.举个例子：

3.样式展示

二、如何将块元素变为行内块元素？

1.修改css中的dispaly属性

2.在进行样式选择的时候加入浮动

三、将行内元素变为块元素？

1.代码示例

2.效果展示

总结

一文搞懂行内元素、块元素、行内块元素相关推荐

最新文章

热门文章