尚硅谷web前端HTML5+CSS3笔记

1尚硅谷-课程简介

2尚硅谷-网页简史

3尚硅谷-HTML简史

4尚硅谷-编写你的第一个网页

5尚硅谷-安装notepad++

6尚硅谷-自结束标签和注释

7尚硅谷-标签中的属性

8尚硅谷-文档声明

9尚硅谷-关于进制

10尚硅谷-字符编码

11尚硅谷-文档的使用

12尚硅谷-VScode的安装

13尚硅谷-配置liveServer

14尚硅谷-实体

15尚硅谷-meta标签

16尚硅谷-语义化标签

17尚硅谷-块与行内

18尚硅谷-语义化标签（2）

19尚硅谷-列表

20尚硅谷-超链接简介

21尚硅谷-相对路径

22尚硅谷-超链接的其他用法

23尚硅谷-图片标签

24尚硅谷-图片的格式

25尚硅谷-内联框架

26尚硅谷-音视频播放

27尚硅谷-CSS简介

28尚硅谷-css编写的位置

29尚硅谷-css的基本语法

30尚硅谷-常用选择器

31尚硅谷-复合选择器

32尚硅谷-关系选择器

33尚硅谷-属性选择器

34尚硅谷-伪类选择器

35尚硅谷-超链接的伪类

36尚硅谷-伪元素

37尚硅谷-餐厅练习介绍

38尚硅谷-继承

39尚硅谷-选择器的权重

40尚硅谷-像素和百分比

41尚硅谷-em和rem

42尚硅谷-RGB值

43尚硅谷-HSL值

44尚硅谷-文档流

45尚硅谷-盒子模型

46尚硅谷-盒子模型-边框

47尚硅谷-盒子模型-内边距

48尚硅谷-盒子模型-外边距

49尚硅谷-盒子模型-水平方向布局

50尚硅谷-盒子模型-垂直方向布局

51尚硅谷-盒子模型-外边距的折叠

52尚硅谷-行内元素的盒模型

53尚硅谷-浏览器的默认样式

54尚硅谷-布置练习

55尚硅谷-京东图片列表

56尚硅谷-京东左侧导航栏

57尚硅谷-网易新闻列表

58尚硅谷-盒子的大小

59尚硅谷-轮廓阴影和圆角

60尚硅谷-浮动的简介

61尚硅谷-浮动的特点

62尚硅谷-导航条练习

63尚硅谷-简单的布局

64尚硅谷-高度塌陷和BFC

65尚硅谷-BFC的演示

66尚硅谷-clear

67尚硅谷-使用after伪类解决高度塌陷

68尚硅谷-clearfix

69尚硅谷-相对定位

70尚硅谷-绝对定位

71尚硅谷-固定定位

72尚硅谷-粘滞定位

73尚硅谷-绝对定位元素的位置

74尚硅谷-元素的层级

75尚硅谷-京东轮播图练习

76尚硅谷-字体族

77尚硅谷-图标字体简介

78尚硅谷-图标字体的其他使用方式

79尚硅谷-iconfont

80尚硅谷-行高

81尚硅谷-字体的简写属性

82尚硅谷-文本的水平和垂直对齐

83尚硅谷-其他的文本样式

84尚硅谷-京东顶部导航条-结构

85尚硅谷-京东顶部导航条-基本样式

86尚硅谷-京东顶部导航条-下拉框

87尚硅谷_PS的安装——笔记

88尚硅谷_背景(一)

89尚硅谷_背景(二)

92尚硅谷-雪碧图

93尚硅谷-线性渐变

94尚硅谷-径向渐变

95尚硅谷-电影卡片练习

96尚硅谷-表格的简介

97尚硅谷-长表格

98尚硅谷-表格的样式

99尚硅谷-表单简介

100尚硅谷-表单补充

101尚硅谷-项目搭建

115尚硅谷-过渡

117尚硅谷-动画

119尚硅谷-关键帧

120尚硅谷-变形平移

121尚硅谷-Z轴平移

122尚硅谷-旋转

123尚硅谷-鸭子表

124尚硅谷-复仇者联盟

125尚硅谷-缩放

126尚硅谷-less简介

127尚硅谷-less中的变量

128尚硅谷-父元素和扩展

编辑 129尚硅谷-混合函数

130尚硅谷-less的补充

编辑131尚硅谷-弹性盒简介（flex）

132尚硅谷-会弹的导航条 133尚硅谷-弹性容器上的样式

