【前端基础】Day 4 CSS盒子模型
目录
1. 盒子模型
1.1 盒子模型布局
1.2 盒子模型组成
1.3 边框
1.4 表格细线边框
1.5 边框会影响盒子实际大小
1.6 内边距
1.7 外边距
1.8 外边距合并
1.9 清除内外边距
2. PS基本操作
3. 综合案例
3.1 案例1
3.2 案例2-快报模块
4. 圆角边框
5. 盒子阴影
6. 文字阴影（了解）
1. 盒子模型
1.1 盒子模型布局
1.2 盒子模型组成
1.3 边框
<style>div {width: 300px;height: 200px;/* 边框粗细 一般单位用px */border-width: 5px;/* 边框的样式 solid 实线边框 dashed 虚线边框 dotted 点线边框 */border-style: dotted;/* 边框的颜色 */border-color: pink;}</style>
具有重叠性，所以一般先写大范围再写小范围
/* 得到的盒子为：上边框粗细为2像素、实线、红色，其余边框粗细为5像素、实线、蓝色 */
border: 5px solid blue;
border-top: 2px solid red;
/* 得到的盒子为：边框粗细均为5像素、实线、蓝色 */
border-top: 2px solid red;
border: 5px solid blue;
1.4 表格细线边框
<style>table {width: 500px;height: 249px;}th {height: 35px;}table,td,th {border: 1px solid red;/* 合并相邻的边框 */border-collapse: collapse;font-size: 14px;text-align: center;}</style><body><table align="center" cellspacing="0"><thead><tr><th>排行</th><th>关键词</th></tr></thead><tbody><tr><td>1</td><td>hhh</td></tr></tbody></table>
</body>1.5 边框会影响盒子实际大小
1.6 内边距
padding-left: 5px;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 5px;
复合写法：
如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小。
盒子内字数不一样多，让padding撑开盒子——新浪导航案例。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {height: 41px;background-color: #fcfcfc;border-top: 3px solid #ff8500;border-bottom: 1px solid #edeef0;/* 文字居中对齐 */line-height: 41px;}div a {font-size: 12px;color: #4c4c4c;text-decoration: none;display: inline-block;padding: 0 20px;}div a:hover {background-color: #eee;color: #ff8500;}</style>
</head><body><div><a href="#">设为首页</a><a href="#">手机新浪网</a><a href="#">移动客户端</a><a href="#">博客</a><a href="#">微博</a><a href="#">关注我</a></div></body></html>
1.7 外边距
1.8 外边距合并
相邻块元素垂直外边距的合并
嵌套块元素垂直外边距的塌陷
1.9 清除内外边距
2. PS基本操作
3. 综合案例
3.1 案例1
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {/* 外边距 */margin: 0;/* 内边距 */padding: 0;}body {background-color: #f5f5f5;}.box {width: 298px;height: 415px;background-color: #fff;margin: 100px auto;}.box img {/* 图片宽度和父亲一样宽 */width: 100%;}.review {height: 70px;font-size: 14px;/* 这个段落没有width属性 所以padding不会撑开盒子的宽度 */padding: 0 28px;margin-top: 30px;}.appraise {font-size: 12px;color: #b0b0b0;margin-top: 20px;padding: 0 28px;}.info {font-size: 14px;margin-top: 15px;padding: 0 28px;}.info h4 {display: inline-block;font-weight: 400;}.info span {color: #ff6700;}.info em {font-style: normal;color: #ebe4e0;margin: 0 6px 0 15px;}</style>
</head><body><div class="box"><img src="../img1.jpg"><p class="review">快递牛，整体不错蓝牙可以秒连。红米给力</p><div class="appraise">来自于111用户的评价</div><div class="info"><h4>Redmi AirDots真无线蓝…</h4><em>|</em><span>99.9元</span></div></div>
</body></html>总结
3.2 案例2-快报模块
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box {width: 248px;height: 163px;border: 1px solid #ccc;margin: 100px auto;}.box h3 {height: 32px;border-bottom: 1px dotted #ccc;font-size: 14px;font-weight: 400;line-height: 32px;padding-left: 15px;}li {/* 去掉li前面的小圆点 */list-style: none;}.box ul li a {font-size: 12px;color: #666;text-decoration: none;}.box ul li a:hover {text-decoration: underline;}.box ul li {height: 23px;line-height: 23px;padding-left: 20px;}.box ul {margin-top: 7px;}</style>
</head><body><div class="box"><h3>品优购快报</h3><ul><li><a href="#">【特惠】爆款耳机5折秒！</a></li><li><a href="#">【特惠】母亲节，健康好礼！</a></li><li><a href="#">【特惠】爆款耳机5折秒！</a></li><li><a href="#">【特惠】9.9元洗100张照片！</a></li><li><a href="#">【特惠】长虹智能空调立省1000</a></li></ul></div>
</body></html>
4. 圆角边框
<style>/* 圆形的做法 */.yuanxing {width: 200px;height: 200px;background-color: pink;border-radius: 50%;}/* 圆角矩形的做法 */.yuanjiaojuxing {width: 600px;height: 200px;background-color: pink;border-radius: 100px;}/* 可以设置不同的圆角 */.radius {width: 200px;height: 200px;background-color: pink;border-radius: 10px 20px 30px 40px;}</style>5. 盒子阴影
6. 文字阴影（了解）
