文章目录

盒子模型

第七章 JavaWeb盒子模型_盒子模型

第七章 JavaWeb盒子模型_盒子模型_02比喻：手机为content，即盒子模型的内容。
填充泡沫的厚度为css盒子模型的内边距（padding）
纸盒的厚度为css盒子的边框border.

当多个盒子放在一起时，它们之间的距离就是css盒子的外边距（margin）.

代码演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>盒子模型</title>
<style type = "text/css">
.box{
  width:200px;/*宽度*/
  height:50px;/*高度*/
  border:15px solid red;/*边框*/
  background:#ccc;/*背景*/
  padding:30px;/*内边距*/
  margin:20px;/*外边距*/
}
</style>
</head>
<body>
  <p class = "box">盒子包含的部份</p>
</body>
</html>

style type = "text/css"告诉浏览器这段内容时css或text，如果某些浏览器不能识别css，也会显示text的内容。
第七章 JavaWeb盒子模型_盒子模型_03网页就是多个盒子嵌套排列的结果。
第七章 JavaWeb盒子模型_html_04元素即标签

边框属性

设置边框样式（border - style）
边框样式时用于定义页面中边框的风格，常用属性值如下：
第七章 JavaWeb盒子模型_css_05第七章 JavaWeb盒子模型_盒子模型_06第七章 JavaWeb盒子模型_html_07第七章 JavaWeb盒子模型_html_08p{ border-style:dashed solid solid solid}

或综合设置四条边，然后采用上边覆盖。
p{border-style:solid}
p{border-top-style:dashed;}
直接border-style省事一些。
设置必须按照上右下左的顺序/

具体看代码演示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>盒子模型</title>
<style type = "text/css">
h2{border-style:double;}
.one{
    border-top-style:dotted;
    border-bottom-style:dotted;
    border-left-style:solid;
    border-right-style:solid;
        
}

.two{
    border-style:solid dotted dashed;
}
</style>
</head>
<body>
    <h2>边框样式-双实线</h2>
    <p class="one">边框样式-上下为点线左右为单实线</p>
    <p class="two">边框样式-上边框单实线，左右点线，下边框虚线</p>
</body>
</html>

第七章 JavaWeb盒子模型_css_09设置规则同border-style， border-width.

复合属性（更简便的设置方式）

第七章 JavaWeb盒子模型_盒子模型_10即 只指出来方向即可。

常用的复合属性

有：
font,border,margin,padding,background.
复合属性可以简化代码，提高页面运行速度。