134尚硅谷-弹性元素上的样式

135尚硅谷-淘宝导航

136尚硅谷-聊聊像素

137尚硅谷-手机像素

138尚硅谷-完美视口

139尚硅谷-vw单位

140尚硅谷-vw适配

141尚硅谷-移动端页面上部分

142尚硅谷-完成移动端页面

143尚硅谷-媒体查询简介（media）

144尚硅谷-媒体查询简介

145尚硅谷-美图手机导航结构

146尚硅谷-美图手机左侧图标

147尚硅谷-美图手机左侧下拉菜单

148尚硅谷-美图手机完成

1尚硅谷-课程简介

2尚硅谷-网页简史

3尚硅谷-HTML简史

4尚硅谷-编写你的第一个网页

5尚硅谷-安装notepad++

6尚硅谷-自结束标签和注释

7尚硅谷-标签中的属性

8尚硅谷-文档声明

9尚硅谷-关于进制

10尚硅谷-字符编码

11尚硅谷-文档的使用

12尚硅谷-VScode的安装

直接搜索官网下载安装，不勾选倒数第二个

13尚硅谷-配置liveServer

14尚硅谷-实体

15尚硅谷-meta标签

16尚硅谷-语义化标签

17尚硅谷-块与行内

18尚硅谷-语义化标签（2）

19尚硅谷-列表

20尚硅谷-超链接简介

21尚硅谷-相对路径

22尚硅谷-超链接的其他用法

23尚硅谷-图片标签

24尚硅谷-图片的格式

25尚硅谷-内联框架

26尚硅谷-音视频播放

27尚硅谷-CSS简介

28尚硅谷-css编写的位置

29尚硅谷-css的基本语法

30尚硅谷-常用选择器

31尚硅谷-复合选择器

32尚硅谷-关系选择器

33尚硅谷-属性选择器

34尚硅谷-伪类选择器

35尚硅谷-超链接的伪类

36尚硅谷-伪元素

37尚硅谷-餐厅练习介绍

38尚硅谷-继承

39尚硅谷-选择器的权重

40尚硅谷-像素和百分比

41尚硅谷-em和rem

42尚硅谷-RGB值

43尚硅谷-HSL值

44尚硅谷-文档流

45尚硅谷-盒子模型

46尚硅谷-盒子模型-边框

47尚硅谷-盒子模型-内边距

48尚硅谷-盒子模型-外边距

49尚硅谷-盒子模型-水平方向布局

50尚硅谷-盒子模型-垂直方向布局

51尚硅谷-盒子模型-外边距的折叠

52尚硅谷-行内元素的盒模型

53尚硅谷-浏览器的默认样式

54尚硅谷-布置练习

55尚硅谷-京东图片列表

56尚硅谷-京东左侧导航栏

57尚硅谷-网易新闻列表

58尚硅谷-盒子的大小

59尚硅谷-轮廓阴影和圆角

60尚硅谷-浮动的简介

61尚硅谷-浮动的特点

62尚硅谷-导航条练习

63尚硅谷-简单的布局

64尚硅谷-高度塌陷和BFC

65尚硅谷-BFC的演示

66尚硅谷-clear

67尚硅谷-使用after伪类解决高度塌陷

68尚硅谷-clearfix

69尚硅谷-相对定位

relative 相对定位（相对于自己原来的位置定位），不脱离文档流；

absolute 绝对定位（相对于包含块来定位），脱离文档流，

70尚硅谷-绝对定位

71尚硅谷-固定定位

72尚硅谷-粘滞定位

73尚硅谷-绝对定位元素的位置

74尚硅谷-元素的层级

75尚硅谷-京东轮播图练习

76尚硅谷-字体族

77尚硅谷-图标字体简介

再网页中常用到图标，但是图片操作不方便，引入图标字体，可以将图标设置为字体，通过font-face的形式来对字体进行引入，这样就可以通过使用字体形式来使用图标。

font awesome使用方法：

1.下载 Font Awesome 解压

2.将css和webfonts移动到项目中

3.将all.css引入到网页中

4.使用图标字体

-直接通过类名来使用图标字体class=“fas fa-bell” / class=“fab fa-accessible-icon”

图标一般用<i class=“fas fa-bell” ></i>,之前表示斜体，现在表示图标。

78尚硅谷-图标字体的其他使用方式

79尚硅谷-iconfont

80尚硅谷-行高

81尚硅谷-字体的简写属性

82尚硅谷-文本的水平和垂直对齐

