CSS盒子模型和元素溢出

最新推荐文章于 2022-07-24 23:59:53 发布

IT-Xu_LongTeng

最新推荐文章于 2022-07-24 23:59:53 发布

阅读量420

点赞数 1

本文链接：https://blog.csdn.net/weixin_44269204/article/details/88666591

版权

.盒子模型
(1)重要的组成元素:
content(内容),padding(内边距),border(边框),margin(外边距)
(2)margin
margin:100px auto;(100px 表示的是上下的外边距 auto表示的左右水平居中)
margin:10px,20px,30px,40px;(上,右,下,左,)
margin;10px,20px,30px;(0px 表示上 20px表示左/右 30px表示下)
margin: 10px 20px;(10px表示上下 20px表示左右)
margin: 30px;(30px表示上右下左都为这值)
(3)让元素中的内容与元素边框之间的距离增大,可以设置元素的内边距
padding: 10px 20px 30px 40px;(上10px,右20px,下30px,左40px)
padding: 10px 20px 30px;(上 , 左/右 , 下)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.div_01{
				border-top: 1px solid #f00;
				border-bottom: 3px solid #666;	
				width: 400px;
				height: 54px;
				font: 20px "微软雅黑";
				color: #333;
				line-height: 54px;	
			}
			/*左外边距15px*/
			.div_02{
				margin-left: 15px;
			}
			
		</style>
	</head>
	<body>
		<div class="div_01">
			<div class="div_02">新闻列表	</div>				
		</div>
	</body>
</html>

2.元素溢出
产生:元素溢出指一个元素中含有其他元素,而其他元素超出了这个元素(父元素),我们把这种情况称之为元素溢出.
解决方法:
overflow:hidden;超出父元素的部分隐藏(剪切)不在可见
overflow: scroll;设置此属性,内容会被裁剪, 但是会添加滚动条,以便显示被裁剪的内容
overflow:visible;默认值,不会修剪,会呈现在元素框外
overflow-y:scroll;垂直滚动条
overflow-x:scroll;水平滚动条
overflow:auto;如果剪切了才显示滚动条

IT-Xu_LongTeng

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS盒子模型和元素溢出

.盒子模型(1)重要的组成元素:content(内容),padding(内边距),border(边框),margin(外边距)(2)marginmargin:100px auto;(100px 表示的是上下的外边距 auto表示的左右水平居中)margin:10px,20px,30px,40px;(上,右,下,左,)margin;10px,20px,30px;(0px 表示上 20px...
复制链接

扫一扫