0428专题：行内元素与块状元素

#kuaizhuang1{width: 200px;height: 100px;background-color: red;float: left;
}
#kuaizhuang2{width: 300px;height: 100px;background-color: gold;float: left;
}
#kuaizhuang3{width: 300px;height: 100px;background-color: green;float: left;
}
#kuaizhuang4{width: 300px;height: 100px;background-color: blue;float: left;
}
#hangneiyuansu{background-color: cyan;width: 1000px;height: 1000px;color: orange;
}
<!--块状元素-->
<div id="kuaizhuang1"></div>
<div id="kuaizhuang2"></div>
<div id="kuaizhuang3"></div>
<div class="qcfd"></div>
<div id="kuaizhuang4">这是块状元素</div>
<div class="qcfd"></div>
<!--行内元素-->
<span id="hangneiyuansu">这是行内元素</span>

块状元素与行内元素的相互转换 display
|-转行内 inline
|-转块状 block（块）
|-转行内块状在HTML5中，程序员可以自定义标签，在任意定义标签中，加入display:block;即可，当然也可以是行内或行内块状。-block

<!--相互转换-->
<div style="display: inline; width: 100px; height: 100px; ">这是块状元素转行内元素测试</div><br />
<div style="display: inline-block;  height: 100px; ">这是块状元素转行内块状元素测试</div>
<div style="width: 100px; height: 100px; ">这是块状元素这是块状元素</div>
<span style="display: block; width: 200px; height: 200px; ">这是行内元素转块状元素测试</span>
<span style="display: inline-block;  height: 200px; ">这是行内元素转行内块状元素测试</span>

#daohang{width: 510px;height: 50px;border: 1px solid blue;
}
.dh{width: 100px;height: 48px;background-color: burlywood;color: red;float: left;line-height: 48px;text-align: center;border: 1px solid red;
}
<div id="daohang"><div class="dh">语文</div><div class="dh">数学</div><div class="dh">英语</div><div class="dh">物理</div><div class="dh">化学</div>
</div>

转载于:https://www.cnblogs.com/mjwwzy/p/9033677.html

0428专题：行内元素与块状元素相关推荐

HTML的display属性将行内元素、块状元素、行内块状元素互相转换以及三者的区别
1.行内元素查看演示 (1)设置宽高无效 (2)对margin仅设置左右方向有效,上下无效:padding设置上下左右都有效,即会撑大空间 (3)不会自动进行换行 <html> < ...
HTML行内元素、块状元素和行内块状元素的区分
HTML 5 的常用元素分类 HTML可以将元素分类方式分为行内元素.块状元素和行内块状元素三种,这三者是可以互相转换的,通过display属性可以实现互相转换 (1)display:inline;转 ...
行内元素、块状元素和行内块元素
1关于行内元素和块状元素的说明根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属 ...
HTML行内元素、块状元素、行内块状元素介绍
目录 1.行内元素: 1.1.行内元素特征: 1.2.常见行内块元素: 2.块状元素 : 2.1.块状元素特征: 2.2.常见块状元素 : 3.行内块状元素: 3.1.行内块状元素特征: 3.2.常见 ...
行内和块级元素区别?如何让行内元素设置宽高?
行内和块级元素区别: 1.行内元素与块级函数可以相互转换,通过修改display属性值来切换块级元素和行内元素,行内元素display:inline,块级元素display:block. 2.行内元素 ...
CSS 5 CSS 内联元素和块状元素
CSS 文章目录 CSS 5 CSS 内联元素和块状元素 5.1 内联元素[inline] 5.2 块级元素[block] 5.3 内联元素与块级元素的区别 5.3.1 内联元素 5.3.2 块状 ...
html 块状元素转换,块状元素与内联元素的转换
在布局页面的时候,HTML标签分成两种,块状元素和内联元素(我们平时用到的标签div和p就是块状元素,链接标签a就是内联元素).它们是很重要的两个概念,既然说到概念就先看看块状元素和内联元素的定义,在 ...
行内元素和块状元素一览表
块状元素: address:地址 blockquote: 块引用 center :居中对齐块 dir:目录列表 div:常用块级容易,也是CSS layout的主要标签 dl:定义列表 fieldse ...
行内元素和块状元素的水平居中设置
我在上一篇文章里总结了一下块状元素.内联元素.内联-块状元素的区别三者的一个重要区别在于是不是独占一行以及能不能设置宽高.内外间距. 在这个前提下,我们应该怎么设置元素在水平方向上的居中呢? 行内元 ...

0428专题：行内元素与块状元素

0428专题：行内元素与块状元素相关推荐

最新文章

热门文章