盒子模型

最新推荐文章于 2022-05-18 10:00:28 发布

LUCK.Y-ZT

最新推荐文章于 2022-05-18 10:00:28 发布

阅读量186

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/qq_52232797/article/details/111224420

版权

本文详细介绍了CSS中的边框属性，包括边框样式、宽度、颜色和圆角，以及背景属性，如颜色、图片、重复、位置和附件。此外，还探讨了外边距的使用，包括塌陷问题的解决办法，以及内边距对元素尺寸的影响。最后，讲解了display属性如何转换元素的显示方式，以及visibility属性在隐藏元素时的区别。

摘要由CSDN通过智能技术生成

盒子模型

1.1 边框线 border

属性	描述
border-style	边框线类型
border-width	边框线粗细
border-color	边框线颜色
border-radius	圆角效果

div{
    width: 200px;
    height: 200px;
    /* border-style: solid;
    border-width: 2px;
    border-color: #5F9EA0; */

    border-top: 2px double green;
    border-right: 5px dotted red;
    border-bottom: 3px solid cyan;
    border-left: 2px dashed #A52A2A;

    border: #A52A2A solid 2px ;
}

1.2 背景 background

属性	描述
background-color	背景颜色
background-image:url()	背景图片
background-repeat	背景是否重复
background-position	背景图片的位置
background-size	背景图片的大小
background-attachment	背景图片的定位属性

div{
    width: 300px;
    height: 300px;

    /* background-color: #008000;
    background-image: url(imgs/2.jpg);
    background-repeat: no-repeat; */

    background: #008000 url(imgs/2.jpg) no-repeat;

    background-size: 150px 150px;
    background-position: center; 
    /* 该属性通常结合position属性使用，图片的位置会根据浏览器的位置进行显示 */
    background-attachment: fixed;
}

1.3 外边距 margin

外边距：盒子与盒子之间的举例
在外边距中，当两个元素具有相对性的方形设置了间距，那么最终的实际间距取两只之间的较大值
当父元素中的第一个子元素使用了margin-top时，会出现塌陷问题(整个父元素会向下移动)
出现该现象的原因：

1、第一个子元素

2、margin-top
如何处理：

1、让使用margin-top的元素不作为第一个子元素

2、使用内边距来代替外边距

3、给父元素一个边框线

属性	描述
margin:10px;	元素的四个方向都有10像素的间距
margin:10px 20px;	上下10px 左右20px
margin:10px 15px 20px;	上10px 左右15px 下20px
margin:10px 15px 20px 25px;	上右下左(顺时针方向)

可以设置块元素在水平方向居中

margin: 0 auto;

1.4 内边距 padding

盒子中的内容与盒子之间的距离称为内边距。

属性	描述
padding:10px;	元素的四个方向都有10像素的间距
padding:10px 20px;	上下10px 左右20px
padding:10px 15px 20px;	上10px 左右15px 下20px
padding:10px 15px 20px 25px;	上右下左(顺时针方向)

注意：

1、padding属性在使用时，会改变元素所占据的位置(撑开)

2、如果使用padding值后，元素的宽高减去对应的padding后的元素宽高小于元素内容正常显示需要的值，那么就不建议使用padding进行调整。
(例如：元素高100px，内容显示需要50px，padding-top：80px,元素减去padding后的高度为20px，20px<50px，此时就不建议使用padding)

1.5 display属性

在HTML中大多数的标签都是语义化标签，但是标签的数量有限，并不能覆盖所有的可能出现的需求情况。
行元素和块元素之间需要进行相互转换，或者是元素需要同时具备行元素和块元素的特征，那么此时就需要使用display

属性	描述
display:none;	无display属性，可以起到隐藏的作用(不占空间)
display:inline;	将元素转换为行元素
display:block;	将元素转换为块元素
display:inline-block;	将元素转换为行内块元素(可以设置宽高可以在同一行显示)

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body,p,div,ul,li{
				margin: 0;
				padding: 0;
			}
			div{
				width: 300px;
				height: 200px;
				margin: 0 auto;
				background-color: green;
			}
			p{
				display: none;
				width: 100px;
				height: 100px;
				background-color: #008B8B;
			}
			div:hover p{
				display: block;
			}
		</style>
	</head>
	<body>
		<div>
			<p></p>
		</div>
	</body>
</html>