83尚硅谷-其他的文本样式

84尚硅谷-京东顶部导航条-结构

85尚硅谷-京东顶部导航条-基本样式

86尚硅谷-京东顶部导航条-下拉框

87尚硅谷_PS的安装——笔记

Ctrl+R显示/隐藏标尺

设置单位为像素方便后续操作

88尚硅谷_背景(一)

background-color 设置背景颜色

background-color：#bfa;

background-image 设置背景图片

background-img：url(./img/1.png);

background-img：url("./img/1.png"); 加一个双引号，避免路径含有特殊字符导致图片不能显示。

可以同时设置背景颜色和背景图片，这样背景颜色会成为图片背景色。

如果背景图片小于元素，图片会自动在元素平铺将元素铺满，

如果背景图片大于元素，图片会有部分背景无法完全显示，

如果背景图片等于元素，图片会正常显示。

background-repeat 设置背景的重复方式

可选值：repeat 默认值沿着x，y轴重复

repeat-x x轴重复

repeat-y y轴重复

no-repeat 背景图片不重复

background-position 设置背景图片的位置

设置方式：通过top left right bottom center 几个表示方位的词来设置背景的位置

background-position：top left ; 在左上角，

background-position：left center ; 在左边中间，第二个值不写，默认center。

通过偏移量来设置背景图片位置：

background-position：10px -10px；水平偏移量和垂直偏移量

89尚硅谷_背景(二)

设置背景的范围

background-clip

可选值：

border-box 默认值，背景会出现在边框的下边

padding-box 背景不会出现在边框，只出现在内容区和内边距

content-box 背景只会出现在内容区

background-orgin 背景图片的偏移量计算原点

padding-box 默认值，background-position从内边距处开始计算

content-box 背景图片的偏移量从内容区开始计算

border-box 背景图片偏移量从边框处开始计算

background-size 设置背景图片的大小

background-size: 100px auto;

第一个值表示宽度

第二个值表示高度

如果只写一个，则第二个值默认是auto,

background-size: cover;

cover 图片的比例不变，将元素铺满

content 图片比例不变，将图片在元素中完整显示

background-attachment 背景图片是否跟随元素移动

可选值：scroll 默认值，背景图片会跟随元素移动

fixed 背景图片会固定在页面中，不会随元素移动

backgroud 背景相关简写属性，所有背景相关的样式都可以通过该样式设置，并且没有顺序要求，也没有那个属性必须写

注意：background-size必须写在background-position后面(center center/contain)，background-orgin写在前面background-clip写在后面(border-box content-box)。

92尚硅谷-雪碧图

解决图片闪烁问题，可以将多个小图片统一保存到一个大图片中，然后通过调整background-position来显示图片，可以有效的避免出现闪烁问题（闪烁问题：网页中的图片属于外部资源，用的时候才加载，按需加载，有时候网络慢可能出现没加载出来，显示空白闪烁）。这个技术在网页中应用广泛，被称为css-sprite，这种图我们称为雪碧图。

雪碧图使用步骤：

1.先确定要使用图标

2.测量图标大小，根据测量结果创建一个元素

3.将雪碧图设置为元素的背景图片，设置一个偏移量以显示正确的图片

雪碧图特点：

一次性将多个图片加载进页面，降低请求次数，加快访问速度，提升用户体验。

93尚硅谷-线性渐变

通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果，渐变是图片，需要通过background-image来设置

线性渐变，颜色沿着一条直线发生变化

background-image: liner-gradient（）

liner-gradient（red，yellow）红色开头，黄色在结尾，中间是过渡区域

-线性渐变开头我们可以指定一个渐变方向：

to right ; to left ; to bottom ; to top ; deg(表示度数) ; turn(表示圈) ;

liner-gradient（45deg，red，yellow）/ liner-gradient（2turn，red，yellow）

渐变可以同时指定多个颜色，多个颜色默认平均分配，也可以手动指定渐变分布情况，

liner-gradient（red 50px，yellow 100px）

repeating-liner-gradient（）可以平铺线性渐变

background-image：repeating-liner-gradient（red 50px，yellow 100px）；没有填满元素会自动重复平铺填充。

94尚硅谷-径向渐变

background-image：radial-gradient（red，yellow）

radial-gradient（red，yellow）径向渐变（放射性的效果）

默认情况下径向渐变的形状根据原色的形状来计算的：

正方形--》圆形

长方形--》椭圆形

