css display元素：用于改变行元素和块元素的特点

- 日理万妓 2023-07-03 10:59 33阅读 0赞

1.block属性：块级元素，可以将行级元素变成块级元素

如果需要让块元素用于行元素的特点，可以把display:inline-block 或者 inline;

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<span class="text">2222</span>
    		<span class="text">333</span>
    	</body>
    	<style type="text/css">
    		.text{
    			display: block;   /*如果注释掉，是行级元素，宽高不生效*/
    			height: 100px;
    			width: 200px;
    			background-color: blue;
    		}
    	</style>
    </html>

2. inline属性：可以将块元素变成行元素，普通行元素设置宽高是不生效的，如果想要对行元素设置宽高，可以把display:inline-block 或者 inline;

每个块级元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排不下，才换新的一行，宽度随元素的内容而变化

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<div class="div">222</div>
    		<div class="div">333</div>
    		<div class="div1">444</div>
    	</body>
    	<style type="text/css">
    		.div{
    			display: inline; 
    		}
    		.div1{
    			display: inline-block;
    			background-color: bisque;
    		}
    	</style>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，33人围观）

还没有评论，来说两句吧...

相关阅读

相关浮动元素具有行内块元素特点（HTML、CSS）

浮动元素具有行内块元素特点（HTML、CSS） <!DOCTYPE html> <html lang="en"> <head>

小鱼儿/ 2023年10月03日 13:05/ 0 赞/ 38 阅读

相关 CSS-标签的显示模式，块级元素特点、行内元素特点、行内块级元素的特点，块元素、行内元素、行内块元素之间的转换

HTML 中的标签分为三种：块级元素、行内元素、行内块级元素；通过 CSS 中的样式属性 `display` 可转换元素的显示模式块级元素（block-level）

蔚落/ 2023年08月17日 17:17/ 0 赞/ 216 阅读

相关 css display元素：用于改变行元素和块元素的特点

1.block属性：块级元素，可以将行级元素变成块级元素如果需要让块元素用于行元素的特点，可以把display:inline-block 或者 inline;

- 日理万妓/ 2023年07月03日 10:59/ 0 赞/ 34 阅读

相关 CSS的元素显示模式-块元素、行内元素和行内块元素

CSS的元素显示模式什么是元素显示模式元素的显示模式是元素以什么方式进行显示。比如<div>自己占一行，<span>一行可以放多个。元素显示模式的分类

ゝ一纸荒年。/ 2022年12月17日 12:59/ 0 赞/ 275 阅读

相关 CSS块级元素和行内元素

html中的标签元素大体被分bai为三种不同的类型：块级元素du、内联zhi元素(又叫行内元素dao)和内联块级元素。块级元素特点： 1、每个块级元素都从新的一行开始

谁践踏了优雅/ 2022年12月05日 10:08/ 0 赞/ 314 阅读

相关 CSS的元素显示模式（块元素 & 行内元素 & 行内块元素）

文章目录 1 什么是元素显示模式 2 块元素 versus 行内元素 3 行内块元素 4 元素显示模式总结 5 元素显示模式转换

客官°小女子只卖身不卖艺/ 2022年11月17日 14:58/ 0 赞/ 313 阅读

相关 CSS块级元素和行内元素

1. 块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。“form"这个块元素比较特殊，它只能用来容纳其他块元素。 2. 3.

你的名字/ 2022年08月09日 14:46/ 0 赞/ 258 阅读

相关 CSS块级元素和行级元素

1. 根据规定，每个网页元素都会存在display属性，其中像div,存在的默认值为”block”属性的即为块级元素 ; 而”span”元素的默认值为”inline”，称

╰半夏微凉°/ 2022年06月17日 02:44/ 0 赞/ 308 阅读

相关 CSS块级元素和行内元素

CSS块级元素和行内元素更多学习标签： [块级元素][Link 1] [行内元素][Link 2] 本文导读：HTML中的元素可分为两种类型：块级元素和

心已赠人/ 2022年06月16日 10:06/ 0 赞/ 323 阅读

相关块级元素、行内元素、行内块级元素的特点

1.块级元素： (1)独自占据一行,故默认宽度是容器的100%。 (2)可以设置宽、高、行高、内外边距。 (3)可以容纳行内元素和其他块级元素。注：文字类的块级元

野性酷女/ 2021年11月23日 01:08/ 0 赞/ 550 阅读