21-(盒模型)行内、块级元素

七色的天空

已于 2023-04-05 11:50:34 修改

阅读量60

点赞数

分类专栏： 03_CSS 文章标签： css html css3

于 2023-04-05 11:49:29 首次发布

本文链接：https://blog.csdn.net/q506174602/article/details/129964798

版权

03_CSS 专栏收录该内容

83 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>行内 块级元素</title>
	<style>
		* {
			padding: 0;
			margin: 0;
		}
		/*
		1.块级元素 block
			- 独占一行
			- 可以设置宽高
			- 默认的宽度是浏览器的宽度
			div, h1-h6, p, ol/ul-li
		2.行内元素 inline
			- 不独立成行
			- 不可以设置宽高
			- 默认的宽高是内容撑起来
			span a, img, textarea, input
		3.行内块元素 inline-block
			- 不独立成行
			- 可以设置宽高

		inline
		 */
		.box {
			/*font-size: 0*/
			display: table;
			word-spacing: -1em;
		}
		div {
			/*width: 200px;*/
			height: 100px;

			/*
			空隙产生的原因:
				当元素有行内的特性时，元素之间的空白符 回车换行都会被解析成一个空白符(,如果不为零则会占据一定的宽度，并且间距会随着字体的大小而变化)
			解决办法:
				1.div之间不换行 不加空格
					缺点: 代码可读性变差;
				2.给父元素设置font-size:0; 但是必须要给子元素单独设置font-size  否则字会消失
					缺点 增加代码量
				3.子元素设置浮动
					缺点: 清除浮动;
				4.子元素设置 margin-left: -*px;
					缺点: 兼容性不好; 元素之间的间隙大小是根据上下文中的字体大小决定的，
					但是每个浏览器的换行空隙大小不同, 所以一般不用
				5.父元素设置: display: table; word-spacing: -1em;
				  子元素设置： display: inline-block;
			 */
		}
		.box1 {
			/*font-size: 36px;*/
			background-color: red;
			display: inline-block;
		}
		.box2 {
			/*font-size: 36px;*/
			background-color: pink;
			display: inline-block;
		}
		h1 {
			background-color: green;
		}
		img {
			width: 400px;
		}
	</style>
</head>
<body>
	<!-- 
	独占一行: div, h1-h6, p, ol/ul-li, ;
    不独占一行: span a, img, textarea, input;
	 -->

	 <div class="box">
	 	<div class="box1">
	 		第一个盒子第二个盒子
		 </div>
		 <div class="box2">
		 	第二个盒子第二个盒子
		 </div>
	 </div>
	 <h1>一级标题</h1>

	 <span>磨人的小妖精</span>

	 <img src="../../01_HTML/images/古诗词.webp"  alt=""> 好图
</body>
</html>

上述运行结果：

Tips:解决行内元素间产生的空隙问题

如图所示，设置inline-block，就会使得两个盒子直接产生空隙

对于解决这一问题最好的方法有两种

第一种：给父元素加入display:table

.parent {
        display: table;
      }

第二种：给父元素加入word-spacing: -1em;

 .parent {
    word-spacing: -1em;
      }

七色的天空

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
21-(盒模型)行内、块级元素

21-(盒模型)CSS属性_行内块级元素
复制链接

扫一扫

专栏目录