css盒子模型

最新推荐文章于 2024-02-09 10:51:00 发布

qq249663289

最新推荐文章于 2024-02-09 10:51:00 发布

阅读量69

点赞数

分类专栏： css 文章标签： CSS JSP Cache HTML

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

盒子模型：

概述：网页中的所有元素都可以看成一个盒子，占据一定的页面空间

一个盒子有 context(内容) border（边框） padding(间隙) margin(间隙) 4个部分组成

(一般来说。width和height属性都是指 width+padding或height+padding)。

border

---border的最外围即元素的最外围，占据一定的空间

包含3个属性 color(颜色) width(粗细) style(样式)，下面以具体的列子来说明

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<title>My JSP 'css.jsp' starting page</title>

		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
		<style type="text/css">
div { /**边框颜色*/
	border-color: red;
	border-width: 5px;
	/**间隔一*/
	margin: 10px;
	/**间隙一*/
	padding: 0px;
}
</style>
	</head>

	<body>
		<div style="border-style: dashed;">
			1
		</div>
		<div style="border-style: dotted">
			2
		</div>
		<div style="border-style: solid">
			3
		</div>
		<div style="border-style: double">
			4
		</div>
		<div style="border-style: groove">
			5
		</div>
		<div style="border-style: ridge">
			6
		</div>
		<div style="border-style: inset">
			7
		</div>
		<div style="border-style: outset">
			8
		</div>
		<div style="border-style: inherit">
			9
		</div>
		<div style="border-style: none">
			10
		</div>
		<div style="border-style: hidden">
			10
		</div>
	</body>
</html>

效果如下：

friefox

qq249663289

关注

0
点赞
踩
0

收藏

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

盒子模型：概述：网页中的所有元素都可以看成一个盒子，占据一定的页面空间一个盒子有 context(内容) border（边框） padding(间隙) margin(间隙) 4个部分组成(一般来说。width和height属性都是指 width+padding或height+padding)。 border---border的最外围即元素...
复制链接

扫一扫

专栏目录