也可以手动指定径向渐变范围的大小

background-image：radial-gradient（100px 100px red，yellow）

circle圆/elipse椭圆

指定渐变位置：

语法：radial-gradient（大小 at 位置，颜色位置，颜色位置，颜色位置）

大小： circle 圆/elipse 椭圆

closest-side 近边/farthest-side 远边

closest-corner 近角/farthest-corner 远角

位置：top right left center bottom

at 0 0 圆心在左上角

at 100px 100px 圆心在这个位置100px 100px

at center center 圆心在元素中心

at top left 圆心在左上角

background-image：radial-gradient（100px 100px at center center，red，yellow）

95尚硅谷-电影卡片练习

先写结构再

写样式

96尚硅谷-表格的简介

<tr>

</tr>

</table>

在table中使用tr表示表格中的一行，有几个tr就有几行。在tr中使用td表示一个单元格，有几个td就有几单元格。rolspan 纵向的合并单元格，colspan 横向的合并单元格。

97尚硅谷-长表格

<table>

</table>

可以将表格分成三部分，头部thead，身体tbody，底部tfoot，th表示头部单元格

98尚硅谷-表格的样式

table是块元素，宽度被内容撑开，外部边框设置table，border，内部边框td，border，border-spacing：2px指定边框的距离。border-collapse：collapse；设置边框的合并。

如果表格中没有使用tbody而是直接使用tr，那么浏览器会自动创建一个tbody，并将他人全部放到tbody中，tr不是table的子元素。

默认情况下元素在td中是垂直居中的，可以通过vertical-align（在其他元素中只影响文字内容，在td中什么都能影响（td的子元素））来修改，值：top，bottom...，

99尚硅谷-表单简介

表单用于提交数据，网页中的表单用于将本地的书籍提交给远程的服务器，使用form标签来创建表单。

form的属性

action表单要提交的服务器的地址

注意：数据要提交到服务器中，必须要为元素指定一个name属性值

单选按钮，里面的name属性值一样，只能选择一个，这种选择框必须要指定一个value属性，value属性最终会作为用户填写的值传递给服务器，checked可以将单选按钮设置为默认选中。

下拉列表设置默认值selected。

100尚硅谷-表单补充

<input type="button" value="按钮"> 普通的按钮 <button type="button"></button>

button是成对标签，input是自结束标签，button能写更复杂的结构，

autocomplete=“off” 关闭自动补全；

readonly 将表单项设置为只读，数据会提交；

disable 将表单项设置为禁用，数据不会提交；

autofocus 设置表单项自动获取焦点；

101尚硅谷-项目搭建

min-width指定最小宽度，缩放就不会继续缩小；

纯css生成三角形

html：<div></div>

style：width:0;

height 0

border：20px red solid;

border-top:none;

border-color: transparent transparent blue transparent;/*transparent设置颜色透明*/

隐藏：1、display:none;

2、height:0;

overflow:hidden;/* transition用于设置样式过渡效果*/

transition: height 3s;

隐藏文字：css：text-indent：-9999px；

做鼠标移入logo切换效果，用两个logo并排，鼠标移入切换位置，先隐藏一个，用到transition，

隐藏一个元素，display：none；这样是直接不在也不占据位置，用visibility：hidden；这样隐藏会占据位置，

设置网站的图标（在标题栏和收藏栏）

网站图片一般都存储在网站的根目录下，名字一般叫做favicon.ico

为了让网站访问速度更快，用户体验更好，在VScode中安装插件js&css Minifier，在css中按f1，输入Minify：Document，就可以自动把代码压缩，出现xxx.min.css文件

115尚硅谷-过渡

过渡transition，

通过过渡可以指定一个属性发生变化时的切换方式

通过过渡可以创建一些非常好的效果，提升用户体验（transition：all 2s；表示所有属性变化都需要2秒）

transition-property 指定要执行过渡的属性，多个属性间使用,隔开

如果所有属性都要过渡，则使用all关键字，大部分属性都支持过渡效果，注意过渡时必须是从一个有效数值向另一个有效数值进行过渡

transition-duration 指定过渡效果的持续时间，时间单位：s和ms，1s=1000ms

transition-timing-function 过渡的时序函数，指定过渡的执行方式

可选值：

ease 默认值，慢速开始，先加速，在减速

linear 匀速运动

ease-in 加速运动

ease-out 减速运动

ease-in-out 先加速，后减速

cubic-bezier（）来指定时序函数 https://cubic-bezier.com

