视频资源：https://www.bilibili.com/video/BV14J4114768?from=search&seid=3842566320098741425
视频记录 136-161
网页布局过程
盒子模型组成
边框 border
/* 实线边框 */
border-style: solid;
/* 虚线边框 */
border-style: dashed;
/* 点线边框 */
border-style: dotted; border-color: blue; 边框复合型写法
border:5px solid blue
/*效果等同于下*/
border : 5px;
border-style: solid;
border-color: blue; border-top: 1px solid red;
border-bottom: 1px solid blue;
border-left: 1px solid blue;
border-right: 1px solid blue;
//效果等同于上
border: 1px solid blue;;
border-top: 1px solid red; 表格细线边框
border-collapse: collapse;
#重叠的框会自动去取消重叠
边框会影响盒子大小
Padding: 盒子内容与边框的距离。
padding也会影响盒子实际大小。
盒子如果已经有了宽度和高度，再指定内边框会撑大盒子。可以让weight/height减去内边距大小即可。
如果盒子本身没有指定weigh/height属性，此时padding不会撑开盒子大小。
div {
height: 200px;
width: 200px;
background-color: blue;
}
div p {
padding: 30px;
background-color: skyblue;
}
<div><p></p></div> #没有指定weigh/height属性，
h1 {
/* 不指定宽度，默认与父亲一样宽。h1的父亲为body,宽度为body宽度。 */
height: 200px;
background-color: pink;
}
<body>
<h1></h1>
</body> h1 {
/* 不指定宽度，默认与父亲一样宽。h1的父亲为body,宽度为body宽度。 */
height: 200px;
background-color: pink;
padding: 30px;
}
<body>
<h1></h1>
</body> # 宽度没有变化，高度增加30px。宽度没有改变，仍然为1904px。
指定width属性之后，长度发生变化。1904px变成了1964px。
<style>
h1 {
width: 100%;
height: 200px;
background-color: pink;
padding: 30px;
}
</style>
<body>
<h1></h1>
</body> div {
width: 300px;
height: 100px;
background-color: purple;
}
div p {
padding: 30px;
background-color: red;
}
<div>
<p></p>
</div> # p作为div的孩子，没有指定width/weight时，默认为父亲宽度，且高度不会撑开盒子。
外边距 margin:控制盒子与盒子之间距离。
外边距可以让盒子水平居中，需要满足2个条件
- 盒子必须指定宽度width
- 盒子左右外边距必须设置为auto
- 对于行内元素、行内块元素无效。
span {
margin: 0 auto;
}
<span></span> //无效 - 针对于块元素
/* 第一种写法 */
margin-left: auto; margin-right: auto;
/* 第二种写法 */
margin: auto;
/* 开发常用写法 */
margin: 0 auto; - 行内或行内块元素水平居中，给其父亲添加text-align:center即可。
/* 行内元素或者行内块元素水平居中给其父元素添加 text-align: center;即可 */
div {
width: 300px;
height: 100px;
background-color: purple;
text-align: center;
}
<div>
<img src="img/1.jpg" alt="Jack" />
</div> 外边距合并
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，则父元素会塌陷较大的外边距值。
解决方案
- 方案一： 为父元素定义上边框
- 方案二：为父元素定义上内边距
- 方案三：为父元素添加overflow:hidden
清除内外边距
网页元素很多都带有默认的内外边距，不同浏览器默认的也不一致。在布局之前，首先需要清除网页元素的内外边距。
/*CSS的第一行代码*/
* {
padding: 0; /*清除内边距*/
margin: 0; /*清除外边距*/
} 注：行内元素尽量只设置左右的内外边距，上下内外边距一般不起效果。但是转换块级元素和行内块元素就可以了。
PS学习
实战练习
<!DOCTYPE html>
<html>
<head>
<style>
* {
padding: 0; /*清除内边距*/
margin: 0; /*清除外边距*/
}
body {
background-color: #f5f5f5; /*页面背景颜色为灰色*/
}
a {
color: #333; /*统一网页链接颜色*/
text-decoration: none; /*取消链接下划线*/
}
.box {
width: 298px;
height: 415px;
background-color: #fff; /*白色*/
/* 让块级盒子水平居中对齐 */
margin: 100px auto;
}
.box img {
width: 100%; /*图片宽度超出盒子宽度，无法完全显示。*/
}
.review {
height: 70px;
font-size: 14px;
margin-top: 30px;
/* 没有指定width属性，padding不会撑开盒子宽度。指定了高度，所以不能指定padding的top值。 */
padding: 0 28px;
}
.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="1.jpg" alt="">
<p class="review">米家飞行员太阳镜 Pro 椭圆框 渐变灰</p>
<div class="appraise">不错不错</div>
<div class="info">
<!--h4属于块元素，自成1行-->
<h4><a href="#">尼龙偏光，轻巧佩戴</a></h4>
<em>|</em><!--倾斜的竖线-->
<span>169元</span>
</div>
</div>
</body>
</html>