【b站自学】【初学者】学习前端开发的第二周

周一：

1. 导航栏案例的练习
   使用后代选择器实现css样式的改变

2. 伪类选择器 添加特殊效果
   链接伪类选择器
   a:link 未访问过链接的状态
   a:visited 已经访问过的链接
   a:hover 鼠标经过链接时的状态
   a:active 按下鼠标别松开的时候
   顺序不要颠倒 按照lvha顺序
   交集选择器的变形
   给链接单独指定样式
   一般写整体a 再加1个a：hover 即可

3. 不同标签显示效果不一样
   div独占一行
   多个span可在同一行

4. 标签显示模式
   块元素
   行内元素

4. 1块级元素 竖着显示的 一行一个
   h p div ul ol li
   高宽外内边距是可以设置的
   p不能放块级元素 p内不能放div
   文字标签内不能放块级元素
   默认宽度 容器的100%

4. 2行内元素 一行内可以放多个
   a strong b em i del s ins u span
   高宽直接设置是无效的
   有默认宽度
   只能容纳文本 或其他的行内元素
   链接里不能放链接
   给a转换成块级模式 才能给a里面放块级元素
   默认宽度跟本身的内容有关

4. 3 行内块元素
   img input td
   与相邻元素一行显示 中间有缝隙 一行可显示多个
   可设置修改宽高内外边距
   默认宽度跟本身的内容有关

4. 4模式转换display
   block 行内元素转化为块元素
   inline 块元素转化为行内元素
   inline-block 转化为行内块元素 一行显示有大小

1.巩固复习本周所学内容，将本周重点知识写入csdn博客
2.导航栏css样式练习
3.熟悉伪类选择器的用法以及注意事项

5. 行高测量
   顶线 中线 基线 底线
   基线到基线的距离叫行高
6. 1单行文本垂直居中
   行高=上距离+内容+下距离高度
   行高等于盒子高度 文字会垂直居中
   行高大于高度 文字偏下
   行高小于高度 文字偏上

6. css背景
   背景颜色 background-color 默认是透明
   背景图片 background-image 必须加url 默认是平铺的
   background-repeat 默认的是平铺，no-repeat,repeat-x,repeat-y
   背景位置 background-position:x y
   指定background-image 属性
   可以跟方位名词或精确位置
   例如右上 right top
   左下 left bottom
   中间 center center
   如果两个都是方位名词 前后互换也可以
   如果只指定了一个方位名词，另一个默认居中对齐

精确位置 向右是x 向下是y 越向下 向右 越大
精确和方位 可以混用 第一个一定是x 第二个是y

超大背景定位 center top

6. background-attachment 默认是滚动的
   fixed 背景固定 页面上的东西在动
   scroll 背景跟着页面上的东西一块动

7. 背景简写 没有官方强制标准
   background 颜色 图片地址 平铺 滚动 位置

1.学习行高测量，会设置单行文本垂直居中
2.学习css背景样式的各种设置方法，理解各属性的用法，记录注意事项
3.巩固练习伪类选择器，display属性的相关用法
4.进行导航栏设计的练习，做了一个竖排导航栏和横排导航栏

[搭配很丑 别介意]

---

周二：

1. 背景透明
   background:rgba(0,0,0,0.5)
   透明度 0-1 盒子背景半透明 里面内容不受影响

2. css三大特性
   css层叠性 多种叠加 后面冲掉前面的 就近原则
   css继承性 子承父业 text font line color 可以继承
   css优先级 1.权重计算公式
   选择器相同，执行重叠性
   选择器不同，执行优先级
   继承或*< 标签选择器 < 类选择器 < id选择器 < 行内样式表 < !important 样式属性的后面添加 权重最高

2. 1 权重叠加
   进行简单的加法叠加计算
   比较谁的数值大进行css样式设置就可

数位之间没有进制
先看修改样式的标签有没有被选中
如果选中就用公式计算权重
如果没有选中 那么权重为0 继承的权重为0

3. 总结
   css复合选择器
   标签的显示模式
   行高那些事
   css背景
   css三大特性

---

周三：

1. 重点：盒子模型 浮动 定位
   boder 边框
   padding 内边距
   margin 外边距
   ps 基本操作

2. 本质
   先设置盒子大小 再填入内容

3. 盒子模型
   矩形 装内容的盒子
   盒子厚度 boder
   泡沫 padding
   盒子与盒子间的距离 外边距 margin

4. 边框
   boder-width 几像素宽
   boder-style none dotted点 solid 实线 dashed 虚线
   boder-color 颜色
   boder 简写 也没有顺序 粗细 样式 颜色

4. 1 各边边框
   boder-top 上
   boder-bottom 下
   boder-left 左
   boder-right 右
   先去掉所有边框 none 再添加一条特殊边框就可

4. 2 细线边框
   两个边框叠加 会变粗
   合并时单元格 用boder-collapse （不会加粗）

5. 内边距
   padding-left
   …right
   …top
   …bottom
   盒子变大了 撑开了
   padding简写 1个值 上下左右 2个值 上下 左右 3个值 上 左右 下 4个值 上右下左 顺时针

6. 宽度不一样 用padding 撑开盒子

6. 1 计算内部实际的盒子大小
   盒子实际大小=内容宽度+内边距+边框
   解决方法：减去内边距

6. 2 padding不会撑开盒子的情况
   如果没有宽度 则padding不会撑开盒子

7. 外边距 移动盒子在页面中的位置 盒子和盒子之间的距离
   margin-left
   …right
   …top
   …bottom

