盒子模型组成
- 内容区域（comtent）
- 内边距区域（padding）
- 边框区域（border）
- 外边距区域（margin）
布局标签
标签：<div> </div> 和 <span> </span>
- 特点：<div>一行只显示一个 宽度默认是父亲宽度 高度由内容撑开 可以设置宽高 <span>一行可以显示多个 高度由内容撑开 不可以设置宽高
- 应用：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style>#nav-max {width: 1200px;margin: 0px auto;box-sizing: border-box;}#nav-max1 {width: 600px;margin: 0px auto;box-sizing: border-box;position: relative;}#nav-max2 {width: 1200px;margin: 0px auto;box-sizing: border-box;}#nav-max3 {width: 1200px;height: 500px;margin: 15px 15px;padding: 10px;margin: 0px auto;box-sizing: border-box;border: 1px red solid;}#nav-min1 {background-color: beige;float: left;padding: 10px 43px;}#nav-min1:hover {background-color: coral;color: #fd0000;}#nav-min2 {width: 300px;height: 500px;margin: 15px 15px;padding: 10px;border: 1px red solid;float: left;background-color: bisque;}#nav-min3 {width: 440px;height: 500px;margin: 15px 15px;float: left;}#img1 {position: absolute;width: 82px;right: 700px;}#img2 {width: 440px;height: 520px;position: relative;}#box_img2_left {top: 300px;background-color: #fd0000;position: absolute;}#box_img2_right {top: 300px;right: 0px;background-color: #fd0000;position: absolute;}</style></head><body><div id="nav-max"><div id="nav-max1"><img id="img1"src="https://img10.360buyimg.com/img/jfs/t1/192028/25/33459/5661/63fc2af2F1f6ae1b6/d0e4fdc2f126cbf5.png" /><div id="nav-min1">网站首页</div><div id="nav-min1">产品案例</div><div id="nav-min1">公司介绍</div><div id="nav-min1">联系我们</div><div style="clear:left"></div></div><div id="nav-max2"><div id="nav-min2"><ul><li></li><li></li><li></li><li></li><li></li></ul></div><div id="nav-min3"><img id="img2"src="https://imgcps.jd.com/img-cubic/creative_server_cia_jdcloud/v2/2000366/100071377749/FocusFullshop/CkJqZnMvdDEvMjM1MDcwLzgvMTQyOTUvMjcyMDYvNjVkYjkyZmNGYjlmMGYxYjgvOWQ5NTA0NjI5YjVkY2FmMC5wbmcSCTMtdHlfMF81NDACOO6LekIQCgzlsI_nsbPmiYvmnLoQAUITCg_niannvo7ku7fmm7TkvJgQAkIQCgznq4vljbPmiqLotK0QBkIKCgbkvJjpgIkQB1jVluDl9AI/cr/s/q.jpg"alt="显示失败" /><div><span id="box_img2_left">< </span></div><div><span id="box_img2_right">></span></div></div><div id="nav-min2">123</div><div style="clear:left"></div></div><div id="nav-max3">123456</div></div></body> </html>
