8.内外边距和边框粗细

最新推荐文章于 2023-05-16 16:59:29 发布

P_ning

最新推荐文章于 2023-05-16 16:59:29 发布

阅读量258

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/P_ning/article/details/90733061

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

盒子宽的组成(width)	盒子高的组成(height)
border-left	border-top
border-left	border-top
padding-left	padding-top
width	height
padding-right	padding-bottom
border-right	padding-bottom

margin为外边距,简单来说就是与其他盒子之间的内容,和padding差不多,就不再描述
zh 自己用文档写后截图的,别嫌弃丑
简单了解


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
	.c1{
		width:200px;
		height:200px;
		border:10px solid #0C6;
		background:#F96;
	}	
</style>
</head>

<body>
<div class="c1">
绿色为边框margin<br><br>
橙色到文字的距离为内边距(没设置默认为0)border<br><br>
绿色到边界为外边距padding
</div>
</body>
</html>

调内外边距


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
	.c1{
		border:10px solid #0C6;
		background:#F96;
		margin:16px;
		padding:14px;
	}	
</style>
</head>

<body>
<div class="c1">想调整一个按钮或盒子位置大小时候,我们可以通过内外边距调整,因为如果限定大小会导致因为字体长短不同而得到不是我们想要的结果,如果一个个调又失去了选择器的意义
</div>

</body>


</html>

新浪网页的导航栏


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
	div.c1{
		height:45px;
		width:1860px;
		border-top:3px #ff8500 solid;
		border-bottom:1px #edeff0 solid;
		background-color:#fcfcfc;
		line-height:41px;	
	}
	a.c2{
		margin-left:435px;
		padding-left:15px;
		padding-right:15px;
		color:#4c4c4c;
		text-decoration:none;
		display:inline-block;
	}
	a.c3{
		padding-left:15px;
		padding-right:15px;
		color:#4c4c4c;
		text-decoration:none;
		display:inline-block;
	}
	a.c4{
		margin-left:297px;
		padding-left:18px;
		padding-right:18px;
		color:#4c4c4c;
		text-decoration:none;
		display:inline-block;
	}
	a.c5{
		padding-left:18px;
		padding-right:18px;
		color:#4c4c4c;
		text-decoration:none;
		display:inline-block;
	}
	a.c2:hover,a.c3:hover,a.c4:hover,a.c5:hover{
		background-color:#edeff0;
		color:#ff8400;
	}
		
</style>
</head>

<body>
<div>
	<div class="c1">
		<a href="#" class="c2">设为首页</a>
		<a href="#" class="c3">手机新浪网</a>
		<a href="#" class="c3">移动客户端</a>    
		<a href="#" class="c4">登陆</a>
		<a href="#" class="c5">微博</a>
		<a href="#" class="c5">博客</a>
		<a href="#" class="c5">邮箱</a>
		<a href="#" class="c5">网站导航</a>
     </div>
</div>
</body>
</html>

改变内边距会令盒子大小发生变化


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
	div{
		width:100px;
		height:100px;
		border:1px solid #F93;
	}
	div.c1{
		padding:20px;
	}
</style>
</head>

<body>
<div></div>
<br>
<div class="c1"></div>
<!--改变内边距会令原本定义好大小的盒子变大-->
<!--但只会撑开又定义好width和height的盒子-->
</body>
</html>

内边距调整


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>

<style type="text/css">
	.c1{
		width:300px;
		height:300px;
		background-color:#99F;
	}
	.c2{
		width:100px;
		height:100px;
		background-color:#F00;
	}
	.c3{
		width:100px;
		height:100px;
		background:#99F;
		padding:100px;
	}
</style>
</head>

<body>

<div class="c1">
	<div class="c2"></div>
</div>
将其改成300px*300px且红框再蓝框中间
<div class="c3">
	<div class="c2"></div>
</div>



</body>
</html>

新闻列表


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
	.c1,.c2,.c3{
		width:600px;
		height:40px;
		font-size:20px;
		padding-top:10px;
		padding-left:40px;
		line-height:40px;
		border:3px #CCCCCC solid;
		border-top:0;
		border-bottom:2px #cccccc dashed;
		display:inline-block;
	}
	.c1{
		border-top:2px #cccccc solid;
		padding-left:20px;
		font-size:25px;
	}
	.c2{
		width:580px;
	}
	.c3{
		width:580px;	
		border-bottom:2px #cccccc solid;
	}
	.c1:hover,.c2:hover,.c3:hover{
		color:#F90;
	}
</style>
</head>

<body>
	<b class="c1">最新文章</b>
	<a class="c2">新闻1</a>
	<a class="c2">新闻2</a>
	<a class="c2">新闻3</a>
	<a class="c3">新闻3</a>
</body>
</html>

新闻列表(改)


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
	*{
		margin:0;
		padding:0;
		<!--浏览器又默认的内外边距,取消他们-->
	}
	div.c{
		background:#eee
		}
	.c{
		width:380px;
		height:263px;
		border:1px #ccc solid;
		padding:20px 15px 0;
	}
	.c h2{
		color:#202026;
		font:20px;
		border-bottom:2px #ccc solid;
		padding-bottom:3px;
		margin-bottom:12px;
	}
	.c li{
		list-style:none;<!--取消li前小点-->
		height:38px;
		line-height:38px;
		border-bottom:1px #ccc dashed;
		text-indent:1em;<!--首行缩进-->
	}
	.c li a{
		font-size:15px;
		text-decoration:none;
		color:#333;
	}
	.c a:hover{
		text-decoration:underline;<!--添加下滑线-->
	}
</style>
</head>

<body>

<div class="c">
	<h2>最新文章</h2>
    <ul>
    	<li><a href="#">新闻1</a></li>
        <li><a href="#">新闻2</a></li>
        <li><a href="#">新闻3</a></li>
		<li><a href="#">新闻4</a></li>
        <li><a href="#">新闻5</a></li>
    </ul>
</div>
</body>
</html>