尚硅谷自学html css基础知识总结
1、快捷键及技巧
vscode快捷键
- shift+alt+F 一键改变格式，让代码变整洁
- .box1$*3
<div class="box1">aaaa</div>
<div class="box2">aaaa</div>
<div class="box3">aaaa</div>
- ctrl+/ 快捷注释 ctrl+f 在本页内搜索相同文本
- 标签可以安装插件实现快速补齐，标签会携带默认的样式。
设置多余字体省略
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
背景图片跟随滚动条滚动
background-attachment
- 背景图片是否跟随元素移动
- 可选值：
scroll 默认值 背景图片会跟随元素移动
fixed 背景会固定在页面中，不会随元素移动
background-attachment: fixed;
API查询
直接在zeal里相应位置输入属性名称即可查询
2、字体和图标
1. 字体颜色
color 用来设置字体颜色
例如：color: blue;
2. 字体大小
font-size相关的单位：例如：font-size: 40px;
em 相当于当前元素的一个font-size
rem 相对于根元素的一个font-size
3. 字体格式种类选择
font-family 字体族（字体的格式）
可选值： - serif 衬线字体
- sans-serif 非衬线字体
- monospace 等宽字体
- 指定字体的类别，浏览器会自动使用该类别下
font-family 可以同时指定多个字体，多个字体间使用,隔开
字体生效时优先使用第一个，第一个无法使用则使用第二个 以此类推
例如：font-family: 'Courier New', Courier, monospace;
如果想引用系统中没有的字体
font-face可以将服务器中的字体直接提供给用户去使用
问题：
1.加载速度
2.版权 fontfamily使用不涉及，只是建议用户使用
3.字体格式
@font-face {
/* 指定字体的名字 这个可以随便写*/
font-family:'myfont' ;
/* 服务器中字体的路径 这里用的是项目里的文件地址 */
src: url('./font/ZCOOLKuaiLe-Regular.ttf') format("truetype");
}
4、行高
行高（line height）
- 行高指的是文字占有的实际高度
- 可以通过line-height来设置行高
行高可以直接指定一个大小（px em）
也可以直接为行高设置一个整数
如果是一个整数的话，行高将会是字体的指定的倍数
- 行高经常还用来设置文字的行间距
行间距 = 行高 - 字体大小
字体框
- 字体框就是字体存在的格子，
- 设置font-size实际上就是在设置字体框的高度
行高会在字体框的上下平均分配 两倍的上下加字体框的高度=行高
line-height: 200px;
5、weight和style
font-weight 字重 字体的加粗
可选值：
normal 默认值 不加粗
bold 加粗
100-900 九个级别（没什么用）
font-style 字体的风格
normal 正常的
italic 斜体
font-weight: bold; /*可以使用数字100-900九个级别（没什么用）*/
font-style: italic;
6、font简写属性
html css p81 字体的简写属性
font 可以设置字体相关的所有属性
语法：
font: weight style字体大小/行高 字体族
各属性之间用空格隔开
weight style 行高 可以省略不写 如果不写使用默认值
font: normal normal 50px/2 微软雅黑, 'Times New Roman', serif;
/*normal、normal、以及/（标准行高）都是默认设置，不写默认是这三个值*/
7、图标引用
图标字体（iconfont）
- 在网页中经常需要使用一些图标，可以通过图片来引入图标
但是图片大小本身比较大，并且非常的不灵活
- 所以在使用图标时，我们还可以将图标直接设置为字体，
然后通过font-face的形式来对字体进行引入
- 这样我们就可以通过使用字体的形式来使用图标
下面列举fontawesome和阿里矢量图及三种使用方法
fontawesome 使用步骤
1.下载 https://fontawesome.com/
2.解压
3.将css和webfonts移动到项目中
4.将all.css引入到网页中 href是all.css的文件目录
<link rel="stylesheet" href="./fa/css/all.css">
5.使用图标字体 在源码中标注了多种格式，方便各个浏览器识别
- 直接通过类名来使用图标字体 fas 或 fab 加类名
class="fas fa-bell"
class="fab fa-accessible-icon"
<link rel="stylesheet" href="./fa/css/all.css">
<body>
<i class="fas fa-bell" style="font-size:80px; color:red;"></i>
<i class="fas fa-bell-slash"></i>
<i class="fab fa-accessible-icon"></i>
<i class="fas fa-otter" style="font-size: 160px; color:green;"></i>
</body>
为了方便使用，可以采用伪类使多个项目一起引用图标
通过伪元素来设置图标字体
1.找到要设置图标的元素通过before或after选中
2.在content中设置字体的编码 例如\f1b0
3.设置字体的样式
fab
font-family: 'Font Awesome 5 Brands';
fas
font-family: 'Font Awesome 5 Free';
font-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;
}
特殊情况下，实体也可以引用
<span class="fas"></span>
/*写明类名，中间注明，第一种引用方式是在class里的“ ”说明*/
阿里的图库 https://www.iconfont.cn/
Html css基础p79 iconfont
1、将iconfont.css引入到网页中 href是iconfont.css的文件目录
<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
p::before{
content: '\e625';
font-family: 'iconfont'; 需指明
font-size: 100px;
</style>
<link rel="stylesheet" href="./iconfont/iconfont.css">
<i class="iconfont"></i>
<i class="iconfont icon-qitalaji"></i>
<p>hello</p>
}
3、背景
1、文本的水平对齐和垂直对齐 p82
text-align 文本的水平对齐
可选值：
left 左侧对齐
right 右对齐
center 居中对齐
justify 两端对齐
vertical-align 设置元素垂直对齐的方式
可选值：
baseline 默认值 基线对齐
top 顶部对齐
bottom 底部对齐
middle 居中对齐
text-align: justify;
vertical-align:baseline; /*这里也可以设置数字*/
2、其他文本样式
text-decoration 设置文本修饰
可选值：
none 什么都没有
underline 下划线
line-through 删除线
overline 上划线
white-space 设置网页如何处理空白
可选值：
normal 正常
nowrap 不换行
pre 保留空白 用来保留文本格式
text-decoration: overline;
text-decoration: underline red dotted;
/*ie不支持在后面设置其他格式 谷歌，火狐支持，后面分别是红色、虚线*/
white-space: nowrap;
3、背景 p88、89
- background-color
- background-image
- background-repeat
- background-position
- background-size
- background-origin
- background-clip
- background-attachment
background-color 设置背景颜色
background-image 设置背景图片
可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色
- 如果背景的图片小于元素，则背景图片会自动在元素中平铺将元素铺满
- 如果背景的图片大于元素，将会一个部分背景无法完全显示
- 如果背景图片和元素一样大，则会直接正常显示
background-repeat 用来设置背景的重复方式
可选值：
repeat 默认值 ， 背景会沿着x轴 y轴双方向重复
repeat-x 沿着x轴方向重复
repeat-y 沿着y轴方向重复
no-repeat 背景图片不重复
background-position 用来设置背景图片的位置
设置方式：
通过 top left right bottom center 来设置背景图片的位置
使用方位词时必须要同时指定两个值，
如果只写一个则第二个默认就是center
通过偏移量来指定背景图片的位置：
水平方向的偏移量 垂直方向变量
background-image: url("./img/1.png");
background-repeat: no-repeat;
background-position: center;
background-position: -50px 300px;
其他属性：
默认边框下面是有背景的
设置背景的范围
background-clip 设置背景可以出现的位置
可选值：
border-box 默认值，背景会出现在边框的下边
padding-box 背景不会出现在边框，只出现在内容区和内边距
content-box 背景只会出现在内容区
background-origin 背景图片的偏移量计算的原点
padding-box 默认值，background-position从内边距处开始计算
content-box 背景图片的偏移量从内容区处计算
border-box 背景图片的变量从边框处开始计算
background-origin: border-box;
background-clip: content-box;
background-size 设置背景图片的大小
第一个值表示宽度 不仅仅可以写px 也可以写百分比
第二个值表示高度
- 如果只写一个，则第二个值默认是 auto 按原图成比例缩放
cover 图片的比例不变，将元素铺满
contain 图片比例不变，将图片在元素中完整显示
background-size: contain;
background-size: 100% auto;
background-size: 200px auto;
4、背景属性简写
backgound 背景相关的简写属性，所有背景相关的样式都可以通过该样式来设置
并且该样式没有顺序要求，也没有哪个属性是必须写的
注意：
background-size必须写在background-position的后边，使用/隔开
background-position/background-size
background-origin 要在background-clip的前边
background: url('./img/2.jpg') #bfa center center/contain
border-box content-box no-repeat ;
5、线性渐变 p93
设置了color之后，背景是纯色
通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果
！！渐变是图片，需要通过background-image来设置
线性渐变，颜色沿着一条直线发生变化
background-image: linear-gradient(red,yellow) ;
红色在开头，黄色在结尾，中间是过渡区域 从上往下
- 线性渐变的开头，我们可以指定一个渐变的方向
to left
to right
to bottom
to top
deg deg表示度数
turn 表示圈
- 渐变可以同时指定多个颜色，多个颜色默认情况下平均分布，
也可以手动指定渐变的分布情况
background-image:/*to top left*/
linear-gradient(to right ,red, yellow 50px);
background-image:
linear-gradient(90deg,red, yellow 50px);
background-image:
linear-gradient(.25turn,red, yellow 50px);
background-image: /*指定各个颜色开始渐变的位置（这个位置该颜色是纯色）*/
linear-gradient(red 50px,yellow 100px, green 120px, orange 200px);
特殊：repeating-linear-gradient() 可以平铺的线性渐变（不常用）
background-image: /*将渐变铺满所有区域*/
repeating-linear-gradient(to right ,red, yellow 50px);
6、径向渐变 p94
样式效果：从中心向四周辐射 （了解即可）
radial-gradient(大小 at 位置, 颜色 位置 ,颜色 位置 ,颜色 位置)
大小： circle 圆形
ellipse 椭圆
closest-side 近边 渐变距离是渐变点到最近的边
closest-corner 近角
farthest-side 远边
farthest-corner 远角
位置： top right left center bottom
默认情况下径向渐变的形状根据元素的形状来计算的
正方形 --> 圆形
长方形 --> 椭圆形 这里指的是渐变的画面效果
- 我们也可以手动指定径向渐变的大小 长短轴大小或circle ellipse
- 也可以指定渐变的位置
background-image: /*at 100px 100px指的就是渐变的圆心位置 */
radial-gradient(farthest-corner at 100px 100px, red , #bfa);
/*两个100，指的是渐变的范围*/
background-image: radial-gradient(100px 100px, red , #bfa);
4、Html样式
1、引用表格 p96
table是块元素，是表格的容器。但是内容宽度不是100%。默认被内容撑开
其他表格的标签有：thead，tbody，th，tr，td。
th是头部单元格的标签
tr是行标签，td是列标签
rowspan 纵向的合并单元格 colspan 横向的合并单元格 ="3" 表示合并三个
2、长表格 p97
可以将一个表格分成三个部分：
头部 thead 头部单元格用th声明内容，且自带居中加粗等样式
主体 tbody
底部 tfoot
不常用，头部里th代替tr使用，让文本默认有一个自动居中加粗效果
非自结束标签
3、表格的样式p98
1、table的宽度被内容撑开 table里的单元格宽度会随之自动变化
2、table 属性设置大框，td设置里面的单元格
3、table还有一些其他样式可以设置
<style>
table{
width: 50%;
border: 1px solid black;
margin: 0 auto;
/* border-spacing: 指定边框之间的距离 */
/* border-spacing: 0px; */
/* border-collapse: collapse; 设置边框的合并 内部边框 */
border-collapse: collapse;
}
4、不设置（thead tbody tfoot）
如果直接使用tr而没有指定tr的归属，默认是处于tbody下
table>tbody>tr 子元素归属
5、单元格元素的调整
vertical-align:middle; （单元格里的middle是上下左右水平居中）
text-align: center;
4、表单P99 P100
- 在网页中也可以使用表单，网页中的表单用于将本地的数据提交给远程的服务器
- 使用form标签来创建一个表单
常用的如下：
<form action="target.html" >
<!--action 表单要提交的服务器的地址 -->
<label for="text">在输入框前面的文字</label>
<!-- 点击label时可以将光标移入输入框，for后面加id名 -->
文本框<input id="text" type="text" name="username" placeholder="在这里输入文本框显示内容">
<!-- 文本框
注意：数据要提交到服务器中，必须要为元素指定一个name属性值 -->
密码框<input type="password" name="password">
<!-- 密码框 输入密码默认是*****-->
单选按钮
<input type="radio" name="hello" value="a">
<input type="radio" name="hello" value="b" checked>
<!--单选按钮
像这种选择框，必须要指定一个value属性，
value属性最终会作为用户的填写的值传递给服务器
checked 可以将单选按钮设置为默认选中
name的值必须一致，以保证只会选择一个 -->
<input type="checkbox" name="test" value="1">
<input type="checkbox" name="test" value="2">
<input type="checkbox" name="test" value="3" checked>
<!-- 多选框 -->
<select name="haha">
<option value="i">选项一</option>
<option selected value="ii">选项二</option>
<option value="iii">选项三</option>
</select>
<!-- 下拉列表 -->
<input type="submit" value="注册"> value指定显示的内容
<!-- 提交按钮 点击后默认提交表单 -->
<input type="reset">
<!-- 重置按钮 -->
<input type="button" value="按钮">
<!-- 普通的按钮 不会有默认功能，需要自己添加 后期可以利用JS绑定功能-->
<button type="submit">提交</button>
<!-- button相比input是成对出现的，不是自结束标签-->
</form>
API中input标签查看更多
type还有 email search手机端的tel
下面陈列一些可设置的属性
autocomplete="off" 关闭自动补全 显示过往输入记录
readonly 将表单项设置为只读，数据会提交
disabled 将表单项设置为禁用，数据不会提交
autofocus 设置表单项自动获取焦点 自动将光标打到该行
5、动画设置
1、过渡 P115
- 通过过渡可以指定一个属性发生变化时的切换方式
- 通过过渡可以创建一些非常好的效果，提升用户的体验
简单设置：transition:all 2s;
在子元素属性里设置
transition-property: 指定要执行过渡的属性
多个属性间使用,隔开
如果所有属性都需要过渡，则使用all关键字
大部分属性都支持过渡效果，
注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡
transition-property: height , width;
transition-property: all;
transition-duration: 指定过渡效果的持续时间
时间单位：s 和 ms 1s = 1000ms
/* transition-duration: 100ms, 2s; */
设置了两个属性的不同的过渡时间
/* transition-duration: 2s; */
transition-timing-function: 过渡的时序函数
指定过渡的执行的方式
可选值：
ease 默认值，慢速开始，先加速，再减速
linear 匀速运动
ease-in 加速运动
ease-out 减速运动
ease-in-out 先加速 后减速
cubic-bezier() 来指定时序函数
https://cubic-bezier.com
steps() 分步执行过渡效果
可以设置一个第二个值：
end 在时间结束时执行过渡(默认值)
start 在时间开始时执行过渡
transition-timing-function: cubic-bezier(.24,.95,.82,-0.88);
transition-timing-function: steps(2, start);
transition-delay: 过渡效果的延迟，等待一段时间后在执行过渡
transition-delay: 2s;
transition 可以同时设置过渡相关的所有属性，只有一个要求，
如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟
transition:2s margin-left 1s cubic-bezier(.24,.95,.82,-0.88);
2、动画P117
动画
- 动画和过渡类似，都是可以实现一些动态的效果，
- 不同的是过渡需要在某个属性发生变化时才会触发
- 动画可以自动触发动态效果
- -设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行每一个步骤
1、设置关键帧的代码（CSS） @keyframes 关键帧的名字{ }
@keyframes test {
/* from表示动画的开始位置 也可以使用 0% */
from{
margin-left: 0;
background-color: orange;
}
/* to动画的结束位置 也可以使用100%*/
to{
background-color: red;
margin-left: 700px;
}
}
2、设置元素的动画样式
设置box2的动画
animation-name: 要对当前元素生效的关键帧的名字
animation-name: test;
animation-duration: 动画的执行时间
animation-duration: 4s;
动画的延时
animation-delay: 2s;
animation-timing-function: ease-in-out;
以上的属性基本和过渡的一致！下面列举一些动画的可选值
-
animation-iteration-count 动画执行的次数
可选值：次数（数字）
infinite 无限执行 -
animation-direction
指定动画运行的方向
可选值：
normal 默认值 从 from 向 to运行 每次都是这样
reverse 从 to 向 from 运行 每次都是这样
alternate 从 from 向 to运行 重复执行动画时反向执行
alternate-reverse 从to向 from运行重复执行动画时反向执行 -
animation-play-state: 设置动画的执行状态
可选值：
running 默认值 动画执行
paused 动画暂停 -
animation-fill-mode: 动画的填充模式
可选值：
none 默认值 动画执行完毕元素回到原来位置
forwards 动画执行完毕元素会停止在动画结束的位置
both 结合了forwards 和 backwards
backwards 动画延时等待时，
元素就会处于刚动画开始时的状态和位置 -
可以同时设置：animation: test 2s 2 1s alternate
动画时间后面跟延时时间
3、关键帧
设置一个动画样式，多个属性都可以一起采用。
from=0% to=100% 可以设置from10% 40% 80% to
4、变形平移
变形就是指通过CSS来改变元素的形状或位置
- 变形不会影响到页面的布局 不会导致脱离文档流
- transform 用来设置元素的变形效果
- 平移：
translateX() 沿着x轴方向平移
translateY() 沿着y轴方向平移
translateZ() 沿着z轴方向平移 - 平移元素，百分比是相对于自身计算的 例X50%是自身宽度的50%
transform: translateY(-100px) translateX(-100px);
设置多个方向的平移时，中间不用，隔开。空格隔开胡可。
- z轴平移，调整元素在z轴的位置，就是调整元素和人眼之间的距离，
距离越大，元素离人越近
z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视，如果需要看见效果
必须要设置网页的视距（设置立体效果必须设置视距）
html{
/* 设置当前网页的视距为800px，人眼距离网页的距离 */
perspective: 800px; }
body{
border: 1px red solid;
background-color: rgb(241, 241, 241); }
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
margin: 200px auto;
transition:2s; }
/*在此处的transition后是设置变形的时间，也就是说，
变形理解为一种变化的属性*/
body:hover .box1{
transform: translateZ(800px);
}
小知识：此处颜色会默认归属到html里，设置边框会明显一些
body{
border: 1px red solid;
background-color: rgb(241, 241, 241);
}
5、旋转
通过旋转可以使元素沿着x y 或 z旋转指定的角度 transform
-
rotateX()
-
rotateY()
-
rotateZ()
/* 是否显示元素的背面 */ backface-visibility: hidden; 这里是隐藏
旋转结束后，原先的XYZ轴会随着元素原本的方向变化
6、缩放
对元素进行缩放的函数：
-
scaleX() 水平方向缩放
-
scaleY() 垂直方向缩放
-
scale() 双方向的缩放
transform:scale(2)
变形的原点 默认值 center
transform-origin:20px 20px;
6、less
html{
/* css原生也支持变量的设置 */
--color:#ff0;
--length:200px;
}
.box1{
/* calc()计算函数 */
width: calc(200px*2);
height: var(--length);
background-color: var(--color);
}
上面是css自身的一些变量设置，但这种用法兼容性不好
1、less的作用及语法
less是一门css的预处理语言
-
less是一个css的增强版，通过less可以编写更少的代码实现更强大的样式
-
在less中添加了许多的新特性：像对变量的支持、对mixin的支持… …
-
less的语法大体上和css语法一致，但是less中增添了许多对css的扩展，所以浏览器无法直接执行less代码，要执行必须向将less转换为css，然后再由浏览器执行
less的使用
-
在根目录创建.less后缀的文件编写less
-
安装easy less插件，less文件在保存后会自动生成css文件
-
引用此css文件下图示例
-
<link rel="stylesheet" href="css/other.css">
2、less的变量
- //是less里的单行注释，不会解析到css，但是/**/会解析过去
- 变量，在变量中可以存储一个任意的值
并且我们可以在需要时，任意的修改变量中的值
变量的语法： @变量名 - 使用变量时，如果是直接使用则以 @变量名 的形式使用即可
- 作为类名，或者一部分值使用时必须以 @{变量名} 的形式使用
- 变量发生重名时，会优先使用比较近的变量
- $width;在新版的easy less中可以直接引用
@a:200px;
@b:#bfa;
@c:box6;
.box5{
width: @a;
color:@b;/*解析到css里是color：#bfa*/
.@{c}{
width: @a;
background-image: url("@{c}/1.png"); 引用box6的图片
}
div{
width: 300px;
height: $width;// 新版的语法
}
3、父元素选择器
- 子元素写法用法 如下 >.box3，后代直接写即可
- 为box1设置一个hover，& 就表示外层的父元素
- extend() 对当前选择器扩展指定选择器的样式（选择器分组）
- 直接对指定的样式引用，这里就相当于将p1的样式在这里进行了复制
- 使用类选择器时可以在选择器后边添加一个括号，这时我们实际上就创建了一个mixins，mixins不会直接被调用，而只是一个可以使用的变量
.box1{
.box2{
color: red;
}
>.box3{
color: red;
&:hover{
color: blue;
}
}
.p2:extend(.p1){
color: red; //在p1的样式基础上另外写其他的属性}
.p3{
//mixin 混合
.p1();
}
minxins
.p4(){
width: 100px;
height: 100px;
}
4、混合函数
- 混合函数调用和C中的形参是一样的，可以在调用时传入，也可以直接在括号中写入数值。
- 调用混合函数，按顺序传递参数，亦可以调用时写好每个参数代表什么
- 如果在函数中写了默认值，那么在传入较少的参数时，其他参数会采取默认值。
.test(@w:,@h:,@bg-color:){
width: @w;
height: @h;
border: 1px solid @bg-color;
}
div{
//调用混合函数，按顺序传递参数
.test(200px,300px,#bfa);
.test(300px);
.test(@bg-color:red, @h:100px, @w:300px);
}
span{
color: average(red,blue);//取平均值
color: darken(#bfa,50%);//颜色加深50%
}
5、其他小细节
-
在less中所有的数值都可以直接进行运算 + - * /
-
@import “syntax2.less”;
import用来将其他的less引入到当前的less
可以通过这个对less进行模块化处理 -
css和less的映射关系
扩张程序easy less下： Advanced Usage>复制下面的less.compile的代码块> 设置里扩展程序easy less在第一段setting中粘贴， 注意，out后面需要改成true，这段代码前一行末尾是逗号
设置完之后会生成map文件，浏览器直接定位在less文件的哪一行
7、弹性盒
1、简介
flex(弹性盒、伸缩盒)
-
是CSS中的又一种布局手段，它主要用来代替浮动来完成页面的布局
-
flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变
-
弹性容器
- 要使用弹性盒，必须先将一个元素设置为弹性容器
- 我们通过 display 来设置弹性容器
display:flex 设置为块级弹性容器
display:inline-flex 设置为行内的弹性容器
-
弹性元素
- 弹性容器的直接子元素是弹性元素（弹性项）
- 弹性元素可以同时是弹性容器
-
和浮动相比较优缺点
浮动兼容性好，弹性盒功能强大。能用fiex就不要用浮动
2、设置弹性容器的属性
-
flex-direction 指定容器中弹性元素的排列方式
-
row 默认值，弹性元素在容器中水平排列（左向右）
- 主轴 自左向右 -
row-reverse 弹性元素在容器中反向水平排列（右向左）
- 主轴 自右向左 -
column 弹性元素纵向排列（自上向下）
-
column-reverse 弹性元素方向纵向排列（自下向上）
-
主轴：
弹性元素的排列方向称为主轴
侧轴：
与主轴垂直方向的称为侧轴 -
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 ，空白分布到元素的单侧
-
align-items: 元素在辅轴上如何对齐，元素间的关系
- stretch 默认值，将元素的长度设置为相同的值
- flex-start 元素不会拉伸，沿着辅轴起边对齐
- flex-end 沿着辅轴的终边对齐
- center 居中对齐
- baseline 基线对齐
justify-content:content; align-items:center; 可以设置垂直水平双方向居中
- align-content: 辅轴空白空间的分布 ，可选值和上边一样
- align-self: 用来覆盖当前弹性元素上的align-items 单独设置items
3、弹性元素的样式
-
flex-grow 指定弹性元素的伸展的系数 默认0:0:0
- 当父元素有多余空间的时，子元素如何伸展
- 父元素的剩余空间，会按照比例进行分配
-
flex-shrink 指定弹性元素的收缩系数
- 当父元素中的空间不足以容纳所有的子元素时，如何对子元素进行收缩
- 缩减系数的计算方式比较复杂 元素越大缩减越多
- 缩减多少是根据 缩减系数 和 元素大小来计算
-
flex-basis 指定的是元素在主轴上的基础长度
- 如果主轴是 横向的 则 该值指定的就是元素的宽度
- 如果主轴是 纵向的 则 该值指定的是就是元素的高度
- 默认值是 auto，表示参考元素自身的高度或宽度
- 如果传递了一个具体的数值，则以该值为准
-
flex 可以设置弹性元素所有的三个样式，一般使用这个简写属性
flex 增长 缩减 基础;initial "flex: 0 1 auto". auto "flex: 1 1 auto" none "flex: 0 0 auto" 弹性元素没有弹性 -
order 决定弹性元素的排列顺序
4、像素
-
像素
- 屏幕是由一个一个发光的小点构成，这一个个的小点就是像素
- 分辨率：1920 x 1080 说的就是屏幕中小点的数量
- 在前端开发中像素分成两种情况讨论：CSS像素 和 物理像素
- 物理像素，上述所说的小点点就属于物理像素
- CSS像素，编写网页时，我们所用像素都是CSS像素
- 浏览器在显示网页时，需要将CSS像素转换为物理像素然后再呈现
- 一个css像素最终由几个物理像素显示，由浏览器决定：
- 默认情况下在pc端，一个css像素 = 一个物理像素
-
视口（viewport）
- 视口就是屏幕中用来显示网页的区域
- 可以通过查看视口的大小，来观察CSS像素和物理像素的比值
默认情况下：
视口宽度 1920px（CSS像素） 1920px（物理像素）
此时，css像素和物理像素的比是 1:1 - 放大两倍的情况：
视口宽度 960px（CSS像素） 1920px（物理像素）
此时，css像素和物理像素的比是1:2 - 我们可以通过改变视口的大小，来改变CSS像素和物理像素的比值
5、移动端
-
在不通的屏幕，单位像素的大小是不同的，像素越小屏幕会越清晰
24寸 1920x1080
i6 4.7寸 750 x 1334 -
智能手机的像素点 远远小于 计算机的像素点
-
问题：一个宽度为900px的网页在iphone6中要如何显示呢？
-
默认情况下，移动端的网页都会将视口设置为980像素（css像素）
以确保pc端网页可以在移动端正常访问，但是如果网页的宽度超过了980，
移动端的浏览器会自动对网页缩放以完整显示网页https://material.io/resources/devices/ 查询像素比例网址
-
-
所以基本大部分的pc端网站都可以在移动端中正常浏览，但是往往都不会有一个好的体验，
为了解决这个问题，大部分网站都会专门为移动端设计网页
6、移动端视口
-
移动端默认的视口大小是980px(css像素)，
默认情况下，移动端的像素比就是 980/移动端宽度 （980/750）
如果我们直接在网页中编写移动端代码，这样在980的视口下，像素比是非常不好，导致网页中的内容非常非常的小 -
编写移动页面时，必须要确保有一个比较合理的像素比：
1css像素 对应 2个物理像素
1css像素 对应 3个物理像素 -
可以通过meta标签来设置视口大小
-
每一款移动设备设计时，都会有一个最佳的像素比，
一般我们只需要将像素比设置为该值即可得到一个最佳效果
将像素比设置为最佳像素比的视口大小我们称其为完美视口
将网页的视口设置为完美视口
meta name="viewport" content="width=device-width, initial-scale=1.0"
以后再写移动端的页面，就把上边这个玩意先写上
6、VW
-
不同的设备完美视口的大小是不一样的
iphone6 – 375
iphone6plus – 414 -
由于不同设备视口和像素比不同，所以同样的375个像素在不同的设备下意义是不一样，
比如在iphone6中 375就是全屏，而到了plus中375就会缺一块 -
所以在移动端开发时，就不能再使用px来进行布局了
vw 表示的是视口的宽度（viewport width）
- 100vw = 一个视口的宽度
- 1vw = 1%视口宽度 -
vw这个单位永远相当于视口宽度进行计算
设计图的宽度 750px 1125px 常见的宽度 设计图 750px 使用vw作为单位 100vw -
创建一个 48px x 35px 大小的元素
100vw = 750px(设计图的像素) 0.1333333333333333vw = 1px 6.4vw = 48px(设计图像素) 4.667vw = 35px -
网页中字体大小最小是12px，不能设置比12像素还小的字体
如果我们设置了一个小于12px的字体，则字体自动设置为12
1 rem = 1 html的字体大小
7、响应式布局
- 像素
- 网页可以根据不通的设备或窗口大小呈现出不同的效果
- 使用响应式布局，可以使一个网页适用于所有设备
- 响应布局的关键就是 媒体查询
- 通过媒体查询，可以为不同的设备，或设备不同状态来分别设置样式
- 媒体查询
-
使用媒体查询
语法： @media 查询规则{}
媒体类型：
all 所有设备
print 打印设备
screen 带屏幕的设备
speech 屏幕阅读器 -
可以使用,连接多个媒体类型，这样它们之间就是一个或的关系
可以在媒体类型前添加一个only，表示只有。
only的使用主要是为了兼容一些老版本浏览器
-
@media print,screen{
body{
background-color: #bfa;
}
}
- 媒体查询语法
- width 视口的宽度
- height 视口的高度
- min-width 视口的最小宽度（视口大于指定宽度时生效）
- max-width 视口的最大宽度（视口小于指定宽度时生效）
@media (max-width: 500px){
body{
background-color: #bfa;
}
}
- 样式切换的分界点，我们称其为断点，
也就是网页的样式会在这个点时发生变化- 小于768 超小屏幕 max-width=768px
- 大于768 小屏幕 min-width=768px
- 大于992 中型屏幕 min-width=992px
- 大于1200 大屏幕 min-width=1200px
- 逗号表示或，and表示与
@media only screen and (min-width: 500px) and (max-width:700px){
body{
background-color: #bfa;
}
}
8、css选择器
基本的选择器类型：
- 元素选择器 h1 p span
- 类选择器 .className
- id选择器 #idname
- 通配符选择器 *（所有标签）
高级选择器类型：
- 层级选择器： selector1 selector2 两个选择器之间是嵌套关系，选择1下的2
- 组合选择器： selector1,selector2 两个选择器都进行选择
- 伪类选择器（依据行为）：selector:hover 选择器:行为
- 伪元素选择器（依据元素）：selector::before selector::after
权重：？？？？？？？？？
9、盒子模型
6、易错-
1. 默认font的影响
font-weight: bold;
font-style: italic;
line-height:200px;
font:50px 'Times New Roman', Times, serif;
如果使用了font这种简写属性，
默认50px/（标准行高）；weitgh style也都是正常值
会将上面的200px、bold、italic覆盖；
2. 基线
文字和图片在文本框中写入时，与底边栏之间会有一个间隔，这不是内边距。可以通过设置其他方式（例如top）对齐来去除。
3、垂直居中P12010:00
.box3{
background-color: orange;
position: absolute;
/*
这种居中方式，只适用于元素的大小确定
若是高度宽度确定可以使用，若是盒子大小被内容撑开，
则会调整内容区的长宽（会撑满整个屏幕）
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto; */
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
<div class="box3"> aaaa</div>
采用变形可以巧妙地规避这个问题：
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
练习题
米兔练习P116
实现的是用过渡做出动画效果
奔跑的少年P118
未学习、
鸭子表P123 P124
未学习
P132 P135 141 142 145146147148
未学习
203
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
