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))。