DAY 5
努力不会骗人，坚持会有奇效
今天学习CSS三大特性/CSS盒子模型/PS基本操作
CSS三大特性
层叠性、继承性、优先级
1 层叠性
给相同选择器设置相同的样式，此时一个样式会覆盖另一个冲突的样式。层叠性主要可以解决样式冲突。
原则：
- 样式冲突，就近原则。哪个样式离结构近，就执行哪个；
- 样式不冲突的部分，不会被层叠。
<title>CSS层叠性</title><style>div {color: pink;font-size: 12px;}div {color: green;}</style>
</head><body><div>长江后浪推前浪，一浪更比一浪强</div>
</body>
2 继承性
子标签会继承父标签的某些样式，如文本颜色和字号。
- 恰当使用继承可以简化代码
- 子元素继承父元素的样式（text- font- line- 这些可以继承，color属性也可以）
<title>CSS继承性</title><style>div {color: pink;font-size: 16px;}</style>
</head><body><div><p>龙生龙，凤生凤，老鼠的儿子会打洞</p></div>
</body>- 行高的继承：
- 行高可以跟单位也可以不跟单位；
- 子元素会继承父元素的行高为1.5
-
这个1.5 是当前元素文字大小 font-size 的1.5倍
<title>行高的继承</title><style>body {color: pink;/* font: 12px/24px "microsoft yahei"; *//* 行高可以跟单位也可以不跟单位 */font: 12px/1.5 "microsoft yahei";}/* 子元素继承了父元素body的行高1.5 *//* 这个1.5 是当前元素文字大小 font-size 的1.5倍，即当前div的行高是21像素 */div {font-size: 14px;}p {font-size: 16px;}/* li 没有手动指定文字大小，文字大小会继承父亲，ul没有指定，body指定了，继承body *//* li 的行高是当前文字大小的1.5倍 */</style>
</head><body><div>胖胖的葡萄籽</div><p>胖胖的葡萄籽</p><ul><li>我没有指定文字大小</li></ul>
</body>
3 优先级
当同一个元素指定了多个选择器，就会有优先级的产生。
- 选择器相同，就执行层叠性；
- 选择器不同，根据选择器权重执行。
| 选择器 | 权重 |
|---|---|
| 继承或者* | 0，0,0,0, |
| 元素选择器 | 0,0,0,1 |
| 类选择器、伪类选择器 | 0，0,1,0 |
| ID选择器 | 0,1,0,0 |
| 行内样式 | 1,0,0,0 |
| ! important | ∞ |
- 权重有4组数字组成，但不会有进位；
- ! important>行内样式>ID选择器>类选择器、伪类选择器>元素选择器>继承或者*（通配符选择器）
- 等级判断从左到右
- 简单记忆：继承或者*=0，元素选择器=1，类选择器、伪类选择器=10，ID选择器=100，行内样式=1000，! important=∞
- 继承的权重是0，不管父标签权重多大，子标签继承过来权重都是0
<title>CSS优先级</title><style>/* 元素选择器 */div {/* important权重最高 */color: pink ! important;}/* 类选择器 */.text {color: green;}/* ID 选择器 */#demo {color: red;}</style>
</head><body><!-- 行内样式表 --><div class="text" id="demo" style="color: purple;">你笑起来真好看</div>
</body>
- 继承权重注意点：
<title>继承权重注意点</title><style>#father {color: red;}p {color: green;}body {color: pink;}a {color: purple;}</style>
</head><body><!-- 虽然div 是ID选择器，但是p标签继承div，继承权重=0 元素p标签权重=1 --><!-- 不管父标签权重多大，继承过来权重都是0 --><div id="father"><p>你还是很好看</p></div><!-- a链接 浏览器默认指定样式为蓝色下划线 -- a{color:blue} --><a href="#">我是单独的样式</a>
</body>- 权重叠加
如果是复合选择器，则会有权重叠加，需要计算权重。
注意：如果10个标签选择器叠加，权重为0，0,0,10；权重虽然会叠加，但永远不会进位。
<title>权重的叠加</title><style>/* li 权重=1 */li {color: red;}/* 复合选择器会有权重叠加 ul＋li=1+1=2*/ul li {color: green;}/* 复合选择器会有权重叠加 类＋元素=10+1=11 */.value li {color: pink;}</style>
</head><body><ul class="value"><li>葡萄籽</li><li>草莓籽</li><li>西瓜籽</li></ul>
</body>
- CSS权重练习：
<title>CSS权重练习1</title><style>li {color: pink;}.nav {color: red;}.nav li {color: green;}/* 把第一个小li 颜色改为 蓝色加粗 */.nav .demo {color: blue;font-weight: 700;}</style>
</head><body><ul class="nav"><li class="demo">苹果</li><li>橙子</li><li>猕猴桃</li><li>草莓</li></ul>
</body>CSS盒子模型
页面布局三大核心：盒子模型、浮动和定位。
1 网页布局的过程：
- 准备好相关的网页元素，网页元素基本都是盒子box；
- 利用CSS设置好盒子样式，然后摆到相应位置；
- 往盒子里装内容。
2 盒子模型（box model）的组成：
边框border、内边距padding、外边距margin、实际内容content
- 边框border
border可以设置边框宽度、边框样式、边框颜色。
border: border-width || border-style || border-color <title>盒子模型之边框border</title><style>div {width: 300px;height: 200px;/* 边框粗细 border-width 后面一般px */border-width: 5px;/* 实线边框 solid 用的最多 */border-style: solid;/* 虚线边框 dashed *//* border-style: dashed; *//* 点线边框 dotted *//* border-style: dotted; */border-color: pink;}</style>
</head><body><div></div>
</body>border的复合写法：
<title>border的复合写法</title><style>div {width: 300px;height: 200px;/* 没有先后顺序，默认宽度样式 颜色 *//* border: 5px solid red; */border-top: 5px dashed pink;border-bottom: 5px dotted blue;border-left: 5px solid green;border-right: 5px solid black;}</style>
</head><body><div></div>
</body>表格的细线边框:控制相邻单元格的边框
border-collapse: collapse- collapse单词是合并
- border-collapse: collapse; 表示相邻边框合并在一起
边框会影响盒子的实际大小：
边框的宽度会叠加在本身盒子的外面，解决方案：
- 测量盒子时，不测边框；
- 如果测了边框，用width、height减去边框宽度。
<title>边框会影响盒子的实际大小</title><style>/* 我们需要200×200的盒子，但是这个盒子有10像素的红色边框 */div {/* width: 200px;height: 200px; */width: 180px;height: 180px;background-color: pink;/* 边框的宽度会叠加在本身盒子的外面 */border: 10px solid red;}</style>
</head><body><div></div>
</body>- 内边距padding
- 内容和边框有了距离，添加了内边距；
- padding影响了盒子实际大小。
解决方案：让width和heigh减去多出来的内边距大小
<title>内边距padding</title><style>div {width: 200px;height: 200px;background-color: pink;padding-left: 20px;padding-top: 50px;padding-right: 40px;}</style>
</head><body><div>盒子内容是content盒子内容是content盒子内容是content盒子内容是content</div>padding复合写法：上右下左
<title>内边距padding复合写法</title><style>div {width: 200px;height: 200px;background-color: greenyellow;/* 一个值————上下左右都有50px 的边距 *//* padding: 50px; *//* 2个值————上下边距是50px 的边距 左右是20px边距*//* padding: 50px 20px; *//* 3个值————上边距50px 左右边距20px 下边距30px *//* padding: 50px 20px 30px; *//* 4个值————上边距50px 右边距20px 左40px 下边距30px */padding: 50px 20px 40px 30px;}</style>
</head><body><div>我知道世界上最值得做的事就是不断学习</div>
</body>padding的好处：
每个盒子里的字数不一样多，我们可以不用给盒子宽度，直接给padding最合适。
新浪导航案例：
<title>新浪导航栏</title><style>.nav {height: 41px;line-height: 41px;background-color: #fcfcfc;border-top: 3px solid #ff8500;border-bottom: 1px solid #edeef0;}.nav a {height: 41px;padding: 0 20px;font-size: 12px;text-decoration: none;color: #4c4c4c;display: inline-block}.nav a:hover {color: #ff8500;background-color: #f3e1e1;}</style>
</head><body><div class="nav"><a href="#">新浪导航</a><a href="#">手机客户端</a><a href="#">微博</a><a href="#">新浪网</a></div>
</body>
小米侧边栏案例：保持宽170px
<title>小米侧边栏案例——padding影响盒子大小计算</title><style>a {width: 150px;height: 40px;line-height: 40px;background-color: rgb(184, 149, 109);font-size: 16px;display: block;text-decoration: none;color: rgb(255, 255, 255);padding: 0 0 0 20px;}a:hover {color: aqua;background-color: blanchedalmond;}</style>
</head><body><a href="#">手机 电话卡</a><a href="#">电视 盒子</a><a href="#">笔记本平板</a><a href="#">家电 插线板</a><a href="#">出行 穿戴</a>
</body>
如果盒子本身没有指定width/height，则padding不会撑开盒子大小
<title>padding不撑开盒子</title><style>h1 {/* 没有指定宽度，h1块级元素 继承body的宽度，和浏览器一样宽 */height: 100px;/* 只要有width属性，加上padding一定会加内边距 */width: 100%;background-color: pink;/* 没有width属性时，高度增加了30+30，宽度没有变化 */padding: 30px;}div {width: 300px;height: 100px;background-color: gray;}div p {/* p块级元素 默认宽度是div的宽度300 padding 使高度加30+30=60 */padding: 30px;background-color: purple;}</style>
</head><body><h1></h1><div><p></p></div>
</body>- 外边距margin
盒子与盒子之间的距离，有上下左右4个外边距控制距离。
<title>盒子模型之外边距margin</title><style>div {width: 200px;height: 200px;background: pink;/* 上下左右外边距都是20px *//* margin: 20px; */}/* .nav {margin-bottom: 20px;} *//* .demo {margin-top: 20px;} *//* .demo {margin: 20px 50px;} */.nav {margin: 30px 0 10px 50px;}</style>
</head><body><div class="nav">1</div><div class="demo">2</div><div>3</div>
</body>
外边距典型应用：块级盒子水平居中
- 盒子必须设置了宽度width；
- 把左右外边距设置为 auto。
<title>margin之块级盒子水平居中</title><style>.header {width: 200px;height: 200px;background-color: pink;margin: 100px auto;}</style>
</head><body><div class="header"></div>
</body>以上方法是让块级元素水平居中，
行内元素或行内块元素水平居中：
给其父元素添加 text-align: center即可。
<title>行内元素和行内块元素水平居中</title><style>.header {width: 200px;height: 200px;background-color: pink;margin: 100px auto;/* 给其父元素添加 text-align: center即可 */text-align: center;line-height: 200px;}</style>
</head><body><div class="header"><span>里面的文字</span></div><div class="header"><img src="sprite.png"></div>
</body>外边距合并：
- 相邻块元素垂直外边框合并；——只设置单个块元素的下外边距或上外边距
- 嵌套块元素垂直外边距的塌陷。——给父元素设置上边框/给父元素设置上内边距/给父元素添加overflow:hidden
<title>margin-嵌套块元素塌陷问题</title><style>.father {width: 400px;height: 400px;background-color: pink;margin-top: 50px;/* 给父元素设置上边框 *//* border: 1px solid transparent; *//* 给父元素设置上内边距 *//* padding: 1px; *//* 给父元素添加overflow:hidden 不会让盒子变大*/overflow: hidden;}.son {width: 200px;height: 200px;background-color: blue;/* 子元素设置上外边距后，带着父元素一起下来了，塌陷问题 */margin-top: 100px;}</style>
</head><body><div class="father"><div class="son"></div></div>
</body>清除内外边距：
<title>清除内外边距</title><style>/* 这句话也是我们CSS的第一行代码 */* {margin: 0;padding: 0;}span {background-color: palegoldenrod;/* 行内元素 只有左边和右边有margin值 上下是没有的 尽量只设置左右的*/margin: 20px;}</style>
</head><body>123<!-- 网页元素自身会携带不同的内外边距 --><ul><li>abcd</li></ul><span>行内元素尽量只设置左右的内外边距</span>
</body>
PS基本操作
- 文件——打开
- Ctrl+R，打开标尺，或者视图——标尺
- 点击标尺，把单位改成像素
- Ctrl+ +放大视图，Ctrl+-缩小视图
- 按住空格键，鼠标拖动视图
- 选区工具测量大小
- Ctrl+D取消选区
综合案例：小米产品栏
<title>产品模块</title><style>* {margin: 0;padding: 0;}.box {width: 400px;height: 460px;background-color: rgb(252, 243, 243);text-align: center;margin: auto;}.review {font-weight: 400;margin: 20px auto;}.appraise {color: gray;font-size: 16px;margin: 10px auto;}.price {color: rgb(212, 93, 93);font-size: 22px;margin: 10px auto;}.info a {display: block;text-decoration: none;color: white;background-color: rgb(212, 93, 93);width: 155px;height: 42px;line-height: 42px;margin: 13px auto;font-size: 18px;}</style>
</head><body><div class="box"><img src="img.png"><h2 class="review">小米电视6 至尊版 65英寸</h2><div class="appraise">百级分区背光|双120Hz高刷|4.5GB+64GB</div><div class="price">¥7999</div><div class="info"><a href="#">立即购买</a></div></div>
</body>
<title>小米产品栏</title><style>* {margin: 0;padding: 0;}.box {width: 300px;height: 360px;background-color: aliceblue;margin: 50px auto;}img {width: 100%;}.review {height: 50px;font-size: 16px;padding: 0 20px;margin-top: 20px;}.appraise {height: 15px;color: #b0b0b0;font-size: 12px;padding: 0 20px;margin-top: 20px;}.info {font-size: 14px;padding: 0 20px;margin-top: 15px;}.price {color: orange;}.info p {display: inline-block;}.info em {font-style: normal;color: #b0b0b0;margin: 0 5px 0 10px;}.lian {color: black;text-decoration: none;}</style>
</head><body><div class="box"><img src="img.png"><p class="review">快递牛，整体不靠蓝牙可以秒连，红米给力</p><div class="appraise">来自于香蕉好难吃的评价</div><div class="info"><p><a href="#" class="lian"> REdmi area Airpods真无线...</a></p><!-- | --><em>|</em><span class="price">99.5元</span></div></div>
</body>案例总结：
1 为什么布局要用不同的盒子，不全部用div？
标签都是有语义的，合理的地方应该用合理的标签，比如产品标题就用h 大量文字就用p 。
2 为什么用那么多类名？
类名就是给每个盒子起了个名字，可以更好地找到这个盒子，选取盒子方便，后期维护也方便。
3 到底什么时候用margin，什么时候用padding？
大多数情况下两者可以混用，特殊情况选简单的那个（padding增加盒子高度，用margin）。
4 自己做没有思路？
布局有很多方式，可以有自己的风格。
多用辅助工具，PS，截图，屏幕画笔。
案例：快报模块
去除li前面的小圆点：
list-style: none;<title>快报模板</title><style>* {margin: 0;padding: 0;}.box {width: 250px;height: 200px;border: #ccc solid 1px;margin: 50px auto;}.title {height: 30px;line-height: 30px;border-bottom: dotted #ccc 1px;font-weight: 400;font-size: 18px;padding-left: 15px;}li {/* 去掉li 前面的小圆点 */list-style: none;}.content li {font-size: 16px;padding-left: 25px;height: 30px;line-height: 30px;}ul {margin-top: 9px;}.box ul li a {color: #666;text-decoration: none;}</style>
</head><body><div class="box"><h3 class="title">品优购快报</h3><div class="content"><ul><li><a href="#">特惠 爆款耳机5折起</a></li><li><a href="#">9.9抢洗碗机</a></li><li><a href="#">母亲节，好物低至5折</a></li><li><a href="#">清仓大甩卖</a></li><li><a href="#">美的双开门电冰箱立省1000元</a></li></ul></div></div>
</body>
DAY 5
努力不会骗人，坚持会有奇效
今天学习CSS三大特性/CSS盒子模型/PS基本操作
CSS三大特性
层叠性、继承性、优先级
1 层叠性
给相同选择器设置相同的样式，此时一个样式会覆盖另一个冲突的样式。层叠性主要可以解决样式冲突。
原则：
- 样式冲突，就近原则。哪个样式离结构近，就执行哪个；
- 样式不冲突的部分，不会被层叠。
<title>CSS层叠性</title><style>div {color: pink;font-size: 12px;}div {color: green;}</style>
</head><body><div>长江后浪推前浪，一浪更比一浪强</div>
</body>
2 继承性
子标签会继承父标签的某些样式，如文本颜色和字号。
- 恰当使用继承可以简化代码
- 子元素继承父元素的样式（text- font- line- 这些可以继承，color属性也可以）
<title>CSS继承性</title><style>div {color: pink;font-size: 16px;}</style>
</head><body><div><p>龙生龙，凤生凤，老鼠的儿子会打洞</p></div>
</body>- 行高的继承：
- 行高可以跟单位也可以不跟单位；
- 子元素会继承父元素的行高为1.5
-
这个1.5 是当前元素文字大小 font-size 的1.5倍
<title>行高的继承</title><style>body {color: pink;/* font: 12px/24px "microsoft yahei"; *//* 行高可以跟单位也可以不跟单位 */font: 12px/1.5 "microsoft yahei";}/* 子元素继承了父元素body的行高1.5 *//* 这个1.5 是当前元素文字大小 font-size 的1.5倍，即当前div的行高是21像素 */div {font-size: 14px;}p {font-size: 16px;}/* li 没有手动指定文字大小，文字大小会继承父亲，ul没有指定，body指定了，继承body *//* li 的行高是当前文字大小的1.5倍 */</style>
</head><body><div>胖胖的葡萄籽</div><p>胖胖的葡萄籽</p><ul><li>我没有指定文字大小</li></ul>
</body>
3 优先级
当同一个元素指定了多个选择器，就会有优先级的产生。
- 选择器相同，就执行层叠性；
- 选择器不同，根据选择器权重执行。
| 选择器 | 权重 |
|---|---|
| 继承或者* | 0，0,0,0, |
| 元素选择器 | 0,0,0,1 |
| 类选择器、伪类选择器 | 0，0,1,0 |
| ID选择器 | 0,1,0,0 |
| 行内样式 | 1,0,0,0 |
| ! important | ∞ |
- 权重有4组数字组成，但不会有进位；
- ! important>行内样式>ID选择器>类选择器、伪类选择器>元素选择器>继承或者*（通配符选择器）
- 等级判断从左到右
- 简单记忆：继承或者*=0，元素选择器=1，类选择器、伪类选择器=10，ID选择器=100，行内样式=1000，! important=∞
- 继承的权重是0，不管父标签权重多大，子标签继承过来权重都是0
<title>CSS优先级</title><style>/* 元素选择器 */div {/* important权重最高 */color: pink ! important;}/* 类选择器 */.text {color: green;}/* ID 选择器 */#demo {color: red;}</style>
</head><body><!-- 行内样式表 --><div class="text" id="demo" style="color: purple;">你笑起来真好看</div>
</body>
- 继承权重注意点：
<title>继承权重注意点</title><style>#father {color: red;}p {color: green;}body {color: pink;}a {color: purple;}</style>
</head><body><!-- 虽然div 是ID选择器，但是p标签继承div，继承权重=0 元素p标签权重=1 --><!-- 不管父标签权重多大，继承过来权重都是0 --><div id="father"><p>你还是很好看</p></div><!-- a链接 浏览器默认指定样式为蓝色下划线 -- a{color:blue} --><a href="#">我是单独的样式</a>
</body>- 权重叠加
如果是复合选择器，则会有权重叠加，需要计算权重。
注意：如果10个标签选择器叠加，权重为0，0,0,10；权重虽然会叠加，但永远不会进位。
<title>权重的叠加</title><style>/* li 权重=1 */li {color: red;}/* 复合选择器会有权重叠加 ul＋li=1+1=2*/ul li {color: green;}/* 复合选择器会有权重叠加 类＋元素=10+1=11 */.value li {color: pink;}</style>
</head><body><ul class="value"><li>葡萄籽</li><li>草莓籽</li><li>西瓜籽</li></ul>
</body>
- CSS权重练习：
<title>CSS权重练习1</title><style>li {color: pink;}.nav {color: red;}.nav li {color: green;}/* 把第一个小li 颜色改为 蓝色加粗 */.nav .demo {color: blue;font-weight: 700;}</style>
</head><body><ul class="nav"><li class="demo">苹果</li><li>橙子</li><li>猕猴桃</li><li>草莓</li></ul>
</body>CSS盒子模型
页面布局三大核心：盒子模型、浮动和定位。
1 网页布局的过程：
- 准备好相关的网页元素，网页元素基本都是盒子box；
- 利用CSS设置好盒子样式，然后摆到相应位置；
- 往盒子里装内容。
2 盒子模型（box model）的组成：
边框border、内边距padding、外边距margin、实际内容content
- 边框border
border可以设置边框宽度、边框样式、边框颜色。
border: border-width || border-style || border-color <title>盒子模型之边框border</title><style>div {width: 300px;height: 200px;/* 边框粗细 border-width 后面一般px */border-width: 5px;/* 实线边框 solid 用的最多 */border-style: solid;/* 虚线边框 dashed *//* border-style: dashed; *//* 点线边框 dotted *//* border-style: dotted; */border-color: pink;}</style>
</head><body><div></div>
</body>border的复合写法：
<title>border的复合写法</title><style>div {width: 300px;height: 200px;/* 没有先后顺序，默认宽度样式 颜色 *//* border: 5px solid red; */border-top: 5px dashed pink;border-bottom: 5px dotted blue;border-left: 5px solid green;border-right: 5px solid black;}</style>
</head><body><div></div>
</body>表格的细线边框:控制相邻单元格的边框
border-collapse: collapse- collapse单词是合并
- border-collapse: collapse; 表示相邻边框合并在一起
边框会影响盒子的实际大小：
边框的宽度会叠加在本身盒子的外面，解决方案：
- 测量盒子时，不测边框；
- 如果测了边框，用width、height减去边框宽度。
<title>边框会影响盒子的实际大小</title><style>/* 我们需要200×200的盒子，但是这个盒子有10像素的红色边框 */div {/* width: 200px;height: 200px; */width: 180px;height: 180px;background-color: pink;/* 边框的宽度会叠加在本身盒子的外面 */border: 10px solid red;}</style>
</head><body><div></div>
</body>- 内边距padding
- 内容和边框有了距离，添加了内边距；
- padding影响了盒子实际大小。
解决方案：让width和heigh减去多出来的内边距大小
<title>内边距padding</title><style>div {width: 200px;height: 200px;background-color: pink;padding-left: 20px;padding-top: 50px;padding-right: 40px;}</style>
</head><body><div>盒子内容是content盒子内容是content盒子内容是content盒子内容是content</div>padding复合写法：上右下左
<title>内边距padding复合写法</title><style>div {width: 200px;height: 200px;background-color: greenyellow;/* 一个值————上下左右都有50px 的边距 *//* padding: 50px; *//* 2个值————上下边距是50px 的边距 左右是20px边距*//* padding: 50px 20px; *//* 3个值————上边距50px 左右边距20px 下边距30px *//* padding: 50px 20px 30px; *//* 4个值————上边距50px 右边距20px 左40px 下边距30px */padding: 50px 20px 40px 30px;}</style>
</head><body><div>我知道世界上最值得做的事就是不断学习</div>
</body>padding的好处：
每个盒子里的字数不一样多，我们可以不用给盒子宽度，直接给padding最合适。
新浪导航案例：
<title>新浪导航栏</title><style>.nav {height: 41px;line-height: 41px;background-color: #fcfcfc;border-top: 3px solid #ff8500;border-bottom: 1px solid #edeef0;}.nav a {height: 41px;padding: 0 20px;font-size: 12px;text-decoration: none;color: #4c4c4c;display: inline-block}.nav a:hover {color: #ff8500;background-color: #f3e1e1;}</style>
</head><body><div class="nav"><a href="#">新浪导航</a><a href="#">手机客户端</a><a href="#">微博</a><a href="#">新浪网</a></div>
</body>
小米侧边栏案例：保持宽170px
<title>小米侧边栏案例——padding影响盒子大小计算</title><style>a {width: 150px;height: 40px;line-height: 40px;background-color: rgb(184, 149, 109);font-size: 16px;display: block;text-decoration: none;color: rgb(255, 255, 255);padding: 0 0 0 20px;}a:hover {color: aqua;background-color: blanchedalmond;}</style>
</head><body><a href="#">手机 电话卡</a><a href="#">电视 盒子</a><a href="#">笔记本平板</a><a href="#">家电 插线板</a><a href="#">出行 穿戴</a>
</body>
如果盒子本身没有指定width/height，则padding不会撑开盒子大小
<title>padding不撑开盒子</title><style>h1 {/* 没有指定宽度，h1块级元素 继承body的宽度，和浏览器一样宽 */height: 100px;/* 只要有width属性，加上padding一定会加内边距 */width: 100%;background-color: pink;/* 没有width属性时，高度增加了30+30，宽度没有变化 */padding: 30px;}div {width: 300px;height: 100px;background-color: gray;}div p {/* p块级元素 默认宽度是div的宽度300 padding 使高度加30+30=60 */padding: 30px;background-color: purple;}</style>
</head><body><h1></h1><div><p></p></div>
</body>- 外边距margin
盒子与盒子之间的距离，有上下左右4个外边距控制距离。
<title>盒子模型之外边距margin</title><style>div {width: 200px;height: 200px;background: pink;/* 上下左右外边距都是20px *//* margin: 20px; */}/* .nav {margin-bottom: 20px;} *//* .demo {margin-top: 20px;} *//* .demo {margin: 20px 50px;} */.nav {margin: 30px 0 10px 50px;}</style>
</head><body><div class="nav">1</div><div class="demo">2</div><div>3</div>
</body>
外边距典型应用：块级盒子水平居中
- 盒子必须设置了宽度width；
- 把左右外边距设置为 auto。
<title>margin之块级盒子水平居中</title><style>.header {width: 200px;height: 200px;background-color: pink;margin: 100px auto;}</style>
</head><body><div class="header"></div>
</body>以上方法是让块级元素水平居中，
行内元素或行内块元素水平居中：
给其父元素添加 text-align: center即可。
<title>行内元素和行内块元素水平居中</title><style>.header {width: 200px;height: 200px;background-color: pink;margin: 100px auto;/* 给其父元素添加 text-align: center即可 */text-align: center;line-height: 200px;}</style>
</head><body><div class="header"><span>里面的文字</span></div><div class="header"><img src="sprite.png"></div>
</body>外边距合并：
- 相邻块元素垂直外边框合并；——只设置单个块元素的下外边距或上外边距
- 嵌套块元素垂直外边距的塌陷。——给父元素设置上边框/给父元素设置上内边距/给父元素添加overflow:hidden
<title>margin-嵌套块元素塌陷问题</title><style>.father {width: 400px;height: 400px;background-color: pink;margin-top: 50px;/* 给父元素设置上边框 *//* border: 1px solid transparent; *//* 给父元素设置上内边距 *//* padding: 1px; *//* 给父元素添加overflow:hidden 不会让盒子变大*/overflow: hidden;}.son {width: 200px;height: 200px;background-color: blue;/* 子元素设置上外边距后，带着父元素一起下来了，塌陷问题 */margin-top: 100px;}</style>
</head><body><div class="father"><div class="son"></div></div>
</body>清除内外边距：
<title>清除内外边距</title><style>/* 这句话也是我们CSS的第一行代码 */* {margin: 0;padding: 0;}span {background-color: palegoldenrod;/* 行内元素 只有左边和右边有margin值 上下是没有的 尽量只设置左右的*/margin: 20px;}</style>
</head><body>123<!-- 网页元素自身会携带不同的内外边距 --><ul><li>abcd</li></ul><span>行内元素尽量只设置左右的内外边距</span>
</body>
PS基本操作
- 文件——打开
- Ctrl+R，打开标尺，或者视图——标尺
- 点击标尺，把单位改成像素
- Ctrl+ +放大视图，Ctrl+-缩小视图
- 按住空格键，鼠标拖动视图
- 选区工具测量大小
- Ctrl+D取消选区
综合案例：小米产品栏
<title>产品模块</title><style>* {margin: 0;padding: 0;}.box {width: 400px;height: 460px;background-color: rgb(252, 243, 243);text-align: center;margin: auto;}.review {font-weight: 400;margin: 20px auto;}.appraise {color: gray;font-size: 16px;margin: 10px auto;}.price {color: rgb(212, 93, 93);font-size: 22px;margin: 10px auto;}.info a {display: block;text-decoration: none;color: white;background-color: rgb(212, 93, 93);width: 155px;height: 42px;line-height: 42px;margin: 13px auto;font-size: 18px;}</style>
</head><body><div class="box"><img src="img.png"><h2 class="review">小米电视6 至尊版 65英寸</h2><div class="appraise">百级分区背光|双120Hz高刷|4.5GB+64GB</div><div class="price">¥7999</div><div class="info"><a href="#">立即购买</a></div></div>
</body>
<title>小米产品栏</title><style>* {margin: 0;padding: 0;}.box {width: 300px;height: 360px;background-color: aliceblue;margin: 50px auto;}img {width: 100%;}.review {height: 50px;font-size: 16px;padding: 0 20px;margin-top: 20px;}.appraise {height: 15px;color: #b0b0b0;font-size: 12px;padding: 0 20px;margin-top: 20px;}.info {font-size: 14px;padding: 0 20px;margin-top: 15px;}.price {color: orange;}.info p {display: inline-block;}.info em {font-style: normal;color: #b0b0b0;margin: 0 5px 0 10px;}.lian {color: black;text-decoration: none;}</style>
</head><body><div class="box"><img src="img.png"><p class="review">快递牛，整体不靠蓝牙可以秒连，红米给力</p><div class="appraise">来自于香蕉好难吃的评价</div><div class="info"><p><a href="#" class="lian"> REdmi area Airpods真无线...</a></p><!-- | --><em>|</em><span class="price">99.5元</span></div></div>
</body>案例总结：
1 为什么布局要用不同的盒子，不全部用div？
标签都是有语义的，合理的地方应该用合理的标签，比如产品标题就用h 大量文字就用p 。
2 为什么用那么多类名？
类名就是给每个盒子起了个名字，可以更好地找到这个盒子，选取盒子方便，后期维护也方便。
3 到底什么时候用margin，什么时候用padding？
大多数情况下两者可以混用，特殊情况选简单的那个（padding增加盒子高度，用margin）。
4 自己做没有思路？
布局有很多方式，可以有自己的风格。
多用辅助工具，PS，截图，屏幕画笔。
案例：快报模块
去除li前面的小圆点：
list-style: none;<title>快报模板</title><style>* {margin: 0;padding: 0;}.box {width: 250px;height: 200px;border: #ccc solid 1px;margin: 50px auto;}.title {height: 30px;line-height: 30px;border-bottom: dotted #ccc 1px;font-weight: 400;font-size: 18px;padding-left: 15px;}li {/* 去掉li 前面的小圆点 */list-style: none;}.content li {font-size: 16px;padding-left: 25px;height: 30px;line-height: 30px;}ul {margin-top: 9px;}.box ul li a {color: #666;text-decoration: none;}</style>
</head><body><div class="box"><h3 class="title">品优购快报</h3><div class="content"><ul><li><a href="#">特惠 爆款耳机5折起</a></li><li><a href="#">9.9抢洗碗机</a></li><li><a href="#">母亲节，好物低至5折</a></li><li><a href="#">清仓大甩卖</a></li><li><a href="#">美的双开门电冰箱立省1000元</a></li></ul></div></div>
</body>