CSS (五) 模型框

最新推荐文章于 2024-08-27 14:29:58 发布

久醉绕心弦，

最新推荐文章于 2024-08-27 14:29:58 发布

阅读量103

点赞数

分类专栏： css 文章标签： css html5 html

本文链接：https://blog.csdn.net/weixin_42262081/article/details/120314636

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

css模型框

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。
在这里插入图片描述
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

1、边框：border
元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。border 属性允许你规定元素边框的样式、宽度和颜色。
border-style 的默认值是 none，如果没有声明样式，就相当于 border-style: none。
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.wk{
				height: 20px;
				width: 150px;
				/* 设置边框为实线 */
				border-style: solid;
				/* 设置边框颜色 */
				border-color: green;
				/* 设置边框宽度 */
				border-width: 10px;			
			}
		</style>
	</head>
	<body>
		<div class="wk">			
		</div>
	</body>
</html>

在这里插入图片描述

以上面的div为例：
圆角边框： border-radius属性

.wk{ border-radius: 10px;}

在这里插入图片描述

虚线边框：dashed

.wk{ border-style : dashed;}

在这里插入图片描述

双边框：double

.wk{ border-style : double;}

在这里插入图片描述

3D坡口边框：groove
效果取决于 border-color 值

.wk{ border-style : groove;}

在这里插入图片描述

3D脊线边框：ridge
效果取决于 border-color 值

.wk{ border-style : ridge;}

在这里插入图片描述

3D inset 边框：inset
效果取决于 border-color 值

.wk{ border-style : inset;}

在这里插入图片描述

3D outset 边框：outset
效果取决于 border-color 值

.wk{ border-style : outset;}

在这里插入图片描述
点线边框：dotted

.wk{ border-style : dotted;}

在这里插入图片描述
none - 定义无边框

.wk{ border-style : none;}

hidden - 定义隐藏边框

.wk{ border-style : hidden;}

单独设置各边
指定不同的侧面不同的边框：

.wk{ border-top-style:dotted; //顶部
	 border-right-style:double; //右边
	 border-bottom-style:groove; //底部
	 border-left-style:solid;} //左边

也可以通过设置单一属性，效果一样：

.wk{ border-style: dotted double groove solid;}

在这里插入图片描述
2、内边距：padding
padding 属性定义元素边框与元素内容之间的空白区域。

设置的各边都有 30 像素的内边距

.wk{ padding: 30px;}

在这里插入图片描述
padding属性有两个值：

.wk{ padding: 30px 40px;}

上下内边距为30px，左右内边距为40px
在这里插入图片描述
padding属性有三个值：

.wk{ padding: 30px 40px 50px;}

上内边距为30px，左右内边距为40px，下内边距为50px
在这里插入图片描述

padding属性有四个值：
则由上内边距顺时针顺序围绕元素旋转，上内边距为30px，左内边距为40px，右内边距为40px下内边距为50px

.wk{ padding: 30px 40px 50px 60px;}

在这里插入图片描述

四个边设置不同的内边距

.wk{ padding-top: 50px;
     padding-right: 30px;
     padding-bottom: 50px;
     padding-left: 80px;}

在这里插入图片描述
3、外边距
设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。

为所有四个边设置不同的外边距

.wk{ margin-top: 100px;
	 margin-bottom: 100px;
	 margin-right: 150px;
	 margin-left: 80px;}

在这里插入图片描述

设置的各边都有 30 像素的外边距：

.wk{ margin: 30px;}

在这里插入图片描述
其他margin属性有不同值得效果与内边距padding一样，这里就不一一列举了。

auto值
该例中元素将占据指定150px宽度，并且剩余空间将在左右边界之间平均分配而水平居中

.wk{ margin: auto;}

在这里插入图片描述

设置margin属性上下外边距，水平居中

margin: 50px auto;

在这里插入图片描述

久醉绕心弦，

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS (五) 模型框

css模型框CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。1、边框：border元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。border 属性允许你规定元素边框的样式、宽度和颜色。border-style 的默认值是 none，如果没有声明样式，就相当于 b
复制链接

扫一扫