新知
- 边框、内外边距、背景等属性的复合写法（简写）
- 快捷键：Shift + Alt + 光标，多行选中
- jpg格式图像质量好，png图像背景可以透明，PSD 是 Photoshop 的格式，设计稿文件。
- PS：可以使用 alt + 鼠标滚轮和
Ctrl++-放大缩小 - 学会技术，还需要美工设计，不然的话，自己是搞不出一个美轮美奂的页面的。
- 起名是个难题，起类，所以需要多积累。
- 不直接设置（写死）宽度，而是利用行内块元素根据内容扩展宽度的特性，再加上padding来设置可变的宽度。
- 浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。
网页布局
网页布局的三大核心：盒子模型、浮动和定位！
通过盒子模型，知道大部分 HTML 标签是一个盒子（内外边距、边框、内容、背景）。
通过 CSS 标准流（垂直上下）、浮动（水平显示）、定位可以让每个盒子排列成网页。
网页布局过程：
- 先准备好相关的网页元素，网页元素基本都是盒子（box）。（简单）
- 利用 CSS 设置好盒子样式，然后摆放到相应位置。（核心和难点）
- 往盒子里面装内容。（简单）
盒子模型（Box Model）
盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
CSS 盒子模型本质上是一个盒子，封装周围的 HTML元素。
盒子模型包括：边框、外边框、内边框和实际内容。
边框（Border）
边框由三部分组成：边框宽度（粗细）、边框样式（虚实）、边框颜色。
border: border-width | border-style | borer-color
border-style 的值有很多，重要的三个：solid、dotted、dashed。
边框的上下左右：border-top border-bottom border-left border-right
边框的复合写法（简写、无顺序要求）：1px solid red.
border 会影响盒子的实际大小，盒子大小是由 盒子+边框 相加而成的。
内边距（Padding）
padding 属性用于设置内边距，即边框与内容之间的距离。
内边距的上下左右：padding-top padding-bottom padding-left padding-right
内边距的复合写法（简写）：
| 值的个数 | 表达意思 |
| - | - |
| padding:5px | 1，代表上下左右都有5像素内边距 |
| padding:5px 10px; | 2，代表上下内边距是5像素，左右内边距是10像素 |
| padding:5px 10px 20px; | 3，代表上内边距5像素，左右内边距10px，下内边距是20px |
| padding:5px 10px 20px 30px; | 4，上5、右10、下20、左30（顺时针） |
内边距撑开盒子： 如果盒子已有宽度和高度，此时再指定内边距，会撑开盒子，即 padding 影响了盒子实际大小。为了解决上述问题，需要让量出来的宽度和高度-内边距大小。
内边距不撑开盒子： 如果盒子没有指定 width/height 属性，此时 padding 不会撑开盒子。即使是 width:100% 的指定也不要；即使继承了宽度，但没有指定，依然不会撑开盒子。
padding影响盒子的好处
利用 padding 去撑开盒子
外边距（margin）
margin 属性用于设置外边距，即控制盒子与盒子之间的距离。
外边距的上下左右：margin-top margin-bottom margin-left margin-right
margin 的复合写法（简写）：与 padding 相同。
水平居中：块级元素、行内元素和行内块元素
外边距典型应用：让块级盒子水平居中，但是必须满足两个条件：
- 盒子必须指定了宽度（width）。（如果不指定，就和浏览器一样宽了）
- 盒子左右的外边距都设置为 auto 。
让块级盒子水平居中的三种写法：
margin-left:auto; margin-right:auto;margin:auto;上下左右都居中。margin:0 auto;
如果想让行内元素或者行内块元素水平居中，给其父元素添加 text-align:center;即可。
外边距合并
外边距合并的两种情况：
- 相邻块元素垂直外边距的合并。
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下边距 margin-bottom，下面的元素有上边距 margin-top，则他们之间的垂直间距不是两者相加，而是取两者中较大者。
解决方案：尽量给一个盒子添加 margin 值。
- 嵌套块元素垂直外边距的塌陷。（没懂）
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。~父元素会塌下来到子元素的距离。~
解决方案：
- 可以为父元素定义上边框（可以把边框设置为透明）
- 可以为父元素定义上内边距
- 可以为父元素添加 overflow: hidden
清除内外边距
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。
CSS 的第一行代码：
<span role="presentation">* {</span><br/> <span role="presentation"><span cm-text=""></span></span><br/> <span role="presentation">margin:0;</span><br/> <span role="presentation"><span cm-text=""></span></span><br/> <span role="presentation">padding:0;</span><br/> <span role="presentation"><span cm-text=""></span></span><br/> <span role="presentation">}</span>
注意：行内元素尽量只设置左右的内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了。
### PS 基本操作
### 综合案例-小米在线模块
1. 先分析结构
2. 盒子与盒子的距离，最好用 margin。
3. padding 和 border 都会撑开盒子，但是不指定对应的数值就没这种担忧。
4. 标签是有语义的，标题用h 段落文字用p 。
5. margin 和 padding 大部分情况可以混用，根据实际情况，用更简单的方法实现。
6. 自己没有思路，前期先模仿老师的思路。
7. 使用辅助工具，Snipaste 和 PS 等。
### 综合案例-品优购快报
1. 先分析结构：一个大盒子装两个小盒子
2. 排列整齐的，可以使用无序列表。
3. 快捷键：Shift + Alt + 光标，多行选中
4. li 标签去掉样式：list-style:none;
5. 行高的测量：行高是由上下两部分+文字组成的，可以简单测量。
## CSS3 新增属性
### 圆角边框
border-radius:10px
原理：使用一个 Radius（半径）为10px 的圆去和四个角切边。半径越大，弧度越大。
圆形：一个正方形的边框 + 一个半径为边长一半（50%）的圆可以切出一个圆。
可以设置不同的圆角：border-radius:10px 20px 30px 40px，如果是两个数值，则为对角线。
分开写：border-top-left-radius border-top-right-radius border-bottom-left-radius border-botom-right-radius
### 盒子阴影
CSS3 中新增了盒子阴影，我们可以使用 box-shadow来
box-shadow 的2个必须值和4个可选值：h-shadow v-shadow blur spread color inset（默认outset，默认不写，写上不行）
影子不占用空间，不会影响其他盒子的排列。
box-shadow: 10px 10px -4px rgba(0,0,0,.3)
### 文字阴影
text-shadow有四个值：h-shadow v-shadow blur color
### 传统PC端网页布局的三种方式
一个基本页面会包含全部的三个布局方式。
1. 普通流（标准流）：标签按照规定好的默认方式排列，块级元素独占一行、行内元素从左到右按顺序排列，碰到父元素边缘自动换行。
2. 浮动
3. 定位
## 浮动
### 浮动
为什么需要浮动？需要将两个块级元素进行设计排列，比如两端对齐，调整对齐距离等。
很多布局效果，标准流是没有办法完成的，此时就可以利用浮动来完成布局，因为浮动可以改变元素标签默认的排列方式。
浮动最典型的应用：让多个块级元素一行内排列显示。
网页布局第一准则：多个块级元素纵向排列找标准流，横向排列找浮动。
### 什么是浮动
float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
语法：选择器 { float: 属性值;}
| 属性值 | 描述 |
| - | - |
| none | 元素不浮动（默认） |
| left | 左浮动 |
| right | 右浮动 |
### 浮动特性
1. 浮动元素会脱离标准流（脱标）。脱离标准普通流的控制，移动到指定位置；浮动的盒子不再保留原先的位置。
2. 浮动的元素会一行内显示并且元素顶部对齐。
3. 浮动的元素具有行内块元素的特性。任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。
### 浮动元素搭配标准流父级元素使用
为了约束浮动元素的位置，我们网页布局一般采取的策略是：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，复合网页布局第一准则。
### 小米商城练习
见 VScode。
### 常见的网页布局
手动实现见 Vscode。
### 浮动布局注意点
1. 浮动和标准流的父盒子搭配。先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。
2. 一个元素浮动了，理论上其余的兄弟元素也要浮动（一浮全浮），以防会出现问题。
3. 浮动的盒子只影响它后面的标准流，不会影响前面的标准流。
### 清除浮动
为什么要清除浮动？父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。
> 有时父盒子需要不写高度，因为要无限加载，随着内容的增多盒子被撑的越大，孩子越多，盒子越高。
> 但是不给父盒子高度，只在盒子里装浮动元素，会出现问题：“没有把父元素撑开”，浮动的元素脱离了标准流，不占位置。
清除浮动的本质就是清除浮动元素脱离标准流造成的影响。
当清除浮动后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了。
语法：选择器 {clear: value;} value: left right both
清除浮动的四种方法：
| 清除浮动的方式 | 优点 | 缺点 |
| - | - | - |
| 额外标签法 | 通俗易懂、书写方便 | 添加许多无意义的标签，结构化较差。 |
| 父级overflow：hidden | 书写简单 | 溢出隐藏 |
| 父级after伪元素 | 结构语义化正确 | IE兼容性问题 |
| 父级双伪元素 | 结构语义化正确 | IE兼容性问题 |
## PS 切图
PS 有很多切图方式：图层切图、切片切图、PS 插件切图等。
图层切图：切换选择工具，点击某一图片后跳到该图层，右键选择快速导出到 png 。
合并图层切图（不科学）：按住 shift 选择两个图层，选择合并，适合选取多个图层组成的图片。
切片切图：利用切片工具手动划出区域，然后打开文件菜单，选择导出 web 设备所用格式 ，选择存储选中的切片。
PS 插件切图：Cutterman 强大的工具，用来替代切片那样烦人的操作。
## 学成在线案例
### 准备素材和工具
1. 学成在线网站 PSD 源文件。
2. 开发工具：PS（切图）/cutterman 插件 + Vscode（代码） + Chrome（测试）
3. 采取结构和样式相分离的思想：建立文件夹，创建 HTML 和 CSS 文件，使用外链样式表来引入，写好清除内外边距样式来检验是否引入成功。
### CSS 属性书写顺序（重点）
看你专业不专业，注意了！
1. 布局定位属性：display / position / float / clear / visibility / overflow
2. 自身属性：width / height / margin / padding / border / background
3. 文本属性：color / font / text-decoration / text-align / vertial-align / white-space / break-word
4. 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background: linear-gradient
5. 专业示范：
<span role="presentation">.jdc {</span><br/> <span role="presentation"><span cm-text=""></span></span><br/> <span role="presentation"> display: block;</span><br/> <span role="presentation"><span cm-text=""></span></span><br/> <span role="presentation"> position: relative;</span><br/> <span role="presentation"><span cm-text=""></span></span><br/> <span role="presentation"> float: left;</span><br/> <span role="presentation"><span cm-text=""></span></span><br/> <span role="presentation"><span cm-text=""></span></span><br/> <span role="presentation"><span cm-text=""></span></span><br/> <span role="presentation"> width: 100px;</span><br/> <span role="presentation"><span cm-text=""></span></span><br/> <span role="presentation"> height: 100px;</span><br/> <span role="presentation"><span cm-text=""></span></span><br/> <span role="presentation"> margin: 0 10px;</span><br/> <span role="presentation"><span cm-text=""></span></span><br/> <span role="presentation"> padding: 20px 0;</span><br/> <span role="presentation"><span cm-text=""></span></span><br/> <span role="presentation"><span cm-text=""></span></span><br/> <span role="presentation"><span cm-text=""></span></span><br/> <span role="presentation"> font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;</span><br/> <span role="presentation"><span cm-text=""></span></span><br/> <span role="presentation"> color: #333;</span><br/> <span role="presentation"><span cm-text=""></span></span><br/> <span role="presentation"><span cm-text=""></span></span><br/> <span role="presentation"><span cm-text=""></span></span><br/> <span role="presentation"> background: rgba(0,0,0,.5);</span><br/> <span role="presentation"><span cm-text=""></span></span><br/> <span role="presentation"> border-radius: 10px;</span><br/> <span role="presentation"><span cm-text=""></span></span><br/> <span role="presentation">}</span>
### 页面局部整体思路
为了提高网页制作的效率，布局时通常由以下的整体思路：
1. 必须确定页面的版心（可视区），可以测量得知。
2. 分析页面中的行模块（标准流），以及每个行模块中的列模块（浮动）。页面布局第一准则。
3. 一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置。页面布局第二准则。
4. 制作 HTML 结构。遵循先有结构，后有样式的原则，结构永远最重要。
5. 先理清布局结构 ，再写代码！需要多写多积累，先模仿后形成自己的风格。
### 动手写学成在线的案例
见 VScode 。
## 定位
定位：可以让盒子自由地在某个盒子内移动位置或者固定在屏幕中某个位置，并且可以压住其他盒子。
为什么需要定位？因为以下情况无法使用标准流或者浮动来实现：
1. 让某个元素自由地在一个盒子内移动位置，并且压住其他盒子。
2. 有些盒子固定在屏幕的一个位置，比如上侧和右侧固定，不随拖动移动。
### 定位的组成
定位：将盒子定在某一个位置。定位也是在摆放盒子，按照定位的方式移动盒子。
定位 = 定位模式 + 边偏移
* 定位模式（position）用于指定一个元素在文档中的定位方式。
* 边偏移 决定了该元素的最终位置。
| | 值 | 示例 | 描述 |
| - | - | - | - |
| 定位模式position | static | | 静态定位 |
| relative | | 相对定位 | |
| absolute | | 绝对定位 | |
| fixed | | 固定定位 | |
| 边偏移 | top | top: 80px | 顶端偏移量，定义元素相对于父元素上边线的距离 |
| bottom | bottom: 80px | 底部偏移量，相对于父元素下边线的距离 | |
| left | left: 80px | 左侧偏移量，左边线的距离 | |
| right | right: 80px | 右侧偏移量，右边线的距离 | |
### 静态定位（static）
静态定位是元素的默认定位方式，意思是无定位，就是一个标准流，没有边偏移。
语法：选择器 {position: static; }
### 相对定位（relative）
相对定位：元素在移动位置的时候，是相对于它原来的位置来说的（自恋型）。
语法：选择器 {position: relative; top: 100px; left: 100px;}
1. 相对于自己原来的位置在移动的（移动位置的参照点是自己原来的位置）。
2. 虽然走了，但是依然占有原来的位置，后面的盒子依然以标准流的方式对待它（不脱标）。
3. 典型的应用是给绝对定位当爹的。（子绝父相）
### 绝对定位（absolute）
绝对定位：元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）。
语法：选择器{position: absolute; top: 100px; left: 100px;}
1. 如果没有祖先元素，或者祖先元素没有定位，则以浏览器为准定位（Document 文档）。
2. 只要祖先元素有定位（相对、绝对、固定），则以最近一级的祖先元素来移动位置。
3. 不再占有原来的位置。（脱标，比浮动飘的还高）
### 子绝父相
如果子级要用绝对定位，那么父级要用相对定位把儿子约束起来。
学成在线案例时间：见 Vscode。
问题1：如果使用 img 直接插入，会和之前插入的 img 主图片冲突，选择器无法很好的选择区分它们。选择使用 em 标签将其包裹起来。
### 固定定位（fixed）
固定定位：将元素固定于浏览器可视区的位置。在浏览器页面滚动时元素的位置不会改变。
语法：选择器{ position: fixed; }
1. 以浏览器的可视窗口为参照点移动元素。
2. 跟父元素没有任何关系。
3. 不随滚动条滚动。
4. 不占有原先的位置。（脱标）
5. 固定定位可以看做是一个特殊的绝对定位，例如矩形中的正方形，固定定位是父亲是可视窗口的绝对定位。
### 定位居中技巧
固定定位大技巧：固定在版心右侧，跟随版心移动。
算法：left 50%，走可视窗口的一半；left 版心宽度的一半，走版心宽度的一半。
加了绝对定位的盒子不能通过 margin: auto 水平居中，但可以通过算法来实现。先走父级的一半，再反方向走自己的一半。
### 粘性定位（sticky）
粘性定位：可认为是相对定位和固定定位的混合。
语法：选择器{ position: sticky; top:10px;}
1. 以浏览器的可视窗口为参照点移动元素。（固定定位的特点）
2. 粘性定位占有原先的位置。（不脱标）（相对定位的特点）
3. 必须要有 top bottom left right 其中一个才有效。
4. 兼容性较差，不常用。一般使用 JS 来实现这个效果。
### 定位总结
| 定位模式 | 是否脱标 | 移动位置 | 是否常用 |
| - | - | - | - |
| static | 否 | 不能使用边偏移 | 很少 |
| relative | 否 | 相对于自身位置移动 | 常用 |
| absolute | 是 | 带有定位的父级 | 常用 |
| fixed | 是 | 浏览器可视区 | 常用 |
| sticky | 否 | 浏览器可视区 | 当前阶段少 |
重点：是否脱标，以谁为基准点移动位置，子绝父相。
### 定位的叠放顺序
谁上谁下？Z-index 来控制盒子的前后次序
语法：选择器{z-index:1;}
1. 数值可以是正整数、负整数或0，默认是 auto ，数值越大，盒子越靠上。
2. 如果属性值相同，则按照书写顺序，后来居上。
3. 数字后面不能加单位。
4. 只有定位的盒子才有 z-index 属性。
### 定位的特殊特性
绝对定位和固定对位和浮动类似：
1. 行内元素添加绝对或固定定位后，可以直接设置高度和宽度。
2. 块级元素添加绝对或固定定位后，如果不给宽度或高度，默认是内容的大小。
3. 脱标的盒子不会触发外边距合并问题。
4. 绝对定位（固定定位）会完全压住盒子；但浮动元素只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）。（浮动之所以不会压住文字，是因为它最初产生的目的就是为了做文字环绕效果的）
### 综合案例
## 网页布局总结
## 元素的显示与隐藏
### display（重点）
display 用于设置一个元素如何显示。none 表示隐藏，block 除转换为块级元素外，还有显示元素的意思。
重点：display 隐藏元素后，不再占有原来的位置。
应用极其广泛，配合 JS 实现很多特效。
### visibility
inherit visible collapse hidden
重点：visibility 隐藏元素后，继续占有原来的位置。
### overflow
对溢出的部分进行控制，默认是显示（visible）。
visible auto hidden scroll
auto：溢出的时候才显示滚动条，不溢出的时候不显示。
scroll：什么时候都显示滚动条。
如果有定位的元素，慎用 隐藏 ，因为有时定位的盒子我们故意超出盒子一点的，使用隐藏，就把溢出的部分隐藏了。
### 土豆网遮罩案例
最新的土豆网已经不再使用鼠标滑过，一个半透明遮罩+播放按钮的模式了，而是把图片凸出一下，然后显示 title 内容。
当鼠标经过大盒子时，遮罩层进行显示：.tudou:hover .mask{display:block;}
## 后记
* 20210104-20210120 这段时间效率稍微有点低，但一直坚持学下来了，在此之后，可能要搁置一段时间，后续大概还有1个月的学习内容，希望下次学的开心愉快。
