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

最新推荐文章于 2024-09-15 21:53:51 发布

趋之

最新推荐文章于 2024-09-15 21:53:51 发布

阅读量436

点赞数 13

分类专栏： css 文章标签： css 前端

本文链接：https://blog.csdn.net/csgojingyu/article/details/134869153

版权

css 专栏收录该内容

31 篇文章 3 订阅

订阅专栏

行内元素的盒模型

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

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>