Danmo 的学习之路（HTML——CSS）
文章目录
- meta标签
- 选择器
- RGB、盒子模型、文档流
- 盒子大小和圆角
- 浮动
- 高度塌陷和BFC
- 定位
- 字体族
- 图标字体
- 字体和文本
- 背景
- 渐变
- 雪碧图
- 表格
- 表单
- 过渡
- 动画
- 变形
- less
- 弹性盒子
- 像素和移动端
- 响应式布局
10.2
- 获得前端三剑客书籍
- 第一次在github上存代码
- C语言 练习使用printf和scanf
- 第一次在CSDN上发博客 HTML+CSS教程（后简称HC）前两讲： 历史
HTML负责结构，CSS负责样式，JS负责行为
10.3
HTML：
自结束标签（不用写结束标签）
- < !DOCTYPE HTML> 声明类型
- < meta charset=“utm-8”>设置网页的字符集，防止乱码的出现
- 实体（w3school上可查详细内容):& nbsp;可以输出空格
软件：
- 安装了notepad++
- 终于用上Chrome
- 在Vscode内打开代码文件夹（学习了vscode的一些功能）
- 下载了vscode中文包，live server
- 设置字体大小：（左上角）文件-首选项-设置
- 左下角的齿轮也可以设置
- 先!再Tab可以直接生成完整网页结构
10.4
HTML：
meta标签
meta
< meta arthor="Danmo">
< meta name="keywords" content="逆转裁判，神千，神乃木庄龙">
< meta name="description" content="这是一个关于逆转裁判的网站">
< meta http-equiv="refresh" content="3;url=https://www.bilibili.com/video/BV1XJ411X7Ud?p=15">（自更新）
HTML，对于语义化标签，我们只关注语义，不在乎形式，那些东西交给CSS吧！
像div，span这种标签，没有语义
- 块元素< h> < hgroup> 存放一组相关的标题< p> < blockquote>长引用
- 行内元素 < em> 语气加重 < strong>表示强调 < q>短引用
- div是主要的布局元素
- span行内元素，在网页中选中文字
软件：
- Pr 2020
- Vscode：
Ctrl+回车 只会让光标下移；
Ctrl+backspace 可以一次性删掉一行前边的所有空格（Tab）
10.5
HTML：
链接：./表示当前目录，…/表示上一级目录
< img>图片标签
四种图片格式：jpg,gif,png,webp,base64码
软件：
alt+shift+↑/↓，可以在vscode里向上/向下复制
在vscode输入br*3再回车，可以同时出现3个
10.6
HTML:
- iframe表示内联框架（由于无法被浏览器搜索功能检索，用处不是很大），只有设置了frameborder=0才能彻底消除边框，可以设置width和height。
- audio引用音频，加controls属性才出现播放按钮，autoplay属性自动播放（但基本无用，浏览器为了用户体验，不会设置成自动播放，IE除外）loop可以播放完继续循环播放
- video引用视频，和audio的用法一样。
引用其他网站视频的方法：在视频网站点分享，有一个“嵌入代码”，复制到vscode即可，视频框的大小可以用width和height调整。
选择器
10.7
CSS：
- 三种CSS编写的位置：内联样式，内部样式，外部样式。
- 外部样式在head里用< link>引入外部CSS文件，内部样式写在head里，内联样式直接在p后跟style。
CSS基本语法：选择器+声明块
- 常用选择器：
- 元素选择器
- id选择器：在p后加入id属性，css中在选择器前加#号。注意，id不要重复
- 类选择器（class选择器）：在p后加入class属性，css中在选择器前加.号。类选择器可以重复。可以同时为一个元素添加多个class属性（两个class名之间用空格隔开即可） （建议多用class选择器）
- 通配选择器（用*{}）
- 复合选择器：无
- 交集选择器：语法：选择器1选择器2选择器3...选择器n（连着写，如果有就必须以元素选择器开头）（有时候没必要多此一举）
- 举例：div.red（div对应元素选择器，.red对应class选择器）
- 并集选择器：语法：选择器之间以逗号隔开。
- 举例：#b1,.p1,h1,span,div.red
- 交集选择器和并集选择器可以套（交集中可以出现并集，并集中可以出现交集）
软件：
Vscode：
- Ctrl+！可以直接生成注释（在HTML中就生成HTML注释，在CSS中就生成CSS注释）再按一次可以取消注释
10.8
HTML：
- Title属性，把鼠标光标放在文件上，可以看到title信息。
CSS：
- 父元素、子元素、祖先元素、后代元素、兄弟元素（父子的要求比较严格，兄弟指同一个父元素下的几个子元素）
- 关系选择器：
- 子元素选择器：选中指定父元素的指定子元素。用”>”连接。
- 后代元素选择器：选中指定元素内的指定后代元素。用空格连接。
- 兄弟选择器：
- 下一个：选中A元素的下一个元素B，并且中间不能被隔开（前提是兄弟关系）。用+连接。
- 下边所有：选中A元素之后的所有元素。
- 属性选择器： 语法：
- [属性名] 选择含有指定属性的元素
- [属性名=属性值]选择含有指定属性和属性值的元素
- 属性名^=属性值]选择属性值以指定值开头的元素
- [属性名$=属性值]选择属性值以指定值结尾的元素
- [属性名*=属性值]选择属性值中含有某值的元素的元素
- 例如：p[title^=abc]（元素选择器和属性选择器构成了复合选择器）
- 伪类选择器：（前边带一个冒号） 语法：
- child系：对所有子元素进行排序
- type系：在同类型元素中进行排序
- :nth-child( ) 选中第n个子元素（第一个元素的序号为0）。
- :nth-of-type 括号内输入2n或even可指定偶数，括号内输入2n+1或odd可指定奇数，还可以输入其它代数式来选中对应的元素。（经过测试，有时候输入odd或者even会失效，建议输入含n的代数式）
nth可以换成first或last，但感觉不如上面的这两种。
软件：
Vscode：
- 可以根据CSS选择器的需求来生成标签。比如输入ul>li*5，就会自动生成一系列标签。其他选择器也是同理。
10.9
CSS：
- 超链接伪类：
- link表示没访问过的，visited表示访问过的。完整的写法是a:link和a:visited.
- 只有link标签既可以改颜色又可以改大小，出于隐私性考虑，visited只能改颜色
- 在link处改大小时，link和visited的链接都会变大
- a:hover和a:active 分别可以修改链接被选中和没被选中时的颜色
- 伪元素：
- p::first letter
- p::first line
- p::selection 表示选中的内容
- 以下的两种最常用： p::before p::after
- before和after必须结合content属性来使用，content是CSS内的元素
before和after里的内容，在复制的时候不会被选上，在开发中常用
软件:
Vscode:
在< p>标签中输入lorem，可以自动生成一大段话，用于测试。
10.10
CSS：
- 样式的继承：为一个元素设置样式的同时也会应用到它的后代元素上
- 可以将通用的样式统一设置到共同的祖先元素上，从而使所有元素都具有该样式，但是背景/布局相关的样式不会被继承。
- 样式的权重：
- 内联样式：1，0，0，0
- id选择器：0，1，0，0
- 类和伪类选择器：0，0，1，0
- 元素选择器：0，0，0，1
- 通配选择器：0，0，0，0
- 继承：无优先级
- 将所有选择器加在一起算（逗号隔开的分组选择器是单独算）
- 选择器的累加不会超过其对应的数量级（比如类选择器再高也高不过id选择器） 如果优先级相同，优先使用靠下的样式
- 在某一个样式的后边添加!important，则此时该样式会获取最高的优先级，甚至超过内联样式，开发中尽量不要用。
- width和height，可以将属性值设置为相对于其父元素属性的百分比 好处：设置百分比可以使子元素跟随父元素的改变而改变
- em:相对于元素的字体大小来计算，1em=1font-size，em会根据字体大小的改变而改变，相对于根元素（html）的字体大小来计算
- 可以这样设置，从而改变根元素的字体大小：
html
{
Font-size:30px;
}
软件：
Vscode：输入.box就可以自动生成< div class=”box1”>< /div>
RGB、盒子模型、文档流
10.11
CSS：
- RGB（red,green,blue）每一种颜色的范围在0-255（0%-100%）之间
- RGBA 第四个值表示不透明度，0表示完全透明，1表示完全不透明，.5半透明
- 十六进制的RGB值：
- 语法：“#红色绿色蓝色
- 颜色浓度的范围：00-ff
- 如果颜色两位两位重复可以简写 #aabbcc-->#abc
- hsl值
- h色相（0-360）本质是在色环上的度数
- s饱和度，颜色的浓度0%-100%
- l亮度，颜色的亮度0%-100%（一般标准颜色是50%）
- 若加a，意思依然是透明度
- 文档流：是网页的基础，我们所创建的元素默认都是在文档流中进行排列。 元素主要有两个状态：在文档流中/不在文档流中
- 元素在文档流中的特点：
- 块元素：在页面中独占一行/默认宽度是父元素的全部（把一行占满）/默认高度被内容撑开（字有多大，就有多宽）
- 行内元素：只占自身的大小默认宽度和高度都是被内容撑开
- 盒子模型：
- 几个部分：内容区content、内边距padding边框border、外边距margin
- 内容区：大小由width和height两个属性来设置 边框：至少设置三个样式：
- 宽度border-width 颜色border-color 样式border-style
- 值的情况：
- 四个值：上 右 下 左（顺时针）
- 三个值：上 左右 下
- 两个值：上下 左右
- 一个值：上下左右
- 每一个属性都有一组border-(top/right/bottom/left)，用来单独指定某一个边的宽度
- 可以使用属性值none来让某一条边的边框失效 如：border:10px red solid; Border-right:none; 这样就只有右边没有边框
- 关于style的属性值：solid实线 dotted 点状虚线 dashed 虚线 double 双线
软件：
- Faststone capture 测量长宽，提取颜色的RGB值（直接复制十六进制的RGB值放入vscode）
- Vscode:
- css区，输入w200和h200，会自动生成width:200px;和 height:200px;
- 直接敲bd，发现快速生成边框三个样式的方法 border:10px solid #000;
10.13
CSS：
- 水平方向的布局：子元素属性必须满足 margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=其父元素内容区的宽度（必须满足）
- 如果相加结果使等式不成立， 则称为过渡约束，等式自动调整 如果这七个值没有为auto的情况，则浏览器会自动调整margin-right值以使等式满足
- 有三个值可以设置为auto（auto在冒号后面，是属性值）：width margin-left margin-right（如果不设置子元素的width，它的默认值就是aoto）
- 如果某个值设为auto，则会自动调整为auto的那个值以使等式成立 如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0.
- 如果将三个值都设置为auto，则外边距都是0，宽度最大。
- 如果将两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的值。
（经常利用这个特点来使一个元素在其父元素水平居中）
10.14
HTML：
- 关于行内元素span的理解： < span>aaa< /span>< span>bbb< /span> 这样显示的是aaabbb 如果在两个span之间加了空格或回车，显示会变成aaa bbb
CSS：
- 默认情况下父元素的高度被内容撑开。
- 子元素在父元素的内容区中排列，若大小超过父元素，会溢出。 使用overflow属性来设置父元素如何处理溢出的子元素。
（还分为overflow-x只处理水平方向，overflow-y只处理垂直方向）
- 可选值：
- visible（默认）：子元素溢出部分在父元素外部位置显示
- hidden：溢出内容将会被裁剪不会显示
- scroll：生成两个滚动条，通过滚动条来查看完整内容
- auto：根据需要生成滚动条（比如只生成垂直方向）
- 垂直外边距的重叠：相邻垂直方向外边距会发生重叠现象
- 兄弟元素：（对开发有利，不用调整）
- 都是正值-->兄弟元素间的相邻垂直外边距会取两者之间的较大值
- 一正一负-->取两者的和
- 都是负值-->取两者绝对值较大的
- 父子元素（需要调整） 方法：调整padding和height（以后有更好的方法）
- 兄弟元素：（对开发有利，不用调整）
- 行内元素（span，a）的盒模型：
- 行内元素不支持width和height
- 行内元素可以设置padding，border，magin，但垂直方向都不影响页面布局
- display用来设置元素显示的类型，可选值：
- inline 将元素设置为行内元素（默认）
- block 块元素 inline-block 行内块元素 table 表格 none不在页面显示（不占位置）
- visibility用来设置元素的显示状态，可选值：
- visible 元素在页面正常显示（默认）
- hidden 元素在页面中隐藏不显示，但是依然占据页面位置
10.15
CSS:
- 浏览器默认样式：只需要引入超哥给的reset.css和normalize.css中的一个。
reset是去除默认样式，normalize是统一样式。（用link引入，建议放在最前面）
10.16
没学
10.17
没学
10.18
- 完成练习：京东的左侧导航，解决：
- 如何使文字在每一行内垂直居中显示（lineheight和height相同）
hover和active在任何元素中都可使用，不仅限于超链接
- 巧妙的两步的字体大小设置（对li设置一次字号，对a再设置一次），可以使/的大小为12px，而字是14px
10.19~10.22 没学
10.23
- 京东图片列表，设置步骤（大的）：
- HTML
- 创建列表ul
- 在li中插入图片和超链接
- CSS
- 设置ul的宽高，裁剪溢出内容，设置margin使得居中。
- 对li，设置li的位置。
- 对img，设置图片大小。
注意点：
先设置ul的width和height，再设置margin
注意超链接伪类 not:(:last-child)
设置图片大小:100%
- 京东左侧导航条，设置步骤：
- HTML
- 创建一个nav，里面套很多div，div里套超链接和行内元素span
- CSS
- 设置nav的宽高，四周padding，居中margin，背景颜色
- 设置div，字体大小，左内边距，（高度和行高一致）
- 设置span，每一个/前后空2格
- 设置div的hover
- 设置超链接，去下划线，改颜色，设字体大小
- 设置超链接的hover
10.24
- 继续敲之前盒子模型的代码
10.25
- 网易新闻列表：
- HTML:
- 一个div当容器，左上角有小标题
- 一个div存放图片（超链接）和图片内的文字
- ul里的li存放四条新闻
- CSS:
- 去超链接的下划线
- 容器的宽高、margin、背景色、上边框
- 标题 高度 上边框 上外边距 上内边距
- 标题超链接的颜色 加粗
- 图片容器的高度
- 图片内文字的效果
- 新闻列表ul的上外边距
- li的下外边距
- 用before给每一个li加项目符号
- 设置li中的字体大小和颜色
- 超链接hover
10.26
CSS：
盒子大小和圆角
- 盒子大小：box-sizing
- 属性值：
- content-box:默认值，width和height只设置内容区的大小，加上margin padding border后盒子可见框变大。
- border-box:width和height设置盒子可见框的大小，加上margin、padding后，盒子可见框不变，但是内容区变小。
- outline设置元素轮廓线，和border类似，但不影响可见框大小（不影响页面布局）
- 可以设置hover，鼠标移动上去以后会加上轮廓
- box-shadow设置元素的阴影效果，不影响布局。四个属性值分别是：水平偏移量 垂直偏移量（正值为右、下，必须写）阴影模糊半径（使阴影看起来更真实）阴影颜色（使用rgba，调整透明度为0.5）
- border-radius:设置圆角
- 四个值：左上 右上 右下 左下
- 三个值：左上 右上/左下 右下
- 两个值：左上/右下 右上/左下
- 如果要设置椭圆形，一起设置的话，四个只能被设置成一个样式的，用“/”隔开：
- 例如：border-radius:20px/40px（水平方向半径/垂直方向半径） 也可以分开，每个角都定义成不同的椭圆形，如：border-top-left-radius:20px/40px
10.27
CSS：
浮动
- 浮动float（left/right）：使一个元素脱离文档流，向其父元素的左侧或右侧移动。（可用来制作水平布局）
- 特点：
- ①浮动元素不会从父元素中移出/浮动元素向左或向右移动时，不会超过它前面的其他浮动元素（看html中先后顺序）。
- ②如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移。
- ③浮动元素不会超过它上边浮动的兄弟元素，最多就是和它一样高。
- ④可以用浮动设置文字环绕图片的效果。
- ⑤元素设置浮动后，块元素和行内元素将不再区分。宽度和高度都默认被内容撑开。
- 简单布局：Tips:提取公共样式。
技巧：
- 在chrome浏览器中用“检查”调试padding值。
10.28：
CSS：
高度塌陷和BFC
- 高度塌陷问题：子元素浮动后，完全脱离文档流，无法撑起父元素高度，导致父元素的高度丢失。
- BFC(块级格式化环境)
- BFC开启后的特点：
- ①不会被浮动元素所覆盖
- ②子元素和父元素外边距不会重叠
- ③可以包含浮动的子元素（从而避免高度塌陷）
- 开启方法：
- ①设置float
- ②将元素设置为行内块元素
- ③设置overflow:hidden
10.29
CSS：
- clear:清除浮动元素对当前元素产生的影响（本质是浏览器自动为该元素添加上外边距）
- 可选值：left right both(清除两侧中最大影响的那侧)
- 解决高度塌陷的最终方案：伪元素after
.box1::after{ content: ''; display: block; clear: both; }
- 最终形态的clearfix
- clearfix 这个样式可以同时解决高度塌陷和外边距重叠的问题，当你在遇到这些问题时，直接使用clearfix这个类即可
.clearfix::before,
.clearfix::after{
content: '';
display: table;
clear: both;
}
- position:设置定位（只改变该元素的位置，不影响其它元素），
- 可选值：static(默认)，四种开启定位：relative absolute fixed sticky
- 相对定位relative:使用offset设置偏移量top、bottom/left、right（每组设置一个即可）
10.30
CSS:
定位
- 绝对定位：absolute
- 特点：
- ①元素从文档流中脱离
- ②此时元素只有位置不变（其它性质都变）绝对定位改变元素的性质，行内变成块，块的宽高被内容撑开。
- ③绝对定位使元素提升一个层级（浮在别的元素上方）
- ④相对于其包含块进行定位
- 包含块：正常情况下指离当前元素最近的祖先块元素/绝对定位的包含块指离它最近的，开启了定位的祖先元素。如果所有祖先元素都没开启定位，根元素html是它的包含块。
- 关于绝对定位元素的位置：
- 水平方向：在原先等式中加上left和right，现在left和right的默认值是auto，如果left=0，right=0，则rigjt=0不生效
- 垂直方向：原来没有垂直方向上的等式，现在有了，利用这一点可以使得元素在其包含块内垂直居中。
- 使用绝对定位使元素在包含块内居中的办法：
- ①开启某元素的绝对定位，top=0,bottom=0,left=0,right=0，margin=auto（如果是某一方向的居中，可以margin-left/right margin-top/bottom设为auto）
- ②开启它父元素（祖先元素）的定位（不是static就行，一般开relative）
- 固定定位：fixed，和绝对定位类似，但可以固定在浏览器的窗口中的某个位置（拖动滚动条也不改变位置）
- 粘滞定位：sticky（由于兼容性差，了解即可，以后实现这种效果用JS）可以先拖动滚动条，元素到达某个位置时将其固定。
- 元素的层级：对于已开启的顶标高为元素，可通过z-index属性指定元素的层级。它需要一个整数作为参数，值越大则层级越高，越优先显示。 如果元素的层级一样，优先显示靠下的元素/素馅元素的层级再高也不会盖住后代元素。
Vscode：
- 输入poa可以直接生成position：absolute
10.31
练习了京东轮播图。
HTML:
- 设置一个ul>li>a>img，存放图片。
- 在ul内部，放一个div，div里再嵌套8个div，作为图片左下角的点。
-
-
-
这样是可以的。
CSS:
- 对ul设置宽高，外边距（居中）开相对定位（目的是使ul中的pointer可以相对于ul定位而不是相对于初始包含块（html）去定位）
- 对li开启绝对定位（让图片重叠，只显示一张图片）
- li:nth-child( )设置z-index，修改元素的层级来显示指定的图片
- 对导航点整体，开启绝对定位，定位在左下角
- 对div中的a，设置float：left，并设置圆边框，大小，颜色等。
- hover设置鼠标移入，导航点的效果
- 此调整是为了在鼠标移入后，各导航点的中心仍在一条直线上，同时不改变各导航点的大小（总之就是美观，应该加上这两条语句）。对div中的a设置：
/* 将背景颜色值设置到内容区，边框和内边距不再有背景颜色 */
background-clip: content-box;
border: 2px solid transparent;
- 遇到的问题： 即便加了float:left,导航点仍然是垂直排列的，怎么才能变成水平排列？
11.1
CSS：
字体族
- font-family（字体族）:指定字体的类别，可选值：
- serif 衬线字体 （如“一”的最后带个小勾）
- sans-serif 非衬线字体（没有小勾）
- monospace 等宽字体（比如L和H占的宽度一致）
- （也可以写“微软雅黑”等，上边这些值一般放在最后，比如最后是serif，即“我实在没办法，找任意一种满足serif的字体”）
- 可以同时指定多个字体，用逗号隔开，优先使用第一个，以此类推 例：font-family:Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif
font-face可以将服务器中的字体直接提供给用户使用，但要注意加载速度、版权和字体格式。
例：
@font-face {
/* 指定字体的名字，下边在font-family要用一样的名字 */
font-family:'myfont' ;
/* 服务器中字体的路径 */
src: url('./font/ZCOOLKuaiLe-Regular.ttf') format("truetype");
}
- format指定字体的格式，默认情况下可以不写。
- 图标字体（为矢量图）：将图标设置为字体，可以更灵活，加快加载速度。
其它：
- 查看系统内的字体：C盘-->Windows-->Fonts 右上角搜索“微软”，出现微软雅黑
fontawesome 使用步骤:
- 下载 https://fontawesome.com/
- 解压
- 将css和webfonts移动到项目中
- 将all.css引入到网页中
- 使用图标字体
/*直接通过类名来使用图标字体*/
class="fas fa-bell"
class="fab fa-accessible-icon"
（免费使用的只有fab和fas，一种出现乱码就换另一种）
11.2
CSS:
图标字体
写图标字体的3种方法：
1.
↑免费的只有fas和fab
双引号内为图标的名称，后边可以设置图标大小和颜色
2.
通过伪元素来设置图标字体
- 找到要设置图标的元素通过before或after选中
- 在content中设置字体的编码
- 设置字体的样式
fab
font-family: 'Font Awesome 5 Brands';（所有fab都用这个名）
fas（需要加font-weight才能正常显示）
ont-family: 'Font Awesome 5 Free';（所有fas都用这个名）
ont-weight: 900;
例：
li::before{
content: '\f1b0';
/* font-family: 'Font Awesome 5 Brands'; */
font-family: 'Font Awesome 5 Free';
font-weight: 900;
color: blue;
margin-right: 10px;
}
（这种方法的好处是，多行之前可以同时添加符号字体）
3…
通过实体来使用图标字体：
+ 图标的编码;
- iconfont:
- 先进网站，点最上方图标库-->官方图标库，随便选一个，把图标加入购物车，点右上角购物车，创建一个项目，把刚才的购物车都放进项目里。进入My projucts界面（刚加购物车会自动跳转，其它时候打开时点最上面Resources-->My Projects），点download codes，将压缩包解压，删除其中两个demo文件，将其它文件全部放入项目文件夹内，在link处引入iconfont.css文件。
CSS区域：
在HTML区域写
↑实体方式
↑类名方式
xxx
↑伪元素方式
- 对于文字：行高（可设置）-->字体框-->字体
- 字体框：指字体存在的格子，设置字体大小，实际上是设置字体框大小。
- line-height行高： 指的是文字占有的实际高度。可以设置px/em，也可以设置为一个整数（意思是行高和字体框大小的比值）
- 行高会在字体框的上下平均分配，因此只要将div和line-height设置为同一个值，即可让单行文字在一个元素中垂直居中。
- 行间距=行高-字体大小
软件：
- 在Zeal上下载文档。
- 下载安装了Adobe Ps，Ae和Au。
11.3
CSS:
字体和文本
字体和文本：
- 简写：font：粗体、斜体 大小/行高 字体族 只有大小和字体族必须写，其它的不写均使用默认值。 例：font: bold italic 50px/2 微软雅黑, 'Times New Roman', Times, serif;
- font-weight:字体的加粗，除了normal和bold，还有100-900九个级别（没用）
- font-style:字体的风格，有normal和italic。
- text-align:文本的水平对齐。可选值：left、right、center、justify（两端对齐）
- vertical-align:元素的垂直对齐。可选值：baseline 基线对齐（默认），top顶部对齐，bottom底部对齐，middle居中对齐（对齐字母x的交叉点）
- text-decoration:设置文本修饰，可选值：none、underline、overline（上划线）、line-through（删除线）
- white-space:设置网页如何处理空白，可选值：normal、nowrap不换行、pre保留空白
- 如果想设置处“一行内容显示不全，最后出现省略号”的效果，可以：
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
背景
背景：
- background-image:设置背景图片，可以同时设置背景图片和背景颜色。
- background-repeat:设置背景的重复方式，可选值：repeat（默认，沿着x和y重复）、repeat-x、repeat-y、no-repeat。
- background-position:设置背景图片的位置。两种方式：
- 可以写background-position:top left、center center、bottom right等，分成九宫格。
- 也可以同偏移量来指定，background-position:水平方向偏移量 垂直方向xxx
- background-clip:设置背景的范围，可选值:border-box(默认，背景出现在边框的下边)、padding-box(背景只出现在内容区和内边距)、content-box（背景只出现在内容区）
- background-origin:背景图片和偏移量计算的原点，可选值:padding-box(background-position从内边距处开始计算)，其它属性值和clip一样，效果同理。
- background-size:设置背景图片的大小，两个值依次为宽度和高度，如果只写一个，第二个值默认auto。属性值还有cover(图片比例不变，铺满)、contain（图片比例不变，将图片在元素中完整显示）
- background-attachment:选择背景图片是否跟随元素移动。可选值:scroll（默认，背景图片跟随元素移动）fixed（背景固定在页面中）
- 简写属性：background
- 注意:background-size必须写在~position后面，用/隔开。~origin要在~clip的前边。
11.9
CSS：
渐变
-
实现渐变：
-
选中一张渐变的图片，在PS中使用裁剪，裁出横向长度为1px的图片条，将图片条设为背景，并且设置“repeat-x”。
一些PS的操作：
- 测量图片大小：矩形选框工具。如果数字消失了，按F8.
- 裁剪：（最上方）图像→裁剪。
- 导出：文件→导出→存储为web格式。
- 历史记录：在PS右上角，点击历史记录，可以在裁剪后恢复之前的状态。
-
雪碧图
-
雪碧图
-
起因是按钮练习：如果给link、hover、active各设置一张背景，就会出现由于图片加载速度慢而产生图片闪烁的情况。
浏览器的一些操作：
- ctrl+F5 刷新，强制清除缓存。
- F12打开开发者工具，选择All，如果刷新一般会有进程减少。
-
解决方法：可以将多个小图片统一保存到一个大图片中，通过调整background-position来显示图片，这样图片可以同时加载到网页中，避免闪烁。
-
该技术被称为CSS-Sprite。
-
使用步骤：
- 确定要使用的图标。
- 测量图标的大小。
- 根据测量结果创建一个元素。
- 将雪碧图设置为元素的背景图片。
- 设置一个偏移量以显示正确的图片。
-
雪碧图的特点：一次性将多个图片加载进页面，降低请求的次数，加快访问速度。
11.10
-
HTML：
表格
-
表格：table、thead（内容自动加在表头）、tbody、tfoot（内容自动加在表末）、tr（一行）、td（单元格）
如果没加tbody，浏览器会自动加上，因此tr不是table的子元素，而是后代元素。
-
colspan横向合并单元格，比如：
<td colspan="2">D2td>rowspan纵向合并单元格，同理。
-
表格的样式：
- border-spacing: 指定边框间距离。
- border-collapse:collapse; 设置边框的合并。
- 设置排列方式：text-align:center 、vertical-align:middle(值可以修改)
-
将元素设置为单元格：display:table-cell;
- 可以用vertical-align设置在父元素内垂直居中。
- 但是text-align无效，还得用margin设置水平居中。
CSS：
-
线性渐变：
-
格式：background-image:linear-gradient(方向，颜色，颜色 大小，颜色 大小)
-
方向：
- to left/right/bottom/top
- 还可以组合（to top left）
- deg表示度数，turn表示圈（如.25turn表示1/4圈）
-
平铺的线性渐变：background-image:repeating-linear-gradient(方向，颜色 大小，颜色 大小)
注意，此时只关注两个大小的差值，0 50px和50px 100px是等效的。
-
-
径向渐变：
-
格式：~:radial-gradient(大小 at 位置 ,颜色 位置,颜色 位置)
-
大小：
- circle 圆形
- ellipse 椭圆
- closest-side 近边
- closest-corner 近角
- farthest-side 远边
- farthest-corner 远角
- 可以手动指定径向渐变的大小
-
位置：
- top right left center bottom
- 写具体的数值（px）
-
（设置渐变后，即使设置background-repeat:no repeat也不起作用）
11 . 11
没学
11. 12
表单
- 表单：用于提交数据给远程的服务器，用form标签创建。
- 属性：
- action属性加服务器地址。
- name：数据要提交到服务器，必须指定name属性值。对于单选框和多选框，必须有相同的name值。
- （如果文本框的name=username，这个文本框内容的名字即为username，根据username，服务器就可以获得数据。）
- value：会作为用户填写（选择）的值，体现在网址里。
- checked：（选项的默认值）
- type：表单项的类型。每一行都加type。
- 不同的type：（属性值）
- 文本框：text
- 密码框：password
- 单选按钮：radio
- 多选框：checkbox
- 下拉列表：（selected value表示默认选项）
<select name="haha">
<option value="i">选项一option>
<option selected value="ii">选项二option>
- 表单拓展：
- input和button：两者类似，input是自结束标签，所以button的使用更多。
- 属性补充：
- autocomplete=“off”，关闭自动补全（如果加在form后面，所有表单项都会关闭自动补全）
- readonly ：将表单项设置为只读，数据可以提交。（判断有没有提交的方法是，点了按钮后看网址有没有变）
- disabled：将表单项设置为禁用，数据不会提交。
- autofocus：自动获取焦点，意思是一开始光标会出现在哪一个表单项里。
- type属性补充：
- submit：提交按钮
- reset：重置按钮
- button：普通按钮，需要用js加上效果。
11.13&11.14
复习京东顶部导航练习。
11.16&11.17
电影卡片练习
CSS：
过渡
- 过渡：（transition）
- transition-property：指定要执行过渡的属性，多个属性间用,隔开。all设置所有属性过渡。（大多数属性都支持过渡，过渡时必须从一个有效数值向另一个有效数值）
- transition-duration：指定过渡的持续时间（时间单位有s和ms），如果上方的属性用,隔开，duration也可以用,隔开，表示不同属性的持续时间。
- transition-timing-function：过渡的时序函数。
可选值：- ease：默认，先加速后减速（比较明显）
- linear：匀速
- ease-in：加速
- ease-out：减速
- ease-in-out：先加速后减速（不太明显）
- cubic-bezier()：贝塞尔曲线 指定时序函数
https://cubic-bezier.com - steps() 分步执行过渡效果
- 可以设置第二个值：end：在时间结束时执行过渡（默认） start：在时间开始时执行过渡。
- transistion-delay：延迟，等待一段时间后再执行过渡。
- transition 同时设置过渡相关的所有属性，唯一要求是如果要写延迟，则第一个时间是持续时间，第二个是延迟。
11.18
动画
- 动画：（animation）
-
关键帧：
- 格式示例：
@keyframes 关键帧名{ from表示动画开始的位置 可以用0%{ /*from表示动画*/ margin-left:0; background-color:orange; } /*to动画的结束位置 可以用100%*/ to{ background-color:red; margin-left:700px; } } -
animation-name:设置关键帧名
-
animation-duration：动画的执行时间
-
animation-delay：动画的延时
-
animation-timing-function：和过渡一样
-
animation-iteration-count：动画执行的次数（可以写次数，也可以写infinite）
-
animation-direction：指定运行方向，可选值：
- normal：默认，从from向to运行，每次都如此
- reverse：从to向from运行，每次都如此
- alternate：从from向to运行，重复执行动画时反向执行
- alternate-reverse：同理
-
animation-play-state：设置动画执行状态（running/paused）
（可以用paused设置鼠标移入则动画暂停的效果） -
animation-fill-mode：动画的填充模式，可选值：
- none：默认 动画执行完毕元素回到原来位置
- forwards 动画执行完毕元素会停止在动画结束的位置
- backwards 动画延时等待（delay）时，元素就会处于开始位置
- both 结合了forwards 和 backwards
-
11.19
CSS：
变形
变形：通过CSS改变元素的形状或位置，不影响页面布局。
transform设置元素的变形效果。
设置变形原点：transform-origin:值 值（水平和和垂直） （默认值为center）
以下为属性值：
- 平移：
- translateX() 沿着x轴方向平移
- translateY() 沿着y轴方向平移
- translateZ() 沿着z轴方向平移
（平移元素，百分比相对于自身计算）
示例：
transform:translateY(100px); transform:translateX(-50%);- z轴平移： 调整元素和人眼之间的距离，距离越大，元素离人越近。
想要让z轴平移的效果体现出来，必须设置网页视距。
如果想要做3D效果，必须加视距perspective。
html{ perspective:800px /*设置当前网页的视距为800px，指人眼距离网页的距离，该距离在600~1200为宜*/ body:hover .box{ transform:translateZ(800px); /*此时就相当于box“贴脸上了”，会占满整个浏览器的页面*/ } } - 旋转：通过旋转可以使元素沿着x、y或z旋转指定的角度：
- rotateX()、rotateY()、rotateZ()
- 括号内的值可以是角度（deg），也可以是圈数（turn）
- transform后可以跟多个旋转的属性，不同属性的先后顺序会对效果产生影响。
transform: rotateY(180deg) translateZ(400px); transform: translateZ(400px) rotateY(180deg) ; /*二者的显示效果不一样，前者离我们变远，后者离我们变近*/- backface-visibility可以调整是否显示元素的背面，属性值有visible和hidden。
- 缩放：
- scaleX()水平缩放 scaleY()垂直缩放 scale() 双向缩放
- scaleZ 较特殊，只有设置了transform-style:preserved-3d（3d变形效果）才能体现，会拉长z轴（垂直显示屏的轴），想象“腊肠狗”。
11.20
CSS：
less
（CSS熟练后再考虑less）
- less简介：是CSS增强版，可通过更少代码实现更强大的功能；新增了对变量和对mixin的支持；语法大体上和css一致，浏览器需要先将less转换为css再执行。
- 在Vscode上安装插件Easy-less。之后写less，保存时会自动生成css文件。
- less书写的格式：
.box1{
background-color: #bfa;
.box2{
background-color: #ff0;
.box4{
color: red;
}
}
.box3{
background-color: orange;
}
}
其编译为css代码如下：
.box1 {
background-color: #bfa;
}
.box1 .box2 {
background-color: #ff0;
}
.box1 .box2 .box4 {
color: red;
}
.box1 .box3 {
background-color: orange;
}
-
变量（和C的#define类似）
- 用@变量名 定义变量。
- 直接使用：以@变量名 的形式使用。
- 作为类名，或者一部分值使用时以@{变量名}的形式使用。（url里必须加引号）
@c:box6; .@{c}{ width: @a; background-image: url("@{c}/1.png"); } -
变量重名时，优先使用比较近的变量。
-
可以在变量声明前使用变量。
-
建议将变量集中定义。
继续补充：
- 关于注释：//是不会被编译的注释（单行），/**/是会被编译的注释（多行）。
- &表示外层的父元素。
.box1{
.box2{
color: red;
}
>.box3{
color: red;
//为box3设置一个hover
&:hover{
color: blue;
}
}
//为box1设置一个hover
//& 就表示外层的父元素
&:hover{
color: orange;
}
//此处对应div .box1
div &{
width: 100px;
}
}
对应的CSS是：
.box1 .box2 {
color: red;
}
.box1 > .box3 {
color: red;
}
.box1 > .box3:hover {
color: blue;
}
.box1:hover {
color: orange;
}
div .box1 {
width: 100px;
}
- :extend() 对当前选择器扩展指定选择器的样式（选择器分组）
这个方法比下边的方法的代码要简洁。
.p1{
width: 100px;
height: 200px;
}
.p2:extend(.p1){
color: red;
}
/*相当于p2在p1的基础上“拓展”*/
css代码如下：
.p1,
.p2 {
width: 100px;
height: 200px;
}
.p2 {
color: red;
}
- 直接对样式的引用（样式的复制）
这种方式也称为mixin，混合函数。
.p1{
width: 100px;
height: 200px;
}
.p3{
/*直接对指定的样式进行引用，这里就相当于将p1的样式在这里进行了复制*/
.p1;/*也可以写成p1()，即不含参数的混合函数*/
color:red;
}
css代码如下：
.p1{
width: 100px;
height: 200px;
}
.p1{
width: 100px;
height: 200px;
color:red;
}
- 混合函数
//混合函数 在混合函数中可以直接设置变量
.test(@w:100px,@h:200px,@bg-color:red){
width: @w;
height: @h;
border: 1px solid @bg-color;
}
div{
/*调用混合函数，按顺序传递参数*/
/*.test(200px,300px,#bfa);*/
.test(300px);
/* .test(300px, 100px, red);*/
/*
传值必须要按顺序，如果不按顺序，也可以这样写：
.test(@bg-color:red, @h:100px, @w:300px)
*/
}
* average：颜色取平均值
span{
color: average(red,blue);
}
* darken：颜色加深
body:hover{
background-color: darken(#bfa,50%);
}
- less中可以做加减乘除的运算。
- 可以引入其它的less文件，以达到模块化的效果。
//import用来将其他的less引入到当前的less
//可以通过import来将其他的less引入到当前的less中
@import "syntax2.less";
.box1{
// 在less中所有的数值都可以直接进行运算
// + - * /
width: 100px + 100px;
height: 100px/2;
background-color: #bfa;
}
- 配置vscode插件，从此ctrl+s保存less的时候会生成对应.css.map，在浏览器使用“检查”功能时可以看对应在less代码中的行数（而不是css）。
（第130集有配置vscode插件的方法）
弹性盒子
弹性盒子，即可以伸缩的盒子。
弹性盒子由两部分组成：外层叫弹性容器，它的子元素（只是子元素，不是后代）是弹性元素。
弹性盒子可以嵌套，一个元素，可以同时是弹性容器和弹性元素。
- 主轴：弹性元素的排列方向称为主轴。
- 侧轴：与主轴垂直方向的称为侧轴。
- 设置弹性盒子的方法：开启了display:flex（块级弹性容器）或inline-flex（行内块弹性容器）的便是弹性容器，子元素为弹性元素。
- 弹性容器的属性：
- flex-direction 指定容器中弹性元素的排列方式
可选值：
row 默认值，弹性元素在容器中水平排列（左向右）
- 主轴 自左向右
row-reverse 弹性元素在容器中反向水平排列（右向左）
- 主轴 自右向左
column 弹性元素纵向排列（自上向下）
column-reverse 弹性元素方向纵向排列（自下向上）
- flex-direction 指定容器中弹性元素的排列方式
- 弹性元素的属性：
- flex-grow 指定弹性元素的伸展的系数
规定当父元素有多余空间的时，子元素如何伸展。
父元素的剩余空间，会按照比例进行分配。 - flex-shrink 指定弹性元素的收缩系数
规定当父元素中的空间不足以容纳所有的子元素时，如何对子元素进行收缩。
设置为0则不收缩。 - flex-basis 指定元素在主轴上的基础长度，如果主轴是横向，则指定元素宽度；否则指定元素高度。默认值是auto，表示参考元素自身的高度或宽度；如果传递了具体的数值，则以该值为准。
- flex 可以设置弹性元素的以上三个样式：（有顺序）
flex 增长 缩减 基础（也可以用下面三个值）
initial “flex: 0 1 auto”.
auto “flex: 1 1 auto”
none “flex: 0 0 auto” 弹性元素没有弹性
- flex-grow 指定弹性元素的伸展的系数
属性常用nth-child()来设置：
li:nth-child(1){
background-color:#bfa;
flex-grow: 0;
flex-shrink: 1;
}
li:nth-child(2){
background-color: pink;
/* flex-grow: 2; */
flex-shrink: 2;
}
li:nth-child(3){
background-color: orange;
/* flex-grow: 3; */
flex-shrink: 3;
}
-
弹性容器上的样式
- flex-wrap：设置弹性元素是否在弹性容器中自动换行
可选值：nowrap：默认，不换行
wrap：元素沿着侧轴方向自动换行
wrap-reverse：元素沿着侧轴反方向换行 - flex-flow：是wrap和direction的简写属性
例： flex-flow: row wrap;
-
justify-content：决定如何分配主轴上的空白空间（或主轴上的元素如何排列）
可选值：flex-start：默认值 元素沿主轴起边排列
flex-end：元素沿主轴终边排列
center：元素居中排列
space-around：空白分布到元素两侧（中间空白是边缘处空白的两倍）
space-evenly：空白分布到元素单侧（每个空白大小一样）
space-between：空白均匀分布到元素间 （左右两侧没有） -
align-items：决定元素在侧轴上如何对齐（元素间的关系）
可选值：stretch：默认值 将元素的长度设置为相同的值
flex-start：元素不拉伸，沿侧轴起边对齐
flex-end：沿侧轴的终边对齐
center：居中对齐
baseline：基线对齐 -
align-self：对单个元素使用，用来覆盖当前弹性元素上的align-items，属性值和上面相同。
例如：
li:nth-child(1){
align-self:stretch;
}
- flex-wrap：设置弹性元素是否在弹性容器中自动换行
像素和移动端
- 像素分为：物理像素 和 CSS像素，二者默认情况下大小比例为1：1。
- 在移动端中，默认情况下移动端像素比为980/移动端宽度。
- 将网页的视口设置为完美视口：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
“viewport”意思为视口，width=device-width意思为CSS像素和物理像素的比值会根据设备宽度进行适配（一般1个css像素对应2或3个物理像素）←（一维，不是面积）
最后一句话意思是默认倍数为1（确保能够正常显示），写移动端页面时一定要加上这句话。
11.22
- 在移动端内，不用px不布局，而是使用vw。1vw=%1视口宽度。
- 设计图宽度：由于1个css像素对应2或3个物理像素，为了避免图片放大失真，参照iphone6的完美视口375，设计图的宽度一般为750或1125。
- vw的适配：借助rem，推荐以下方式：
html{
font-size: 26.667vw;
/*
此时1个rem代表200物理像素的大小，由于1个css像素对应2个物理像素，所以显示效果1rem=100css像素的大小。
*/
}
.box{
width: 3.75rem;
height: 3.75rem;
background-color: #bfa;
}
到这里，H5和CSS3的新知识告一段落，开始做练习，进而学习JS。
2.3回来补充，响应式和媒体查询：
响应式布局
响应式布局：
- 网页可以根据不同的设备或窗口大小呈现出不同的效果
- 使用响应式布局，可以使一个网页适用于所有设备
- 响应布局的关键就是 媒体查询
- 通过媒体查询，可以为不同的设备，或设备不同状态来分别设置样式
媒体查询：
- 语法： @media 查询规则{}
- 媒体类型：
all 所有设备
print 打印设备
screen 带屏幕的设备
speech 屏幕阅读器 - 可以使用,连接多个媒体类型，这样它们之间就是一个或的关系
可以在媒体类型前添加一个only，表示只有，添加and，表示与。
only的使用主要是为了兼容一些老版本浏览器，没有其他作用。因为老版本浏览器不认识only，就不会执行后边的代码，如果不加only，它能够识别，但也许不能正常显示。 - 媒体特性：
width 视口的宽度
height 视口的高度
min-width 视口的最小宽度（视口大于指定宽度时生效）
max-width 视口的最大宽度（视口小于指定宽度时生效）
样式切换的分界点，称其为断点，也就是网页的样式会在这个点时发生变化
一般比较常用的断点:
- 小于768 超小屏幕 max-width=768px
- 大于768 小屏幕 min-width=768px
- 大于992 中型屏幕 min-width=992px
- 大于1200 大屏幕 min-width=1200px
媒体查询演示：
<style>
@media only screen and (min-width: 500px) and (max-width:700px){
body{
background-color: #bfa;
}
}
style>
前端之路漫漫…