div
div 可定义文档中的分区（division）。
div 标签可以把网页分割为独立的、不同的部分。
可以看成以下结构：
，然后通过css选中某个div，对其进行样式美化。
我是一个div
每个div可以看成一个盒子
一个盒子中主要的属性有5个：width、height、padding、border、margin。如下：
width：内容的宽度。CSS中 width 指的是内容的宽度，而不是盒子的宽度。盒子的宽度=内容宽度+padding+border
height：内容的高度。CSS中 height 指的是内容的高度，而不是盒子的高度。盒子的高度=内容高度+padding+border
padding：内边距。
border：边框。
margin：外边距。
元素宽高
Title
我是一只小小鸟
边框
属性 说明 示例
border-top-color 上边框颜色 border-top-color:#369;
border-right-color 右边框颜色 border-right-color:#369;
border-bottom-color 下边框颜色 border-bottom-color:#fae45b;
border-left-color 左边框颜色 border-left-color:#efcd56;
border-color 四个边框为同一颜色 border-color:#eeff34;
上、下边框颜色：#369
左、右边框颜色：#000
border-color:#369 #000;
上边框颜色：#369
左、右边框颜色：#000
下边框颜色：#f00
border-color:#369 #000 #f00;
上、右、下、左边框颜色：
#369、#000、#f00、#00f
border-color:#369 #000 #f00 #00f;
边框粗细
border-width:像素值
order-top-width:5px;
border-right-width:10px;
border-bottom-width:8px;
border-left-width:22px;
border-width:5px ;
border-width:20px 2px;
border-width:5px 1px 6px;
border-width:1px 3px 5px 2px;
边框样式
none
hidden
dotted
dashed
solid
double
border-top-style:solid;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:solid;
border-style:solid ;
border-style:solid dotted;
border-style:solid dotted dashed;
border-style:solid dotted dashed double;
border简写
同时设置边框的颜色、粗细和样式
border-bottom: 9px #F00 dashed ;
border: 9px #F00 dashed ;
外边距
margin-top
margin-right
margin-bottom
margin-left
margin
margin-top: 1px
margin-right : 2 px
margin-bottom : 2 px
margin-left : 1 px
margin : 3 px 5 px 7 px 4 px;
margin: 3px 5px;
margin: 3px 5px 7px;
margin: 8px;
外边距的妙用
网页居中对齐
前提，居中对齐的网页元素必须设定宽度。
margin:0px auto;
内边距
padding
padding-left
padding-right
padding-top
padding-bottom
padding
padding-left:10px;
padding-right: 5px;
padding-top: 20px;
padding-bottom:8px;
padding:20px 5px 8px 10px ;
padding:10px 5px;
padding:30px 8px 10px ;
padding:10px;
盒子型模的尺寸
盒子模型总尺寸=border-width+padding+margin+内容宽度
元素默认样式
很多标签都有自己的默认样式
我们在chrome浏览器中运行时，可以通过开发者工具(快捷键Ctrl+Shift+I)来一个个审查元素，来看看它们的默认样式
body标签的margin为8px
p标签的上下外边距为16px
h1标签的上下外边距为21.440px
ul标签的上下外边距也为16px，左内边距也为40px
重置默认样式
为了兼容性，凡是浏览默认的样式，都不要使用。
重置默认样式 (css reset)
/*默认样式重置(css reset)*/
body, p, h1, h2, h3, h4, h5, h6, dl, dd {
margin: 0;
font-size: 12px; /* 中文字体大小的最小值 */
}
ol, ul {
list-style: none; /* 去除列表样式 */
padding: 0;
margin: 0;
}
a {
text-decoration: none;
}
练习 有路网右侧黑板报
Title
练习 有路网左侧图书分类
Title
元素分类
行级（内联）元素
块级元素
内联块元素
行级元素
a
strong
em
内嵌元素的特性：
1.默认同行可以继续跟同类型标签
2.内容撑开宽度
3.不支持宽高
4.不支持上下的margin
span
span是一个特殊的行级标签，和div（块级标签）一样，没有任何语义（样式）。
通常用来着重显示某行文字中的某个单词
练习 制作参考文献页面
制作参考文献
参考文献
[1]顾天晓. Java程序动态更新技术研究[D].南京大学,2017.
[2]陆鹿,严立龙,李秋环,曾璐,金鑫,张玉修,侯泉林,张开均.洋底高原及其对地球系统意义研究综述[J].岩
石学报,2016,32(06):1851-1876.
[3]黄玉坤,陈榕,裴喜龙,曹璟.基于跨语言对象迁移策略的复合本地对象模型[J].计算机研究与发
展,2015,52(01):141-155.
[4]李数函. 基于GP规范的JAVA智能卡操作系统研究[D].电子科技大学,2014.
[5]胡光. 硬Java实时嵌入式平台及其关键技术研究[D].复旦大学,2012.
[6]邱江. 十七世纪至十九世纪初爪哇农业地理初探（1602-1816）[D].暨南大学,2011.
[7]杨克峤. Java程序优化与数据竞争检测的研究[D].复旦大学,2010.
[8]邓洋春. Java虚拟机关键机制研究与实践[D].中南大学,2009.
[9]董威. 多应用智能卡新技术研究[D].北京邮电大学,2008.
[10]王会进,龙舜.Java性能优化技术综述[J].小型微型计算机系统,2008(04):720-725.
块级元素
p
div
h1~h6
ol-li
ul-li
dl-dt-dd
块元素的特性
1.默认独占一行显示
2.没有宽度时，默认撑满一排
3.支持所有css命令
内联块元素—代表元素img
inline-block的特点：
元素在一行显示
支持宽高
没有宽度的时候内容撑开宽度
Title
display属性
控制元素的显示和隐藏
块级元素与行级元素的转变
值 说明
block 块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符
inline 内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符
inline-block 内联块元素
none 设置元素不会被显示
练习 有路网顶部导航
Title
您好，欢迎光临有路网！
我的有路
背景图像
背景图像
background-image属性
background-image:url(图片路径);
背景重复方式
background-repeat属性
repeat：沿水平和垂直两个方向平铺
no-repeat：不平铺，即只显示一次
repeat-x：只沿水平方向平铺
repeat-y：只沿垂直方向平铺
背景定位
background-position属性
Xpos Ypos
单位：px
Xpos表示水平位置，Ypos表示垂直位置
X% Y%
使用百分比表示背景的位置
X、Y方向关键词
水平方向的关键词：left、center、right
垂直方向的关键词：top、center、bottom
项目实战 制作分页
Title
课后作业
必做任务
1.制作图片商品列表（div标签，边距，填充）
2.注册窗口（ div标签，边距，填充）
扩展任务
1.制作家用电器分类（div的嵌套）
2.制作音乐列表（背景图像）
3.制作抽屉样式（div的隐藏）