2020年2月19日
今天主要是练习为主，知识点主要是学了怪异盒模型。
一. 本节课学习目标。
- 掌握浮动的应用。
- 掌握标准盒模型和怪异盒模型的用法以及区别。 重点
二. 浮动的应用。
小米官网.
![在这里插入图片描述]()
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小米官网02</title>
<!-- css外部引入方式 -->
<link rel="stylesheet" type="text/css" href="css/mi2.css"/>
</head>
<body>
<!-- 整体结构 .wrap>div{$}*9 -->
<div class="wrap">
<!-- 1 -->
<div id="first">
<img src="img/mi1/1.webp" >
</div>
<!-- 2 -->
<div>
<img src="img/mi1/2.webp" class="pic">
<p class="name">小米10</p>
<p class="solgon">骁龙865/1亿像素相机</p>
<p class="price">3999元起</p>
</div>
<!-- 3 -->
<div>
<img src="img/mi1/3.webp" class="pic">
<p class="name">小米10</p>
<p class="solgon">骁龙865/1亿像素相机</p>
<p class="price">3999元起</p>
</div>
<!-- 4 -->
<div>
<img src="img/mi1/4.webp" class="pic">
<p class="name">小米10</p>
<p class="solgon">骁龙865/1亿像素相机</p>
<p class="price">3999元起</p>
</div>
<!-- 5 -->
<div>
<img src="img/mi1/5.webp" class="pic">
<p class="name">小米10</p>
<p class="solgon">骁龙865/1亿像素相机</p>
<p class="price">
<span>2599元起</span><span class="ori_price">2799元</span>
</p>
</div>
<!-- 6 -->
<div class="top">
<img src="img/mi1/6.webp" class="pic">
<p class="name">小米10</p>
<p class="solgon">骁龙865/1亿像素相机</p>
<p class="price">
<span>2599元起</span><span class="ori_price">2799元</span>
</p>
</div>
<!-- 7 -->
<div class="top">
<img src="img/mi1/7.webp" class="pic">
<p class="name">小米10</p>
<p class="solgon">骁龙865/1亿像素相机</p>
<p class="price">
<span>2599元起</span><span class="ori_price">2799元</span>
</p>
</div>
<!-- 8 -->
<div class="top">
<img src="img/mi1/8.webp" class="pic">
<p class="name">小米10</p>
<p class="solgon">骁龙865/1亿像素相机</p>
<p class="price">
<span>2599元起</span><span class="ori_price">2799元</span>
</p>
</div>
<!-- 9 -->
<div class="top">
<img src="img/mi1/9.webp" class="pic">
<p class="name">小米10</p>
<p class="solgon">骁龙865/1亿像素相机</p>
<p class="price">
<span>2599元起</span><span class="ori_price">2799元</span>
</p>
</div>
</div>
</body>
</html>
css样式代码：
* {
/* 将元素自带的外间距和内填充清0 */
margin: 0;
padding: 0;
}
body {
background-color: #F5F5F5;
}
.wrap {
width: 1226px;
/* 水平居中 */
margin: 0 auto;
/* border: 1px solid black; */
overflow: hidden;
}
/* 访问到9个小div */
.wrap>div {
width: 234px;
height: 280px;
/*
白色：
1. white
2. #FFFFFF, #FFF, #fff, #ffffff
3. rgb(255, 255, 255)
*/
background-color: #FFFFFF;
/* 浮动 - 9个小div全部浮动 */
float: left;
/* 左间距 */
margin-left: 14px;
/* 水平居中 */
text-align: center;
font-family: "arial, helvetica, sans-serif";
/* 上填充 */
padding-top: 20px;
}
/* 访问6,7,8,9div */
.wrap>.top {
/* 上间距 */
margin-top: 14px;
}
/* 修改第1个 */
#first {
height: 614px;
/* 清除第一个div的左间距 */
margin-left: 0;
/* 清除第一个div的上填充 */
padding-top: 0;
}
/* 处理每一个小的div的内容(2,3,4) */
.pic {
width: 160px;
}
.name {
color: #333;
font-size: 14px;
line-height: 21px;
/* 上间距 */
margin-top: 18px;
}
.solgon {
color: #b0b0b0;
font-size: 12px;
line-height: 18px;
/* 上间距 */
margin-top: 2px;
}
.price {
color: #ff6700;
line-height: 21px;
font-size: 14px;
/* 上间距 */
margin-top: 10px;
}
/* 原价 */
.ori_price {
color: #b0b0b0;
/* 左间距 */
margin-left: 7px;
/* 文本装饰 */
text-decoration: line-through;
}
三. 怪异盒模型。
- 作用：用来更方便的布局。
- 用法：给元素添加属性box-sizing， 设置值为 border-box。 Box-sizing: border-box;
- 计算公式：
标准盒模型宽度 = 不可视区域(margin) + 可视区域(width + padding(left,right) + border(left,right))。
怪异盒模型宽度 = 不可视区域(margin) + 可视区域width(内容区域的宽度 + padding(left,right) + border(left, right))。
标准盒模型高度 = 不可视区域(margin) + 可视区域(height+ padding(top,bottom) + border(top,bottom))。
怪异盒模型高度 = 不可视区域(margin) + 可视区域height(内容区域的高度 + padding(top,bottom) + border(top,bottom))。