CSS之布局（行内元素的盒模型）

最新推荐文章于 2024-04-03 18:04:04 发布

不动声色的小蜗牛

最新推荐文章于 2024-04-03 18:04:04 发布

阅读量267

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_45720626/article/details/107356817

版权

CSS 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

行内元素的盒模型：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>行内元素的盒模型</title>
		
		<style>
			.s1{
				background-color: yellow;
				/*
					行内元素的盒模型：
						-行内元素不支持设置宽度和高度
						-行内元素可以设置padding，但是垂直方向的padding不会影响页面的布局
										border 				border
										margin 				margin
						
				 */
				/*width: 100px;
				height: 100px;*/
				/*padding: 100px;*/
				margin: 100px;
				
			}
			.box1{
				width: 200px;
				height: 200px;
				background-color: #BBFFAA;
			}
			
			a{
				/*
					display 用来设置元素显示的类型
						可选值：
							inline 将元素设置为行内元素
							block 将元素设置为块元素
							inline-block将元素设置为行内块元素
									行内块元素特点：既能设置宽度和高度又不会独占一行
							table 将元素设置为一个表格
							none 元素不在页面中显示
							
					visibility 用来设置元素的显示状态
						可选值：
							visible 默认值，元素在页面中正常显示
							hidden 元素隐藏，但位置仍然保留
				 */
				display: inline-block;
				width: 100px;
				height: 100px;
				background-color: orange;
			}
			
			
		</style>
		
		
	</head>
	<body>
		
		<a href="javascript:;">超链接</a>
		<a href="javascript:;">超链接</a>
		
		<span class="s1">我是span</span>
		<div class="box1"></div>
		
	</body>
</html>

不动声色的小蜗牛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS之布局（行内元素的盒模型）

行内元素的盒模型：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>行内元素的盒模型</title> <style> .s1{ background-color: yellow; /* 行内元素的盒模型： -行内元素不支持设置宽度和高度 -行内元素可以设置padding，但是
复制链接

扫一扫