7. 1 块级盒子居中对齐
   1.必须有宽度 左右外边距设置为auto
   2.直接margin auto
   3.margin 0 auto

7. 2 文字居中和盒子居中
   1.块级盒子居中对齐水平 margin auto
   2.盒子中的文字水平居中 text-align center 行内块和行内元素也能水平居中对齐 特殊的文字形式

7. 3 插入图片 和 背景图片
   1.插入图片 产品展示类 用 padding margin 移动盒子在页面中的位置
   2.背景图片 移动位置 是background-position 移动

8. 清除元素默认的内外边距 css第一句
   行内元素只设置左右 不设置上下的
   *{
   padding：0
   margin：0
   }

8. 1 外边距合并
   垂直外边距 取两个之中较大的一个

8. 2 嵌套块元素垂直外边距的合并
   1.为父元素设置定义上边框
   2.可以给父亲指定 上padding值
   3.给父亲添加overflow：hidden

9. 盒子模型布局稳定性
   width > padding > argin
   优先用w

10. ps基本操作和快捷键
    ctrl+o 快捷打开
    ctrl+ +/- 放大缩小
    空格 拖动视图

总结：
1.学习了内边距、外边距、边框中各种属性的设置方式，以及注意事项
2.学习了ps基本操作测量大小、测量边距等
3.跟着老师的讲解，做了两个小的案例

[搭配很丑 图片随机选的]

---

周四:

1. 圆角矩形
   boder-radius
   数值或百分比
   百分比:正圆
   精确：用高度的一半

2. 盒子阴影
   box-shadow 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影
   inset 内 outset 外

3. 书写规范
   空格规范 选择器和{之间必须有空格
   属性和值之间

选择器规范
选择器另起一行 第二个} 与选择器对其
选择器嵌套不超过三层
属性定义分号结束 属性单独占一行

4. 浮动
   普通流 块级元素 行内元素
   浮动 多个块一行显示
   定位 定在某一个位置

5. 为什么需要浮动
   一行多个盒子无缝隙
   一行左右两个盒子 极左 极右

6. 作用
   多个盒子排成一排
   文字环绕图片
   左对齐右对齐
   float none left左 right右

7. 浮动口诀
   ① 浮 普通流之上 脱离标准流 漂浮起来 压盖标准流
   ② 漏 浮动的盒子把自己原来的盒子给下边的盒子
   ③ 特 float属性会改变元素的display属性 生成行内块（极其相似）
   浮动元素之间默认没有缝隙 与真正的行内块有差别
   如果父亲盒子装不下，则换行显示

8. 小结
   多个块级元素同行显示
   三个特点

9. 应用
   添加一个标准流父亲 减少对其他流的影响
   完整网页=标准流+浮动+定位

10. 浮动盒子与父盒子的关系
    浮动从边框开始
    不会压着边框
    不会压着padding

10. 1 浮动元素和兄弟盒子的关系
    浮动 显示在同一行
    一个浮动 一个不浮动 原位置
    浮动只会影响当前或者后面的标准流盒子，不会影响前面的标准流
    要浮动 都浮动

总结：
1.学习css拓展应用，圆角矩形，盒子阴影的知识
2.了解css书写规范
3.学习浮动使用的场景、应用的范围，浮动的三个特点，浮动盒子与父盒子、兄弟盒子的关系
4.跟着老师讲解，做了两个案例

[之前用剩下的素材 各种截图]

---

周五：

1. 为什么要清除浮动
   父集盒子没法给高度 子盒子浮动不占位置 父亲高度为0
   标准流 子盒子大 父亲也大

2. 清除浮动的本质
   父亲高度为0 清除浮动后 父亲自动匹配子级的高度 不会影响下边的标准流

3. 清除浮动的方法
   clear left right both
   3.1 额外标签法
   浮动元素末尾加新标签 空标签
   3.2 父亲添加overflow 属性方法
   overflow hidden auto scroll
   缺点：多出来的部分隐藏起来 无法显示溢出的元素
   3.3 after伪元素清除浮动
   .clearfix:after{
   content""
   display block
   height 0
   visibility hidden
   clear both
   }
   .clearfix{
   *zoom 1 （ie6,7 清除浮动的样式）
   }
   下边用到浮动的父亲选择器调用clearfix即可
   3.4 双伪元素清除浮动
   .clearfix:before,
   .clearfix:after{
   content “”
   display table
   }
   .clearfix:after{
   clear:both
   }
   .clearfix{
   *zoom 1 （ie6,7 清除浮动的样式）
   }

4. 清除浮动小结

5. ps切图工具
   psd图片图层 切片方便
   5.1 ps切片工具
   先选中再导出存储为web所用格式
   新建基于图层的切片
   切片选择工具 +delete 清除选中

5. 2 切片插件
   cutterman 插件 ps完整版
   安装插件

5. 3 学成在线页面制作
   ①css属性书写顺序
   布局定位属性：display position float clear
   自身属性：w h margin padding boder background
   文本属性：color font text组别
   其他属性（css3）：content cursor backgroundlineargradient boxshadow textshadow

总结：
1.学习了清除浮动的方法及原因
2.学习使用ps进行图片切片，并安装了cutterman插件，进行简单的使用
3.学习了css属性的书写顺序
4.依据所学做了一个简单的页面

---

周六：
今天是难忘的一天
从早上九点开始，断断续续改代码，从1到384，这是最具有纪念意义的一天！！
终于写出了一个看起来像个样子的网页啦！！
网页的界面发在我的最新文章上！！
[我太开心了 语无伦次]

正在持续更新…