steps() 分步执行过渡效果

可以设置一个第二个值：

end，在时间结束时执行过渡（默认值）

start，在时间开始时执行过渡

transition-delay ：过渡效果的延迟，等待一段时间后在执行过渡

transition可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间第一个时持续时间，第二个时延迟时间

117尚硅谷-动画

动画

动画和过渡类似，都是可以实现一些动态的效果，不同的是过渡需要在某个属性发生变化时才会触发，动画可以自动触发动态效果。

设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行的每一个步骤，

@keyframs xxx{

from{ /* from表示动画的开始位置，也可以使用0%*/

margin-left：0；

}

to{ /* to表示动画的开始位置，也可以使用100%*/

margin-left：700px；

}

animation-name：xxx；设置动画，要对当前元素生效的关键帧的名字

animation-duration：2s；动画的执行时间

animation-delay：2s；设置动画的延时

animation-timing-function：ease；

animation-iteration-count：2；动画执行的次数

可选值：

次数

infinite 无限执行

animation-direction：normal；指定动画执行的方向

可选值：normal 默认值从 from 向 to 运行每次都是这样

reverse 从 to 到 from 运行每次都是这样

alternate 从 from 向 to 运行重复执行动画时反向执行

alternate-reverse 从 to 向 from 运行重复执行动画时反向执行

animation-play-state：设置动画的执行状态

可选值：

running 默认值动画执行

paused 动画暂停

animation-fill-mode：动画的填充模式

可选值：

none 默认值动画执行完毕元素回到原来位置

forwards 动画执行完毕元素会停止在动画结束的位置

backwards 动画延时等待时，元素就会处于开始位置

both 结合了forwards 和backwards 的特点

/*animation：还有一个steps（）分步，同上transition*/

119尚硅谷-关键帧

动画结合各个属性可以制作不同效果，/*小球弹跳*/

120尚硅谷-变形平移

变形就是指通过css来改变元素的形状或位置

变形不会影响到页面的布局

transform 用来设置元素的变形效果

平移：translateX() 沿着x轴方向平移
translateY() 沿着y轴方向平移
translateZ() 沿着z轴方向平移

平移元素，百分比是相对于自身计算的

利用transform来使元素居中

position：absolute；

left ：50%；

top：50%；

transform：translateX（50%） translateY（50%）；

一个元素就只有一个transform生效，后面多的会把前面的覆盖。

121尚硅谷-Z轴平移

z轴平移，调整元素在z轴的位置，正常情况下就是调整元素和人眼之间的距离，

距离越大，元素离人越近

z轴平移属于立体效果（近大远小），默认情况下网页不支持透视，如果需要看见效果必须要设置网页的视距，

html{

perspective：800px；

}

122尚硅谷-旋转

通过旋转可以使元素沿着x y或 z 旋转指定的角度

rotateX() rotateY() rotateZ()

transform: rotateZ(.25turn) ; 1turn等于一圈，180deg等于180度

backface-visibility：hidden；表示背面看不见，

123尚硅谷-鸭子表

要使秒针动，给秒针套一个父元素，设置父元素动，秒针占父元素一半然后跟着动。

124尚硅谷-复仇者联盟

两张图片中间有缝隙，使用vertical-align：top；可以去除；

为图片设置透明效果，用opacity：0.5；直接给元素设置透明效果

设置3d变形效果：transform-style：preserve-3d；

125尚硅谷-缩放

对元素进行缩放的函数：

scaleX () 水平方向缩放

scaleY () 水平方向缩放

scale () 水平方向缩放

scaleZ () 水平方向缩放在3d透视下才能看见效果

变形的原点默认值 center

transform-origin： 20px 20px；（transform：left center；）

126尚硅谷-less简介

less是一门css的预处理语言(预处理，事先处理一次，再交给浏览器，ps和外国人交流不说英语，请一个翻译，翻译就是预处理)

- less是一个css的增强版，通过less可以编写更少的代码实现

- 在less中添加了许多的新特性，像对变量的支持，对minix的支持....

- less的语法大体上和css语法一直，但是less中增添了许多对css的扩展，所以浏览器无法执行less代码，要执行必须向less转换为css，然后再由浏览器执行。

css原生也支持变量的设置，html{--color：#bfa；} 应用：color：var（--color）；

width：calc（200px/2）；calc()计算函数

127尚硅谷-less中的变量

在VScode中安装easy less插件，在里面建立xxx.less文件，可以自动生成xxx.css的文件，

在xxx.less中，可以使用层级表示代码，//表示单行注释，/* */表示多行注释，xxx.less中的注释也会同步到xxx.css中

变量，在变量中可以存储一个任意的值

并且我们可以在需要时，任意的修改变量中的值

变量的语法：@变量名

@a：200px；

@b：red；

使用变量时，如果是直接使用以@变量名的形式使用即可

作为类名，或者一部分值使用时须以@{ 变量名 }的形式使用

.@{a}{

}

变量发生重名时，会优先使用比较近的变量，可以在变量声明前就使用变量

如果要使用上面值 div{ width：200px；height：$width;}

128尚硅谷-父元素和扩展

& 表示外层的父元素，.box1{ .box2{} &:hover{} } 等于 .box1{ } .box1 .box2{} .box1:hover{}

extend() 对当前选择器扩展指定选择器的样式（选择器分组）

129尚硅谷-混合函数

混合函数，在混合函数中可以直接设置变量

调用混合函数，按顺序传递参数，或者在括号内直接指定，

130尚硅谷-less的补充

在浏览器显示的是css代码的位置，但要修改的是less中的代码，如何配置是less和css出现对应位置

1.复制代码，打开设置，点击扩展，点击easy less configuration，点击在settings.json中编辑，把刚才复制的代码粘贴进去，

131尚硅谷-弹性盒简介（flex）

flex(弹性盒、伸缩盒)

- 是css中又一种布局手段，它主要用来代替浮动来完成页面的布局

- flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变

- 弹性容器

要使用弹性盒，必须先将一个元素设置为弹性容器

我们通过display来设置弹性容器

display：flex；设置为块级弹性容器

display：inline-flex；设置为行内的弹性容器

设置了display:flex;或者display:inline-flex;的元素就是弹性容器，弹性容器的子元素就是弹性元素（注意不是后代元素）

- 弹性元素

弹性容器的子元素时弹性元素（弹性项）

display：flex；将元素设置为弹性容器

flex-direction：row；flex-direction指定容器中弹性元素的排列方式，

可选值：row 默认值，弹性元素在容器中水平排列（左向右）

主轴自左向右

row-reverse 弹性元素在容器中反方向水平排列（右向左）

主轴自左向右

column 弹性元素纵向排列（自上向下）

column-reverse 弹性元素方向纵向（自下向上）

主轴：

弹性元素的排列方向称为主轴

侧轴：

与主轴垂直方向的称为侧轴

弹性元素的属性：

flex-grow指定弹性元素的伸展的系数

当父元素有多余空间时，子元素如何伸展

父元素的剩余空间，会按比例进行分配

flex-shrink 指定弹性元素的收缩系数

当父元素中的空间不足以然所有子元素时，如何对子元素进行收缩

132尚硅谷-会弹的导航条
133尚硅谷-弹性容器上的样式

flex-wrap：设置弹性元素是否在弹性容器中自动换行

可选值：nowrap 默认值，元素不会自动换行

wrap元素沿着辅轴方向自动换行

wrap-reverse 元素沿着辅轴反方向换行

flex-flow ：wrap和direction的简写属性

flex-flow： row wrap；

justify-content：

-如何分配主轴上的空白空间（主轴上的元素如何排列）

-可选值：

flex-start 元素沿着主轴起边排列

flex-end 元素沿着主轴终边排列

center 元素居中排列

space-around 空白分布到元素两侧

space-between 空白均匀分布到元素间

space-evenly 空白分布到元素的单侧

justify表示主轴，align表示辅轴上

align-items：

-元素在辅轴上如何对齐

-元素间的关系

-可选值：

stretch 默认值，将元素的长度设置为相同的值

flex-start 元素不会拉伸，沿着辅轴起边对齐

center 居中对齐

baseline 基线对齐（沿着文字水平对齐）

要让元素垂直水平居中，设置justify-content：center；align-items：center；就可以。

align-content：

-如何分配辅轴上的空白空间（辅轴上的元素如何排列）

-可选值：

flex-start 元素沿着辅轴起边排列

flex-end 元素沿着辅轴终边排列

center 元素居中排列

space-around 空白分布到元素两侧

space-between 空白均匀分布到元素间

space-evenly 空白分布到元素的单侧

align-self：用来覆盖当前弹性元素上的align-items ，align-self值和align-item一样

134尚硅谷-弹性元素上的样式

flex-grow 弹性的增长系数

flex-shrink 弹性元素的缩减系数

-缩减系数的计算方式比较复杂

-缩减多少是根据缩减系数和元素大小来计算，元素越大缩减越多

flex-basis 指定的是元素在主轴上的基础长度

如果主轴是横向的则该值指定的就是元素的宽度

如果主轴是纵向的则该值指定的就是元素的高度

-默认值是 auto ，表示参考元素自身的高度或宽度

-如果传递了一个具体的数值，则以该值为准

flex 可以设置弹性元素所有的三个样式

flex 增长缩减基础；

initial “flex：0 1 auto”

auto “flex：1 1 auto”

none “flex：0 0 auto” 弹性元素没有弹性

order 决定弹性元素的排列顺序

在移动端，能用flex就不要用浮动，在PC端有的老版本浏览器不太支持flex。

135尚硅谷-淘宝导航

136尚硅谷-聊聊像素

像素：

-屏幕是由一个一个发光的小点构成，这一个个的小点就是像素

-分辨率：1920x1080 说的就是屏幕中小点的数量

-在前端开发中像素要分成两种情况讨论：css像素和物理像素

-物理像素，上述所说的小点点就属于物理像素

-css像素，编写网页时，需要将css像素转换为物理像素如何再呈现

-浏览器在显示网页时，需要将css像素转换成物理像素然后再呈现

-一个css像素最终由几个物理像素显示，由浏览器决定：

默认情况下在PC端，一个css像素 = 一个物理像素

视口（viewport）

-视口就是屏幕中用来显示网页的区域

-可以通过查看视口的大小，来观察css像素和物理像素的比值

-默认情况下：

视口宽度 1920（css像素）

1920（物理像素）

-此时，css像素和物理像素的比是1:1

-放大两倍的情况：

视口宽度 960（css像素）

1920（物理像素）

-此时，css像素和物理像素的比值是1:2

-我们可以通过改变视口的大小，来改变css像素和物理像素的比值

137尚硅谷-手机像素

在不同的屏幕，单位像素的大小是不同的，像素越小屏幕会越清晰

https://material.io/resources/devices/ 此链接用来查看大部分手机像素，无法访问

智能手机的像素点远远小于计算机的像素点

问题：一个宽度为900px的网页在iPhone6中如何显示？iphone6 4.7寸 750x1334

默认情况下，移动端的网页都会将视口设置为980像素（css像素) (手机在PC端宽都是980）

以确保PC端网页可以在移动端正常访问，都是如果网页的宽度超过了980，

移动端的浏览器会自动对网页进行缩放以完整显示网页

所以基本大部分的PC端完整都可以在移动端中正常浏览，但是往往都不会有一个好的体验，为了解决这个问题，大部分完整都会专门为移动端设计网页。

138尚硅谷-完美视口

移动端默认的视口大小是980px（css像素）

默认情况下，移动端的像素比就是 980/移动端宽度（980/750）iPhone6

如果我们直接在网页中编写移动端代码，这样在980的视口下像素比非常不好，

导致网页中的内容非常非常的小

编写移动页面时，必须要确保有一个比较合理的像素比:

1css像素对应 2个物理像素

1css像素对应 3 个物理像素

-可以通过meta标签来设置视口大小

-每一款移动设备设计时，都会有一个最佳的像素比

一般我们只需要将像素比设置为该值即可得到一个最佳效果

将像素比设置为最佳像素比的视口大小我们称其为完美视口

将网页的视口设置为完美视口

139尚硅谷-vw单位

不同的设备完美视口的大小是不一样的

iPhone6---375

iPhone6plus--414

由于不同设备视口和像素比不同，所以同样的375个像素在不同设备下意义不一样

比如在iPhone6中 375就是全屏，而到了plus中375就会缺一块

所以在移动端开发时，就不能再使用px来进行布局了

vw 表示的是视口的宽度（viewport width）

- 100vw = 1个视口的宽度

- 1vw = 1%视口宽度

vw这个单位永远相对于视口宽度进行计算

案例使用vw

140尚硅谷-vw适配

1个em等于一个字体大小，1个rem等于一个html的字体大小（font-size）

网页中字体大小最小是12px，不能设置一个比12像素还小的字体（0可以）

如果我们设置了一个小于12px的字体，则字体自动设置为12px

100 vw/750 px = 0.1333333vw

0.1333333vw = 1px

5.33333vw = 40px 同时扩大40倍

1rem = 1 html 的字体大小

1 rem =40 px

141尚硅谷-移动端页面上部分

142尚硅谷-完成移动端页面

设置弹性容器后，里面元素设置多了会缩小，在弹性元素内设置flex：none；解决

143尚硅谷-媒体查询简介（media）

响应式布局

-网页可以根据不同的设备或窗口大小呈现出不同的效果

-使用响应式布局，可以使一个网页适用于所有设备

-响应布局的关键就是媒体查询

-通过媒体查询，可以为不同设备，或设备不同状态来分别设置样式

使用媒体查询

语法：@media 查询规则{}

媒体类型：

all 所有设备

print 打印设备

screen 带屏幕的设备

speech 屏幕阅读器

-可以使用，连接多个媒体类型，这样他们之间就是一个或的关系

可以在媒体类型前添加一个only，表示只有，only的使用主要为了兼容一些老版本浏览器

144尚硅谷-媒体查询简介

媒体特性：

width 视口的宽度

height 视口的高度

min-width 视口的最小宽度（视口大于指定宽度时生效）

max-width 视口的最大宽度（视口小于指定宽度时生效）

样式切换的分界点，我们称其为断点，也就是网页的样式会在这个点时发生变化

一般比较常用的断点

小于768 超小屏幕 max-width=768px

大于768 小屏幕 min-width=768px

大于992 中型屏幕 min-width=992px

大于1200 大屏幕 min-width=1200px

145尚硅谷-美图手机导航结构

146尚硅谷-美图手机左侧图标

隐藏元素：visibility：hidden；或者opacity：0；透明度为0。

147尚硅谷-美图手机左侧下拉菜单

148尚硅谷-美图手机完成

缩小背景图片用background-size：400px 400px；

position：static；关闭所有定位

设置flex：auto；使里面的元素自动把外面的位置占了，然后自行分布。

尚硅谷web前端HTML5+CSS3笔记相关推荐

尚硅谷新版Web前端HTML5+CSS3知识点集合篇【p1-p8】
尚硅谷新版Web前端HTML5+CSS3知识点集合笔记篇尚硅谷新版Web前端HTML5+CSS3全套基础教程完整版(初学者零基础入门) p1(22:55) 一.软件的分类: 1.系统软件 -wind ...
Web前端html5+css3前端开发入门学习笔记
文章目录前言 HTML 认识HTML 1. 网页组成和本质 2.了解浏览器 3.web标准 4.HTML感知 5.HTML骨架 6.编译软件vscode的简介和使用 7.注释 8.标签组成和关系 9 ...
web前端html5+css3学习笔记(3)——标签
目录一.排版标签 1.标题标签 2.段落标签二.语义标签三.块级元素和行内元素 1.块级元素 2.行内元素四.文本标签 1.常用文本标签 2.不常用文本标签五.图片标签六.相对路径与绝对路 ...
web前端html5+css3学习笔记(1)
开启我的第一篇博客~~~ 记录学习html+css的笔记目录一.认识两位先驱二.计算机的组成 1.硬件 2.软件三.浏览器与内核四.网页标准五.HTML历史* 一.认识两位先驱图灵:人工 ...
尚硅谷Web前端ES6教程详细笔记，涵盖ES6-ES11
1 ES介绍 2 ES6的新特性 2.1 let关键字 2.1.1 声明变量 let a; let b,c,d; let e=100; let f=521,g="iloveyou" ...
最最详细的黑马前端HTML5+CSS3笔记，给大家整理好了
基于黑马前端视频学习的CSS3笔记,每一天的知识点都放在一起,方便学习查阅 ==CSS第一天== 一.css简介二.css语法规范三.css代码风格四.css选择器的作用五.css基础选择器 ...
web前端+HTML5+CSS3学习笔记
文章目录 HTML认知网页的基本组成和本质 HTML初始概念 HTML标签学习 HTML基础列表表格表单语义化标签字符实体 CSS基础基础认知选择器文字字体 Emmet语法 CSS进 ...
web前端html5+css3学习笔记(2)
文章目录目录一.标签二.HTML基本结构三.vscode 1.插件 2.注释 3.文档声明四.字符编码五.设置语言六.页面图标一.标签标签(也叫元素),需要小写 <marque ...
尚硅谷Web前端Promise教程从入门到精通——笔记
1. Promise简介 1.1 Promise理解抽象理解:Promise是js中进行异步编程的新解决方案异步编程:自己的理解:需要按照一定顺序进行的编程 fs,文件操作 ajax 数据库操作 ...