CSS盒子模型

最新推荐文章于 2022-08-07 17:57:53 发布

鑫.

最新推荐文章于 2022-08-07 17:57:53 发布

阅读量148

点赞数

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

本文链接：https://blog.csdn.net/qq_43505736/article/details/113246110

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

盒子模型》》》标签之间存在包含关系位置调整

内边距

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			#div1{
				border: 1px groove red;
				color: black;
				width: 200px;
				height: 200px; /*width、height内部容量*/
				/*内边距:内部元素距离当前块元素边界距离 容量大小不改变
				边线向外扩充*/
				padding:100px;/*内边距四个方向均设置100*/
				/*padding: 100px 50px;  上下100左右20  顺序：上右下左*/	
			}
		</style>
	</head>
	<body bgcolor="yellowgreen">
		<div id="div1">
			<a href="https://www.baidu.com" style="color: black;">百度</a><br/>
			<h1>abcd</h1>
		</div>
	</body>

外边距

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#div2{
				border: 1px solid:red;
				background-color: yellowgreen;
				width: 200px;
				height: 200px;
				/*外边距 实际容量不变 包含关系只增大距离*/
				/*margin: 200px;*/
				margin: 0px auto; 居中
			}
		</style>
	</head>
	<body>
		<div id="div2">
			
		</div>
	</body>

行内元素和块元素的转换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.div1{
				width: 200px;
				height: 200px;
				background: lightyellow;
				border: 1px solid lightblue;
				margin: auto;
			}
			.s1{
				width: 100px;
				height: 100px;
				background: lightskyblue;
				border: 1px solid lightyellow;
				margin-top:20px;
				/*不生效,span是行内元素,无盒子模型 只有块标签有盒子模型
				 转换：display block块(转换为块) 
				 inline行内
				 行内元素设置宽和高未必生效，块元素一定生效
				 * */
				display: block;
				
			}
			
		</style>
	</head>
	<body>
		<div class="div1">
			<span class="s1">今天天气真好</span>
		</div>
	</body>
</html>

鑫.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS盒子模型

盒子模型》》》标签之间存在包含关系位置调整内边距 <head> <meta charset="utf-8" /> <title></title> <style> #div1{ border: 1px groove red; color: black; width: 200px; height: 200px; /*width、height内部容量*/ /*内边距:内部元素距离当前块元素
复制链接

扫一扫