本文详细介绍了前端基础知识，包括HTML和CSS的基本概念、重要元素、属性及选择器。深入探讨了Flex布局，解释了主轴、交叉轴、容器和项目属性，以及如何实现元素的定位和布局。此外，还讨论了CSS的高级技巧，如浮动、定位模式、盒模型和清除浮动的方法。内容涵盖网页结构、样式控制、元素交互等多个方面，适合前端初学者巩固基础。
前言
格式
整体大板块使用一级标题 例如：flex定位
大板块类别名使用二级标题：例如flex定位-容器属性
子类使用三级标题：例如-flex定位-容器属性-主轴/交叉轴
什么是前端
什么是Html /CSS
html
根据W3C的定义，html指的是超文本标记语言 （Hyper Text Markup language）它是用来描述网页的一种编程语言
W3C（万维网联盟）是国际最著名的标准化组织。用于定义内容和结构。
08年html5 草案发布，2012年发布了稳定版
css
根据W3C的定义，css全程是 Cascading Style sheets
页面表现的基础，可以控制全局，控制元素的渲染，用于定义Html文档的样式和布局。全程也就是层叠样式表。
常见问题
图片排版产生的3px间隙的问题
*{ vertical-align: top}
html
内容
<!doctype html>
告知浏览器以哪个版本来解析html元素
注：必须在第一行
/*doctype不写或者错误的话 会进入怪异模式 盒子也就是IE盒子*/
<head>
<meta charset="utf-8"> 字符集
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 设置浏览器用什么方式渲染
</head>
html5的变化
标签
- doctype,mata
- 新增了语义化标签和属性
- 去掉了纯展示的标签
- 添加了canvas，video，audio，本地储存，拖拽······
语义
- 标记不区分大消息 推荐 小写
- 空标记可以不闭合
- 属性值可以不添加引号 推荐双引号
- 属性值包含 true和fales的可以省略
Html的注释
<!-- html注释的内容-->
用于描述代码的功能，浏览器解析的时候不会展示出来。
Html 元素
<h3>这就是个标题</h3>
h3 是起始标记
中间 是元素的内容
/h3 是结束标记
<h1>一级标题</h1>
······
<h6>六级标题</h6>
<a href="#">XXX</a>
a 标签名
href 属性名
用=隔开
属性是写在开始标记里面的，一个标记可能有多个关联属性
标签名，属性，元素内容一起组成了元素的显示内容及其行为。
<img src="#" alt="#">
没有元素内容和闭合元素
这种就是空元素/自闭合元素
src 是图片的路径
元素的关系
父子关系
若A==直接==包含B 那A就是B的父元素 反之B是A的子元素
祖先和后代
若A==直接或间接==包含了B，那A就是B的祖先元素，B是A的后代元素。
兄弟关系
若A和B拥有同一个父级，A/B互为兄弟元素。
元素分类
按照显示分类
块级元素
块级元素独占一行，宽高可以自己设定 会自动换行
行内元素
多元素可以在一行显示，宽高自动 不会自动换行，margin和padding不生效
按照属性值分类
可替换元素
元素内容由属性值决定 （img input）
不可替换元素
内容由元素内容直接展示（p h1）
元素
单位元素
绝对单位
- px 像素大小
相对单位
- em 相对于元素本身尺寸
- rem 相对于根元素的尺寸
- %
div元素
header 页面或者区域的头部
nav 用于导航栏 aside 表示周围主题相关的附加信息
article 表示文章或者其他独立存在的内容 section 表示一个整体的主题部分
footer 表示某个区域的脚注
-
语义化优点
1.每个区域含义清晰
2.有利于SEO
3.帮助特殊设备
文本元素
| 属性 | 描述 | 效果 |
|---|---|---|
<h1>-<h6> | 标题样式 | ==没啥说的吧 |
<b> | 应突出显示的文本 | |
<p> | 段落 | |
<em> | 强调的文本 | 可以使浏览器的搜索权重加强 |
<i> | 应该区别对待的文本 | 主要用于一些阅读浏览器 |
<blockquote> | 大段引用 | 自动往中间缩紧 |
<q> | 小段引用 | 自动添加引号 |
<cite> | 文献的引用 | 斜体 |
font-style:italic | 斜体 | |
abrr title | 一般用于描述 缩写 | 自动添加 点虚线 |
pre | 预格式化 | 数学公式/化学公式等等 保留文本子啊编辑器的 样式 |
time | 时间 | 字面意思== |
mark | 高亮 | 需要重点突出的词汇可以添加这个 |
del | 删除线 | 文本居中删除 |
扩展：今日票房
<span>600</span>万后续修改只需要修改span元素就行了
a标签
<a href=" " target=""></a>
路径
相对路径
./ 当前路径
../ 跳出当前文件夹
/ 进入下一级文件夹
绝对路径
协议//域名/目录举个栗子：http://meyerweb.com/eric/tools/css/rest/rest.css
访问站外资源的时候，只能用绝对路径
站内资源推荐相对路径，绝对路径也可以写 网站已部署可以省略协议和域名
跳转路径
| 属性 | 效果 |
|---|---|
blank | 新标签页打开 |
self | 默认值-当前标签页打开 |
target
锚点标签
快速定位到页面中指定位置
在需要添加跳转的位置设置选择器，然后后续的跳转按钮引入此选择器就行了
<!-- 添加选择器 --> <p id="top"> Tenetur amet unde rem laboriosam laudantium ! </p> <!-- 引入跳转 --> <div> <a href="#top">到顶部</a> </div>
表单元素
编码特殊字符
书写格式为&实体名称;或者&实体编号
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 |   |   | |
| < | 小于符号 | < | < |
| > | 大于符号 | > | > |
| & | 并且符号 | & | & |
| © | 版权符号 | © | © |
| ® | 注册符号 | ® |
实体符号上标和下标写法
上标 <sup> <p>版权信息<sup>©</sup></p>
下标 <sub> <p>版权信息<sub>©</sub></p>
补充
direction ltr/rtl
文本书写开始的位置 从左到右 从右到左
text-transform lowercase / upercase / capitalize
文本大小写 全部小写 全部大写 首字母大写
word-spacing
词间距 适用于英文
letter-spacing
字间距 适用于中文
CSS
基本信息
CSS3新增
css3.0 更注重模块化，加强了视觉体验
CSS的注释
/*注释内容*/
-
Css注释主要用于描述代码的功能
-
浏览器解析的时候也会忽略注释
CSS的引入方法
外部样式表（外联样式表）
<link rel="stylesheet" href="XXXXX">
在head里面 引入link标签引入
实现了结构和表现的分离
方便复用和维护
因为独自分离了，让html文件大小 大幅度减少了
对搜索引擎友好，让搜索引擎对页面评分提高，有利于排名
首次使用之后就会被缓存在用户电脑上，下次访问不需要加载
内部样式表（内联样式表）
<style>
······
</style>
在head里面，通过style标签书写css代码
减少了一个文件 也就是少了一次http的请求
因为集成 所以页面不纯净、文件体积大 不利于获取信息和维护
行内样式表（内嵌样式表）
<h1 style="color: red;">
Lorem ipsum dolor sit amet
</h1>
没了样式表文件 某些时候可以提升效率
权重级最高
@import
<style>
@import url("XXXXX.CSS")
</style>
在外部样式表中使用css指令 @import 导入一个外部样式表
在开始标记里，通过style属性书写css样式
※权重比：行内样式表＞内部样式表＞外部样式表 ，就近原则来实现
CSS样式的规则
h1 { text-align: center; color: red; }
选择器{属性名:属性值;属性名:属性值}
元素选择器 元素名{声明块}
选中页面上所有的该类元素
CSS属性
颜色
关键词颜色
red/blue/green/yellow/transparent······
rgb数值颜色
rbg（）0-255的数字，三个数字分别是红绿蓝三原色用逗号隔开
rgba a（alpha）表示的是透明度,只对颜色透明 对文字无效
如果需要对文字有透明效果的话 就用
opacity进行设置
CMYK十六进制颜色
以#开头,0-9 a-f A-F
选择器
会选择页面上所有拥有该类名的元素
- class选择器 .类名{声明快}:
- id选择器 #类名{声明快}: ※（id选择器是唯一项 只能用一次 一个元素只有一个id名）
选择器命名
规则
-
不可以是纯数字结构以及数字开头
-
需要望文知意
连字符 - 例：right-top
下划线 _ 例：right_top
驼峰命名法 rightTop 后续单词的首字母大写
组合选择器-子级选择器
使用 > 进行衔接
div>p {text-align: center; color: red; }
子级选择器只能很严格的一层一层的进行选择，这也是和后代选择器最大的不同
组合选择器-后代选择器
使用 空格 进行衔接
div p {text-align: center; color: red; }
只要求后面的元素是在祖标签下的顺序即可，对中间隔了几层不敏感
伪类选择器
添加到选择器的关键字，指定要选择的元素的特殊状态
格式
selector:pseudo-class {
property: value;
}
元素筛选选择器
选中第一个对应元素
tr:first-child；
选中最后一个对应元素
tr:last-child；
选中父级中第N个对应子元素
tr:nth-child(N)；
tr:nth-child(2n+1)
奇数行
tr:nth-child(odd)
奇数行
tr:nth-child(2n)
偶数行
tr:nth-child(even)
偶数行
span:nth-child(0n+1)
表示子元素中第一个且为span的元素，与 :first-child 选择器作用相同
span:nth-child(1)
表示父元素中子元素为第一的并且名字为span的标签被选中
span:nth-child(-n+3)
匹配前三个子元素中的span元素
nth-of-type
:nth-of-type
表示父元素中全部对应子元素 中进行需求筛选
选中前m个子元素
:nth-chinld（-n+m）
排除选中
:not（：nth-child（2））
a标签伪类选择器
| 属性描述 | 效果 | 备注 |
|---|---|---|
:link | 未访问的链接样式 | href有值才生效 |
:visited | 已经访问过得链接 | 出于隐私原因，可以使用此选择器修改的样式非常有限 |
:hover | 鼠标悬停在在上面的效果 | 常常搭配transtion使用，可以为一个元素在不同状态之间切换的时候定义不同的过渡效果 |
:active | 鼠标点击中的颜色 |
为了可以正确地渲染链接元素的样式:link伪类选择器应当放在其他伪类选择器的前面，并且遵循LVHA的先后顺序，即：
:link—:visited—:hover—:active。
延伸
text-decoration:none;
取消
text-decoration:overline;
text-decoration:none;
text-decoration:none;
text-decoration:none;
盒模型
每个元素都会生成一个矩形的盒子，叫做盒模型
盒子分类
一个元素产生什么盒子，取决于他的display属性：
| 属性：display 是否继承：否 默认值：inline |
|---|
| display：inline 行盒 |
| display：block 块盒 |
| display：**** 其他元素 |
| display:none 不生成盒子 |
盒子的结构
背景渲染区域
background-clip：
padding-box：margin-padding-border-content 内边距开始
border-box：margin-padding-border-content 边框开始 默认值
content-box：margin-padding-border-content 内容开始
外边距 padding
padding: {上 右 下 左;}
padding {上 左右 下;}
padding: {上下 左右;}
padding-top 上内边距
padding-right 右内边距
padding-bottom 下内边距
padding-left 左内边距
边框 border
属性值：
-
颜色：默认黑色 可以不写
-
粗细：默认2px 可以不写
-
样式：必须写
Style 样式 dotted 点虚线 solid 直线 double 双实线 dashed 线虚线
border圆
border-radius:50px
border-radius:左上 右上 右下 左下/左上+右下 右上+左下/
半圆
border-radius：100px 100px 0 0;
不规则圆
border-radius:20px/40px
第一个数是水平方向的半径，第二个数是垂直方向的半径，这样就可以画出一个不对称的圆弧
外边距 margin
同上padding的相关属性
margin：auto属性：
- margin-left：auto 左边的元素会全部堆过来，也就抵在右边。
- margin：0 auto 左右auto自动的话，就是居中，但是父级元素必须要有width，不然我都占据一整行了 还怎么居中。
盒子宽高
真实内容
- 宽=width+padding+border
- 高=height+padding+border
可以使用box-sizing进行修改：默认值为content-box 修改为border-box 就算方式就是包含在内的。
隐藏盒子
display:none 会保留元素位置
visibility:hidden 不保留元素位置
内容控制
内容水平居中:text-align:center
内容垂直集中：line-height：Xpx X等于行高
flex
容器和项目
- 容器：父元素
- 项目：子元素
容器可以简单理解为父级元素
主轴和交叉轴
- 主轴：默认情况下 水平向右
- 交叉轴：默认情况 水平向下
.fixbox {display：flex;}
创建弹性盒子
-
所有的项目默认在一排显示
-
若项目总宽度超过容器宽度，不会去自动换行，会把项目等比例压缩
可以切换主轴和交叉轴的默认（也就是X轴也可以是交叉轴 Y轴也可以是主轴 配合下面的主轴和交叉轴属性进行使用）
flex-direction 属性决定主轴的方向（即项目的排列方向） row 主轴为水平方向，起点在左端 row-reverse 主轴为水平方向，起点在右端 column 主轴为垂直方向，起点在上沿（也就是切换了主轴和交叉轴的默认情况） column-reverse 主轴为垂直方向，起点在下沿。
容器属性（父项目属性）
flex-wrap
- no-wrap：默认 不换行 flex 的元素被摆放到到一行，这可能导致 flex 容器溢出 也就是会压缩
- wrap：换行
- wrap-reverse：倒叙换行
justify-content （合并）
- flex-start 默认值 向左对齐
- flex-end 向右对齐
- center 居中对齐
justify-content（分散）
- space-between 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。
- space-around 在每行上均匀分配弹性元素。相邻元素间距离相同。项目与容器的距离是项目之间距离的一半，可以正好形成围绕效果（around）
- space-evenly 项目与容器之间的距离和项目与项目之间的距离完全相等
flex-flow
-
flex-flow属性是**flex-direction属性和flex-wrap**属性的简写形式，默认值为row nowrap.box { flex-flow: <flex-direction> || <flex-wrap>; }
align-items
- flex-start 靠上对齐
- flex-end 靠下对齐
- center 居中
- stretch 当项目没有设定具体的值的时候，高度会被拉伸（非 常用）
align-content
align-content: center; /* 将项目放置在中点 */
align-content: start; /* 最先放置项目 */
align-content: end; /* 最后放置项目 */
align-content: flex-start; /* 从起始点开始放置flex元素 */
align-content: flex-end; /* 从终止点开始放置flex元素 */
align-content: space-between; /* 均匀分布项目第一项与起始点齐平， 最后一项与终止点齐平 */
align-content: space-around; /* 均匀分布项目项目在两端有一半大小的空间*/
align-content: space-evenly; /* 均匀分布项目项目周围有相等的空间 */
align-content: stretch; /* 均匀分布项目拉伸‘自动’-大小的项目以充满容器 */
tips
- align-content适用于 换行 （多行）情况下，单行无效，可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
- align-items 适用于当行情况下，只有上对齐、下对齐、居中和拉伸巴拉巴拉
- 单行-items/多行-content
项目属性（子项目属性）
flex
-
flex属性定义子项目**分配剩余空间，用flex来表示占多少份数**
.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }
align-self
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
order
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。- 注意：和z-index不一样！
浮动
flot
清除浮动
所有在浮动下面的自身不浮动的内容都将围绕浮动元素进行包装，如果没有处理这些元素，就会变得很糟糕。
伪元素**:after**
.outer {zoom:1;} /*==for IE6/7 Maxthon2==*/
.outer :after {clear:both; /*清除所有浮动 */
content:'.';
display:block; /* 对于FF/chrome/opera/IE8不能缺少，其中content（）可以取值也可以为空。*/
width: 0;
height: 0;
visibility:hidden;} /*作用是允许浏览器渲染它，但是不显示出来，这样才能实现清楚浮动。*/
/*==for FF/chrome/opera/IE8==*/
overflow: auto
给父元素添加overflow:hidden样式（不推荐使用）
设置高度
高度要写死，适用于固定高度的模块
定位
**position**属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。
定位的属性主要是包括两个部分 定位模式 和 边偏移
边偏移+定位模式=完整的定位
边偏移
| 边偏移属性 | 描述 |
|---|---|
| top | 顶端偏移量，定义元素相对于其父元素上边线的距离 |
| bottom | 底部偏移量，定义元素相对于其父元素下边线的距离 |
| left | 左侧偏移量，定义元素相对于其父元素左边线的距离 |
| right | 右侧偏移量，定义元素相对于其父元素右边线的距离 |
定位模式
在 CSS 中，通过 position 属性定义元素的定位模式
选择器 {
position: 属性值;
}
定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式。
定位模式决定元素的定位方式 ，它通过 CSS 的 position 属性来设置，其值可以分为四个：
| 值 | 语义 |
|---|---|
static | 静态定位 是其计算后位置属性为 relative, absolute, fixed或 sticky 的一个元素（换句话说，除static以外的任何东西） |
relative | 相对定位 相对于其原文档流的位置进行定位 是计算后位置属性为 relative的元素。 |
absolute | 绝对定位 相对于上一个已经定位的父元素进行定位 计算后位置属性为 absolute 或 fixed 的元素。 |
fixed | 固定定位 |
static
该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index属性无效。
对边偏移无效的，一般用来清除定位的
relative
该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。
相对定位的特点：（务必记住）
它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。
他原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。
因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的
absolute
元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
父级都没有定位的时候，以浏览器为准对齐
父级有定位的时候，绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位
fixed
元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。
固定在窗口位置 只以浏览器为准
偏移量都要给清楚 不然不显示
完全脱标 不占位置 不滚动 （不滚动 懂我的意思吧）
固定定位的盒子一定要写宽和高，除非有内容撑开的话 可以不用写
sticky
元素根据正常文档流进行定位，然后相对它的*最近滚动祖先（nearest scrolling ancestor）*和 containing block(最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。
该值总是创建一个新的[层叠上下文stacking context。注意，一个sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的overflow 是 hidden, scroll, auto, 或 overlay时），即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为。
叠放次序（Z-index）
当元素之间重叠的时候， z-index 较大的元素会覆盖较小的元素在上层进行显示
- z-index 后面数字越大的 越在上方显示
- z-index 后面的数字
不要跟单位 - 取值相同的情况下，后来者居上
- 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。
元素的显示与隐藏
在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是display visibility和 overflow
他们的主要目的是让一个元素在页面中隐藏，但是不在文档源码中删除。最常见的是网站广告，当我们点击类似关闭不见了，但是我们重新刷新页面，它们又会出现和你玩躲猫猫!!
| 属性 | 语义 | 特点 |
|---|---|---|
display显示 | display : none隐藏对象，与它相反的是display:block除了转换为块级元素之外，同时还有显示元素的意思 | 隐藏之后，不再保留位（下拉菜单啊 特效啊 基本都是用的这货） |
visibility可见性 | visible :对象可视 hidden :对象隐藏 | 隐藏之后，继续保留原有位置(停职留薪) |
overflow | auto：超出显示滚动条 不超出不显示；hidden：超出内容进行切割。 | 对象内的内容如果超出了内容的范围 可以进行管理 |
定位模式的转换
和浮动一样，元素添加了绝对定位和固定定位之后（因为这两个脱标,so 相对定位不行），元素模式也会转变，变成行内块元素，这个时候我们需要的话直接给宽和高就行了
也就是说如果我们平时某个盒子本身就需要添加浮动或者绝对/固定定位这些，就不需要单独添加display转换了
子绝父相
-
相对定位 relative 占有位置 不脱标
-
绝对定位 absolute 不占有位置 完全脱标
-
父元素用相对定位的话，占有位置，那样的话，整体排班不会出问题，下面的元素不会挤上来
-
子元素就可以在父元素里面就不会出去了
-
绝对定位的盒子水平/垂直居中
- 外边距的一半 然后项目的一半==
CSS高级技巧
css用户界面样式
鼠标样式cursor
cursor:default 小白 / pointer 小手 / mova 移动 /text 文本
看场景进行使用，比如需要提醒一下用户此处可以点击 可以调整为小手的样式
轮廓outline
是绘制于元素周围的一条线，位于边框边缘的外围，可以起到突出元素的作用
outline 用法等同border outline=out line 外面的线=轮廓线
常用
outline:0取消轮廓线
防拖拽文本域resize
textarea {
resize:none;
}
防止文本域拖拽
此操作一般和上面的
outline取消轮廓线一起使用
JavaScript
待我！
心得
2.23
今天是第一天的正式的课程，其实和我预期不太一样，进度很快，下午赵老师还提了一嘴，flex可能后天就学到了，这进度确实是惊到我了，今天学习的内容其实大体上我都是会的，但是一些细节上确实得到了补足。在 元素的分别上 以前对于header等的掌握还是很模糊的，在自己自学 之前看到pink等直接使用nav其实是有点懵逼的，今天其实这方便是得到了补充，今天有个作业 脑子有点乱，明天看看有没有问题。
2.24
今天的学习其实主要是css样式/部分选择器和盒模型的基础了解这一些点上。
css样式
今天课堂上教授的就是基础的字体的颜色大小等等的样式，以及样式的规则，其实规则只需要记住是
选择器{属性：属性值} 逻辑就很清晰了，不过在引入外部样式表的时候发现了 css样式的文件名字 前面不能是#等符号，也不能有空格，不然链接不成功
选择器
选择器这一块儿其实就还好了，主要解决我了一个很大的疑惑，以前提前看JS的东西的时候 有时候会看到一个很长的单词 还是搜不出来来就很慌，今天知道了，那玩意儿就是用驼峰命名法搞出来的
盒模型
盒模型这一块，其实今天是为了之后的布局打下一个基础，尤其是margin和padding的用法，看似一样其实是很有差别的，比如有的时候你需要思考他究竟是内容，需要移动过来还是整个盒子都要过来。
今天整体的学习感觉很不错，明天开始估计要接触浮动等东西了，奥利给！
2.26
今天才真正搞懂了什么是清除浮动或者说清除浮动带来的坏影响，使用浮动的话可能所有在浮动下面的自身不浮动的内容都将围绕浮动元素进行动作 通俗易懂
2.27
今天的其实主要内容学习的不多，听取了肖老师的课程讲解还有作业这块儿
主要记住的是雪碧图的用法（scprit）
预习这块儿预习到了position了，目前感觉还行挺爽，主要是记住大部分情况下使用子绝父相的原理就行了
这样可以在最大的程度上不让定位产生坏的影响
2.28
有时候做了display：inline-block 的时候 会出现有一点的溢出元素
可以用==*{ vertical-align: top}==来进行解决
vertical-align 主要是用来做垂直对齐的
3.1
今天整体其实都是复习的节奏，在回顾以前的知识点的同时，也进行了一些补足
- 对于visibility，之前知道这玩意可以隐藏部分信息 之前也是用于清除浮动 但是不太清楚到底是什么逻辑，今天的学习是认识到了这个属性和display：none的区别
- 对于基本知识的认知，目前学到的很多东西都会写，但是很多概念反而不是特别的清晰，概念性的东西欠缺，后面面试以及交流的时候这是会吃亏的地方
- 有一些之前用的只知道这么用但是不清楚原理的属性，这两天都弄清楚了舒服多了
- 今晚的作业其实很简单，没多久就可以了，但是做到导航栏的时候，忽然想之前一直给文字加了hover，使文字会跟随变色，但是前面的icon不变色，很不爽，就去大概认真想了一下，想出来了，还是用hover，鼠标移动到文字的时候，让大盒子里的icon也变色。前端其实有时候的自我练习很简单，想到一个页面一个效果 其实就可以敲一下，看的多不如敲的多，当然还是要多看==，有时候做东西的时候可以尝试下的去更加完善一下，自己加点难度（某一个小问题出问题的时候，看着密密麻麻的字符火大也是正常的）
- 目前状态还行 希望继续保持吧== 奥利给给
3.2
今天尝试在跟着老师走复习的同时，加上一些自己的想法去多操作了
锚点定位的时候 可以思考一下怎么实现目前普遍存在的固定在右边的一键回到顶部，使用的肯定是固定定位，以浏览器为标准，然后
边飘逸的值需要设置完成才能正常显示制作鼠标移动显示二维码的效果，其实可以认真想一下原理是什么，鼠标移动到文字上面之后 下面显示二维码，逻辑上也就是 首先二维码需要存在，然后隐藏码，这里需要思考用display还是visibility了，
display 隐藏之后不占用位置 也就不影响下面的正常布局，visibility隐藏之后还是占用所以这里不适合。然后试用display：none把盒子隐藏过去，然后用昨天做迪士尼导航栏的一个思路，鼠标移动到盒子上的文字框时候，div:hover img把盒子里面二维码的属性，修改为display：block就行了，晚点可以试试做一下 导航栏鼠标悬浮下拉菜单的样式。伪类选择器的理解，first-child我的理解是父元素中子元素为第一的并且名字为X的标签被选中。==这样理解也没问题 所以我啥我说错了呢
总结一下nth/first/last-child的含义就是 父元素中子元素为第一/最后的并且名字为X的标签被选中
nth-of-child的含义就是 先从父元素中把需求子元素挑出来，再在这一堆里面按照属性筛选
div>p:nth-child(-n+5):not(:nth-child(-n+2)) 前排同学忽然想提出可以选择一个范围不，我认真想了一下逻辑感觉可以实现，首先确定一个范围，然后剔除不要的就行了这个思路可以，但是另外一个思路不行很奇怪 选择第N个到第N个，取两者的交集
:nth-child(-n+9):nth-child(n+6)这样写 不实现 不清楚为啥。
3.3
今天课堂上有很多拓展思考，都挺有趣的让自己主动思考。制作半圆把高度height设置为宽度width的一半，并且左上角和右上角的圆角半径定义为元素的高度一致，而右下角和左下角的圆角半径定义为0就阔以了
今天的作业因为赵老师说别的班考试 大概时间一个小时，所以给自己定的时间也是一个小时，但是做起来就感觉不对了太慢了，满打满算也两个半小时左右了
这也发现了几个问题点，标题的下划线和右划线 其实直接可以a标签 加边框就行了的 一开始还是给他定了个盒子；列表的处理，因为样式清除的关系，在li前面的圈圈上其实也纠结了半天，但是没有正确的去尝试添加样式瞅瞅；
代码的整洁性，因为没有规矩对齐，导致后面有一个/div多写了 有一个盒子 在大盒子外面 找了半天原因没找到 在F12检查中 一个一个筛出来的，这也是本不应该的错误。其实问题都是反应出来是操作的还不够多，没有从实践中整理==平时还是再多做点小效果吧多练习。
扫一扫
6674
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
