CSS中内联元素的盒子模型特点？行内元素，块元素，行内块元素之间的相互转换

2023-12-21 20:57:20

行内元素的盒模型

从这几点分析：内容区、内边距 、边框 、外边距

? ? ? ? 1: 不能设置width和height，被内容撑开

? ? ? ? 2: 可以设置padding，但垂直方向padding不会影响页面的布局，不会挤别人

? ? ? ? 3: 可以设置边框，但是垂直的边框不会影响到页面的布局，不会挤别人

? ? ? ? 4: 可以设置水平方向的外边距，水平方向的相邻外边距不会重叠，而是求和，但不支持垂直外边距

display 用来设置元素显示的类型

? ? ? ? 可选值：

? ? ? ? ? ? ? ? inline 将元素设置为行内元素

? ? ? ? ? ? ? ? block 将元素设置为块元素

? ? ? ? ? ? ? ? inline-block 行内块块元素（即可以设置宽高，又不会独占一行）

? ? ? ? ? ? ? ? table 将元素设置为一个表格

? ? ? ? ? ? ? ? none 元素不在页面中显示（隐藏一个元素）

visibility 用来设置元素的显示状态

? ? ? ? 可选值：

? ? ? ? ? ? ? ? visible 默认值 元素在页面中正常显示

? ? ? ? ? ? ? ? hidden 元素不在页面中显示（隐藏一个元素），位置依然保留

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.s1{
				background-color: indianred;       
				/* width: 200px;
				height: 200px; */			
				/* padding: 30px; */
				/* border: 10px blue solid; */
			    margin: 50px;
				
			}
 
			.box1{
				width: 100px;
				height: 100px;
				background-color: red;
				/*  会挤别人，影响布局*/
				/* padding: 30px;
				border: 10px blue solid; */
 
			}
			.box2{
				width: 100px;
				height: 100px;
				background-color: orange;
			}
 
 
			/* 需求：给超链接设置一个大小100px的大小宽高 */
			.a1{
				
				width: 100px;
				height: 100px;
				background-color: yellowgreen;
				/* display: block; */
 
				/* visibility: hidden; */
				display: none;
			}
				
		</style>
	</head>
	<body>
		<!-- 行内元素盒子例子 -->
		<span class="s1">我是一个span--s1</span>
		<span class="s1">我是一个span--s1</span>
 
		<!-- 对比块元素盒模型 -->
		<div class="box1"></div>
		<div class="box2"></div>
		
        <!-- 行内元素转块元素 -->
		<a href="##" class="a1">超链接</a>
		<a href="##">超链接2</a>
 
	</body>
</html>

文章来源:https://blog.csdn.net/csgojingyu/article/details/134869153
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。