2020年2月17日
今天访问量破万了，非常开心，在这里Hunter我谢谢大家的支持，给了我坚持下去的动力，让我知道了有人看，所以我会一直更新下去的。
一. 本节课学习目标。
- 掌握盒模型的结构。
- 掌握盒模型的宽高计算方式。
- 掌握CSS的引入方式。
- 掌握通配选择器的用法。
- 通过盒模型编写百度首页。
二. 盒模型的结构。
- 盒模型简介。
HTML元素在网页中进行呈现的，都是呈现的一个盒子结构的形式，所以称为盒模型（box model）。
注意：我们的每一个html元素都有盒模型结构，比如：div，p，a，span，em，strong等等。 - 盒模型组成部分。
2.1 内容区域，width和height。
记住：只要width和height的值不改，那内容区域的大小就不会更改。
2.2 内填充padding。
记住：内填充是在边框内部的，设置的是边界和内容的距离。
2.3 边框border。
记住：边框可以灵活设置四个方向。
2.4 外间距margin.
记住：外间距是在边框以外的，用来调整的是元素的位置。 - 如何实现一个块元素水平居中？
实现方式：给该元素添加margin：0 auto;属性即可。
Auto属性作用到margin-left以及margin-right上。
计算方式： margin-left = margin-right = (浏览器宽度 – 当前元素的宽度) / 2
前提：元素的宽度必须是已知确定的。
代码块：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>盒模型</title>
<style type="text/css">
.box {
background-color: yellow;
/* 决定网页上能够显示内容的区域。 */
width: 800px;
height: 200px;
/* 内填充（边框里面的，设置边框和内容的距离） */
padding-left: 100px;
/* 边框 border */
border-left: 1px solid red;
/* 外间距 margin */
/* 第一个值：上下 第二个值：左右 auto（自动） */
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box">
昨天最好的表现就是今天最低的要求。
</div>
</body>
</html>
三. 盒模型的宽高计算方式。
- 盒模型的宽。
盒模型的宽度 = 左间距 + 左边框宽度 + 左填充 + 内容区域宽度 + 右填充 + 右边框宽度 + 右间距
盒模型的宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right。 - 盒模型的高。
盒模型的高度 = 上间距 + 上边框宽度 + 上填充 + 内容区域高度 + 下填充 + 下边框宽度 + 下间距
盒模型的高度 = margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom。
四. 盒模型练习-映纷创意顶部。
效果图：
布局时： 如果一块区域内存在多个元素（2个以上，包含2个），此时为了更好的布局，可以考虑使用div进行嵌套管理。
嵌套部分代码块：
<body>
<!-- 整个html结构 -->
<div class="top">
<img src="img/title2.png">
<div class="nav">
<a href="" id="first">HOME</a>
<a href="">WORK</a>
<a href="">CONTACT</a>
<a href="">JOIN US</a>
</div>
</div>
</body>
注：
调整距离的秘诀：
1.如果想调整相邻兄弟元素的距离。
margin外间距 margin-top,margin-bottom,margin-left,margin-right
2.如果想调整父子元素的距离。
padding内填充 padding-top,padding-bottom,padding-left,padding-right
想调整padding，一定要作用到外层的div上。
五. CSS的引入方式。
-
css内部引入方式。
1.1 实现方式：
第一步：在html文件的head标签中，添加上一对style标签。
第二步：在style标签中添加css代码。
1.2 优点:
a. css写起来比较方便。
b. css查找也比较方便。
1.3 缺点：
a. 不符合网页开发规范，html和css分离（结构和样式分离）。
b. Css样式不能复用。
1.4 使用场景：
网页比较小/课堂代码/测试。 -
Css外部引入方式。
2.1 实现方式：
a. 在当前工程中新建一个单独的css文件。
b. 在css文件中写css代码，记住：不需要再添加sytle标签。
c. 在html文件中的head标签中，通过link标签引入外部的css文件，建立关联。
2.2 优点：
a. 符合网页开发的规范，能够实现结构和样式的分离。
b. Css能够复用。
2.3 缺点:
a.不方便查找和修改。
2.4 使用场景。
中大型网页。
其中link标签代码块：
<link rel="stylesheet" type="text/css" href="css/index.css"/>
href属性放要用的css样式格式的css文件地址。
- CSS内联式。
3.1 实现方式：
a.在标签的开始标签中，添加style属性， 格式：style=”css样式”
3.2 优点：
a. 写起来方便，而且优先级比较高。
内联式 > 内部（外部）
3.3 缺点：
a. 不能复用。
b. 不符合网页开发规范。
3.4 使用场景：
当你通过内部引入的方式或者外部引入的方式，设置的css代码没有效果时（可能就是遇到了优先级不够高的问题），此时可以将css代码写在标签中。
内联式代码块：
<p class="light" style="color: blue;background-color: red;">床前明月光，疑是地上霜。</p>
六. 通配选择器。
作用：
- 用来匹配到所有的标签元素。 *：div，p，h1~h6,a等等。
- 将所有的标签元素自带的样式清除掉。 Margin:0; padding:0;
用法： * { css样式 }
通配选择器格式代码块：
* {
/* 清除所有元素自带的间距和填充 */
margin: 0;
padding: 0;
}
七. 百度首页。
- Ps的用法。
1.1 使用ps打开一个图片或者psd设计图。
1.2 快捷方式；
a. 如何将图片放大缩小。 Alt+鼠标滚轮。
b. 可以按住空格键，加鼠标左键，移动图片位置。
1.3 如何通过ps量取尺寸。
a. 找到ps菜单栏中的窗口，勾选菜单中的信息。
b. 修改尺寸单位，修改为像素px。方法： 找到信息面板的右上角，点击，点击之后选择面板选项，将第三个标尺单位，改为像素单位。
c. 找到ps工具栏中选框工具。
d. 通过拉取选框，识别对应的尺寸即可。
e. 手残党请注意：如果无法直接量取准确尺寸，可以先拉个框，然后右击变换选区，通过编辑状态调整准确尺寸。 记住：识别到准确尺寸后，要退出编辑状态，按回车即可。
1.4 如何识别颜色。
a.找到ps工具栏的前景色工具。
b.点击之后，出来拾色器吸管，吸管点击任何一个位置，即可吸取对应的颜色。
c.将对应的颜色值，复制即可。
d.复制完颜色值之后，记得一定要在前面添加#。
百度首页的代码网址链接：
https://blog.youkuaiyun.com/SB_Hunter/article/details/104328487
百度首页总结。
知识点1：完整的网页的布局顺序。
- 先对网页整体的区域进行划分，划分为多个div区域。
- 对每一块区域进行上色（宽，高，背景颜色），依次调整间距，做出实际的布局效果。
- 单独去布局每一块区域的内容（按照1,2,3步骤）。
- Css属性
a) 盒模型相关的属性：margin，padding，border，width，height。
b) 文本相关的属性：color,font-size,line-height,font-family,text-dercoration,letter-sacing等
c) 处理新问题：display: inline-block; vertical-align：top;
知识点2：间隙问题的处理？
- Html元素自带的间隙问题。
解决方案：添加通配选择器,清除元素自带的盒模型结构。
*{ margin:0； pading：0；} - 行属性标签以及行内块属性自带间隙问题。
解决方式1：将分行写的代码放置在同一行写。
解决方式2：
a. 将所有的行元素放置在一个div中。
b. 给div设置字体大小为0的属性。
c. 将行元素字体设置为想要的字体大小。
解决方式3：浮动。 - 图片对齐方式的问题。
解决方案：给图片添加vertical-align属性，默认值是baseline基线对齐，只需要给上其他值即可。 Vertical-align: top | middle | bottom；
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
