css盒子模型

北大青鸟 · 发表于 2011-6-17 09:47

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

一个盒子有 context(内容) border（边框） padding(间隙) margin(间隙) 4个部分组成
(一般来说。width和height属性都是指 width+padding或height+padding)。

border
---border的最外围即元素的最外围，占据一定的空间
包含3个属性 color(颜色) width(粗细) style(样式)，下面以具体的列子来说明

Html代码
<%@ 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">
      
      <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>

<%@ 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">

<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

话说我当年 · 发表于 2011-6-17 09:47

推荐链接
年薪100万诚邀IT讲师
【推荐】java 新手是如何获得“8K月薪”的？

北大青鸟 · 发表于 2011-8-15 09:12

正好你开咯这样的帖

月上萧萧 · 发表于 2011-9-15 10:25

你可是难得来坐坐啊~~~

流水@@ · 发表于 2011-9-15 10:58

呵呵，很基础的东西

帐号		自动登录	找回密码
密码			成为会员