1 列表声明块
2 表格声明块
2.1 表格边框（其他元素也能用）
2.2 表格独有属性（只有 table 标签才能使用）
3 盒子模型的组成
生活中盒子模型，以桌子上放置有盒子盛放的笔记本为例：
4 盒子模型内容区（content）
❓问题：什么是浏览器的视口？
⚠注意：
①
width表示固定宽度，当横向折叠或者展开浏览器时，容器内容宽度不发生变化，当浏览器折叠后显示的宽度<容器指定的width，容器中超出浏览器折叠后显示宽度的内容以滚动条进行显示。
②min-width表示最小宽度，只有当容器的最小宽度低于浏览器的显示宽度时，容器才不会随着浏览器的横向展开或折叠进行展开或者折叠。当浏览器折叠后显示的宽度<容器指定的min-width，容器中超出浏览器折叠后显示宽度的内容以滚动条进行显示。
③max-width表示最大宽度，只有当容器的最大显示宽度低于浏览器的显示宽度时，容器才不会随着浏览器的横向展开或折叠进行展开或折叠。但是浏览器横向宽度也不可能缩小成为一条线，因为浏览器默认有最小显示宽度，当缩小到达浏览器的默认最小显示宽度时，浏览器的显示宽度将不再改变。
④max-height表示最大高度，当容器内容超过最大宽度时，容器中超出最大高度的内容将挤出容器。
⑤ 容器不设置width，margin影响容器的盒子模型大小。其容器的盒子宽高=父容器大小-margin
5 关于默认宽度
6 盒子模型内边距（padding）
7 盒子模型边框（border）
8 盒子模型外边距（margin）
8.1 注意
8.2 问题
- ❓问题：子元素的外边距参考父元素的内容区，是什么意思？
子元素的margin是以父元素的content区域上下左右四条边界线为参考系，进行距离移动，如下图所示：
-
❓问题：历史遗留外边距塌陷问题？
嵌套关系形成的外边距塌陷问题本质，如下图所示：
- ❓问题：外边距合并？
外边距合并实际情况，如下图所示：
9 处理内容溢出
10 隐藏元素的方式
11 样式的继承
11.1 可以继承的样式
11.2 查看被继承的样式属性
12 元素的默认样式
13 布局小技巧
14 元素间的空白问题
15 行内块之间的幽灵空白问题
行内块之间的幽灵空白现象，如下图所示：
16 案例： 产品卡片
16.1 视觉效果
16.2 准备素材
图片名SDK的图片存放于当前项目根目录下的imgs目录。
16.3 制作思路
- 第1步 将产品卡片设计图导入
PxCook中。 - 第2步 测量产品卡片的尺寸、颜色与样式。
- 第3步 清除默认样式
- 第4步 用
div标签创建名为product的容器。 - 第5步 在
Product容器中，创建图片、标题与文本，并设置样式。
16.4 使用技术
HTML标签
- 排版标签：
<div>、<h2>、<p> - 图片标签：
<img>
CSS样式
- 盒子模型：
box-sizng: border-box; - ...
16.5 编码实现
HTML标签
<div class="product">
<img src="./images/liveSDK.svg" alt="">
<h4>抖音直播SDK</h4>
<p>包含抖音直播看播功能</p>
</div>
CSS样式
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #f1f1f1;
}
.product {
margin: 50px auto;
padding-top: 40px;
width: 270px;
height: 253px;
background-color: #fff;
text-align: center;
border-radius: 10px;
}
.product h4 {
margin-top: 20px;
margin-bottom: 12px;
font-size: 18px;
color: #333;
font-weight: 400;
}
.product p {
font-size: 12px;
color: #555;
}
</style>
17 案例：广告卡片
17.1 视觉效果
17.2 准备素材
图片名product的图片存放于当前项目根目录下的imgs目录。
17.3 制作思路
- 第1步 将产品卡片设计图导入
PxCook中。 - 第2步 测量产品卡片的尺寸、颜色与样式。
- 第3步 清除默认样式
- 第4步 用
div标签创建名为product的容器。 - 第5步 在
Product容器中，创建图片、标题与文本，并设置样式。
17.4 使用技术
HTML标签
- 排版标签：
<div>、<h3>、<p> - 图片标签：
<img>
CSS样式
- 盒子模型：
box-sizng: border-box; - ...
17.5 编码实现
HTML标签
<!-- 布局流程：从上往下、从外往内 -->
<div class="box">
<img src="./images/product.png" alt="" class="product">
<h3>Android网络图片加载框架详解</h3>
<p><span>高级</span> • 1125人在学习</p>
</div>
CSS样式
<style>
/* 清除标签默认的margin和padding */
* {
margin: 0;
padding: 0;
}
body {
background-color: #f4f5f9;
}
.box {
/* 1、宽高 */
width: 228px;
height: 270px;
/* 2、背景颜色 */
background-color: #fff;
margin: 100px auto;
}
.box .product {
/* width: 228px; */
width: 100%;
}
.box h3 {
height: 52px;
padding-left: 24px;
padding-right: 20px;
margin-top: 25px;
font-size: 14px;
font-weight: 400;
}
.box p {
margin-left: 24px;
font-size: 12px;
color: #929292;
}
.box p span {
color: #f77321;
}
</style>
18 案例：登录框
18.1 视觉效果
18.2 准备素材
图片名mi-logo的图片存放于当前项目根目录下的imgs目录。
18.3 制作思路
- 第1步 将登录框设计图导入
PxCook中。 - 第2步 清除默认样式。
- 第3步 以
<div>标签建立box盒子。 - 第4步 在
box盒子中创建表单。 - 第5步 设置表单样式。
18.4 使用技术
-
HTML标签- 表单标签：
<input> - 排版标签：
<div>、<h1>、<h2>
- 表单标签：
-
CSS样式- 盒子模型
18.5 编码实现
HTML标签
<div class="box">
<h1></h1>
<h2>小米账号登录</h2>
<input type="text" placeholder="邮箱/手机/小米ID">
<input type="text" placeholder="邮箱/手机/小米ID">
<button>登录</button>
</div>
CSS样式
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 356px;
height: 339px;
margin: 100px auto;
}
.box h1 {
width: 49px;
height: 49px;
/* logo这个背景图片是透明的四周中间有白色的logo，所以需要设置背景颜色从而衬托出白色的logo */
background: #ff4c00 url('./images/mi-logo.png');
margin: 0 auto;
}
.box h2 {
height: 77px;
margin-top: 35px;
text-align: center;
font-size: 30px;
font-weight: 400;
}
.box input {
width: 356px;
height: 50px;
border: 1px solid #ccc;
padding-left: 15px;
margin-bottom: 14px;
/* 不要盒子被撑大，自动内减 */
box-sizing: border-box;
}
.box button {
width: 356px;
height: 50px;
background-color: #ff4c00;
color: #fff;
border: none;
}
</style>
19 案例：新浪新闻
19.1 视觉效果
19.2 准备素材
图片存放于当前项目根目录下的imgs目录。
19.3 制作思路
- 第1步 清除默认样式。
- 第2步 用标题标签标记标题内容。
- 第3步 用无序列表标记新闻内容项。
- 第4步 新闻内容项用超链接标签标记。
19.4 使用技术
-
HTML标签- 无序列表
<ul>
- 无序列表
-
CSS样式- 盒子模型
19.5 编码实现
- 整体布局
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.news {
margin: 100px auto;
width: 360px;
height: 200px;
/* background-color: pink; */
}
</style>
<div class="news"></div>
- 标题区域
<style>
.news .hd {
height: 34px;
background-color: #eee;
border: 1px solid #dbdee1;
border-left: 0;
}
.news .hd a {
/* -1 盒子向上移动 */
margin-top: -1px;
display: block;
border-top: 3px solid #ff8400;
border-right: 1px solid #dbdee1;
width: 48px;
height: 34px;
background-color: #fff;
text-align: center;
line-height: 32px;
font-size: 14px;
color: #333;
}
</style>
<div class="hd"><a href="#">新闻</a></div>
- 内容区域
<style>
.news .bd {
padding: 5px;
}
.news .bd li {
padding-left: 15px;
background-image: url(./images/square.png);
background-repeat: no-repeat;
background-position: 0 center;
}
.news .bd li a {
padding-left: 20px;
background: url(./images/img.gif) no-repeat 0 center;
font-size: 12px;
color: #666;
line-height: 24px;
}
.news .bd li a:hover {
color: #ff8400;
}
</style>
<div class="bd">
<ul>
<li><a href="#">点赞“新农人” 温暖的伸手</a></li>
<li><a href="#">在希望的田野上...</a></li>
<li><a href="#">“中国天眼”又有新发现 已在《自然》杂志发表</a></li>
<li><a href="#">急！这个领域，缺人！月薪4万元还不好招！啥情况？</a></li>
<li><a href="#">G9“带货”背后：亏损面持续扩大，竞争环境激烈</a></li>
<li><a href="#">多地力推二手房“带押过户”，有什么好处？</a></li>
</ul>
</div>
