一、网页的组成部分
HTML结构层:使用各种标签来组成网页的基本结构
CSS样式层:使用各种属性对结构层的一种美化
JS行为交互层:给网页添加动态效果、以及行为交互
二、HTML基础知识
1、什么是HTML
HTML:超文本标记语言(Hyper Text Markup Language)
可以通过创建一个文本文档,将后缀名修改成.html的方式创建一个html。而.html就是为了告诉浏览器这是一个网页
2、HTML的基本结构组成
Document:告诉浏览器html的版本
html:告诉浏览器这是一个网页
type:类型
dead:网页的头部
UTF-8:万国码,用来定义字符的编码格式
body:页面的主体,也是编写代码的地方
三、标签
1、行内元素的标签
行内元素:默认是横向排列的且无法实现宽高设置的标签
文本加粗:< b >文本< / b >
作用:让文本实现加粗效果
文本倾斜:< i >文本< / i >
作用:让文本实现倾斜效果
下划线:< u >文本< / u >
作用:对文本添加下划线
删除线:< s >文本< / s >
作用:对文本添加删除线,常用降价
上角标:< sup >文本< / sup >
下角标:< sub >文本< /sub >
文本修饰标签:< font >文本< /font >
属性:
1、color:字体颜色
2、size:字体大小
3、face:字体样式(浏览器默认字体为宋体)
换行标签:< br >(属于单标签)
作用:让文本强制换行
水平线标签:< hr >-------forizontal水平的意思
作用:用来进行上下分割区域的;上下文本分成两个区域
特点:水平线默认是带阴影的,两个颜色,一个深色一个浅色;默认是从左侧通道右侧
属性:
1、noshade=“noshade”取消阴影
注:属性和属性值一样,可以直接写属性,不用写属性值
2、color:水平线的颜色
3、width:水平线的宽度,设置后水平线,默认会位于水平线中间位置
4、align:对齐方式
取值:
left=左
right=中
center=右
5、size:水平线的高度
超链接标签:< a >文本< /a >
功能:
1)超链接功能:实现不同页面之间的跳转。
基本语法< a href=“路径地址”>文本/图片< / a >
路径:
相对路径——相对于文件和文件夹之间的关系查找对应的页面
绝对路径——是一个完整的地址。例如:https://www.baidu.com/
2)锚点功能:实现相同页面之间不同区域之间的跳转,
基本语法:< a href=”#锚点名“>文本< / a >
跳转区域:< div id=”锚点名“ >< / div >
属性:
1)target:打开方式
取值:
_self:本窗口打开
_blank:新窗口打开
_parent:在父级框打开
_top:在顶部打开
2)href:路径
2、特殊符号
& lt;====小于号(<)
& gt;====大于号(>)
& emsp;==全角空格
& nbsp;==半角空格
& reg;& trade;=商标
& copy;==版权
3、块元素
1)div标签:有的人把div叫做盒子标签,但盒子的概念太大,任何一个容器标签都可以叫做盒子,只不过是盒子大小的问题。而div是一个比较大的盒子,它里面可以容纳任何标签,是最外层的标签,
作用:做区域,区块划分的,划分完毕后方便布局做页面,默认是纵向排列
2)p标签:叫做段落标签,让文本独立成段,段落与段落之间存在较大的段落间距
基本语法:< p >文本< /p >
注意事项:p标签里面可以放置任何文本修饰类标签,但不能放置区块划分类型的标签
3)列表标签
1、有序列表ol
含义:有顺序的列表清单
基本语法:
< ol >
< li >文本< /li >
< /ol >
”o“代表的是order(有序)、”l“代表的是list(清单、列表)
属性:type------控制ol的列表项显示类似
取值:A、a、I、i、1
属性:start-----控制ol的列表项从第几个开始
2、无序列表ul
含义:没有顺序的列表清单
基本语法:
< ul >
< li >文本< /li >
< /ul >
“u”代表的是unorder(没有顺序)
属性:type—控制列表ul的列表项的显示类型
取值:disc—黑色实心圆
circle—空心圆、圆环
square----黑色实心方块
none-----取消列表项
注意:ul、ol里面只能放置li,如果需要嵌套别的标签,则需要放在li里面
3、自定义列表dl
含义:自行定义的列表清单,主要应用于:问答列表,图文混排布局
基本语法:< dl >
< dt >问题/图片< /dt >
< dd >回答/图片的解释< /dd >
< /dl >
注意:dl里面可以放在多个dt和多个dd;但一般情况下只允许放在一个dt个一个dd
4)form标签:表单标签
作用:用来收集用户信息,类似一张网,把输入的信息一网打尽,把这些数据带到服务器上面,然后添加对应的数据里面
基础语法:<form action=“提交跳转的地址” method=”提交方式“ target=”打开方式“
输入框、密码框、单选框、提交按钮等,均属于表单中的控件,用来暂存数据信息的
属性:
Action:提交的跳转的地址;配合form标签使用
Submit:完成跳转
Target:打开方式,是否在原来的窗口中展示新的页面
Method:提交方法
Post:密文提交,加密的形式提交数据
Get:明文提交,能看到提交的数据
5)表单的控件:input
基础语法:< input type=”?”>
type取值:
submit:提交按钮
reset:重置按钮
button:普通按钮
image:图像按钮
6)H5新增的增强型表单
Color:颜色拾取器
Search:搜索框
Tel:唤起手机拨号盘
Number:数值
属性:
- Min:最小值
- Max:最大值
- Value:当前值
- Step:步长值
Range:滑块
属性与数值的一样
Date:日期(包含年月日)
Month:月份
Week:周期
Time:时间
Datetime-local:获取本地时间
Email:电子邮箱
属性:required:当前内容必须输入
Url:地址栏
属性与电子邮箱一样
7)H5新增的新属性
数值和滑动块里面
min/max/step(步长值)
Required:验证不能为空
Disabled:禁用,紧张使用
Readonly:只读,只能看
Autofocus:自动获取光标(焦点)
For:关联
必须配合
注意:for的值必须和前面控件的id值一样
List:用于模糊搜索
主要是用来仿写模糊搜索框的功能
List属性用于input里面,与datalist标签的id属性必须保持一致
Autocomplate:自动提示功能
- On:开启自动提示
- Off:关闭自动提示
Pattern:用来简易的正则判断
4、四、行内块
图片标签:img
1)如果页面图片是同级关系,图片名字可以直接当作路径
2)如果页面在的文件夹和图片是同级关系,需要线返回上一级,然后在去找对应的图片(…/)
3)页面所在的文件家和图片所在的文件夹是同级关系,需要先返回上一级,在进入对应的文件夹里面再去找图片
作用:就是让一个图显示在浏览器中
属性:
- src:图片路径
- Width:宽度
- Heirght:高度
注意:图片可以设置宽度高度,但设计开发的时候几乎很少设置宽度和高度。因为为了防止图片变形、挤压、失真
4)alt:图片描述
注意:只有在图片没有正常加载,或者显示破损文件的时候才会提示,不破损不提示
5)title:文本提示
注意:只有鼠标放在图片上面的时候才会提示的文本,无论图片是否破损,只要鼠标放在上面就会提示
四、CSS层叠样式表
1)什么是CSS层叠样式表
Cascading(层叠)style(样式)sheet(表)
2)作用:对于HTML结构的一个修饰
3)基本语法:
选择器{
属性:属性值;
}
4)选择器:查找页面元素的一种方式方法
5){}:样式规则或样式声明,用来修饰选择器查找到的元素的,规定选择器查找到的元素实现何种样式
6)样式表的优先级:!Important>行内>内部>外部
1、基本选择器
1)标签选择器
通过标签的名字查找页面的元素
弊端:匹配的精准度不高,范围过于广泛
2)类选择器:“.“
给元素起class类名,在css里面通过类名查找页面元素
基本语法:
起名字:< div class=“box” >< /div >
查找元素: .box{属性:属性值;属性:属性值;}
注意:类名查找使用的时候必须带:.
类名命名的时候,必须遵循以下规则
- 不能以数字开头,
- 不能使用汉字
- 不能使用特殊符号
- 使用小写字母开头,配合字母数字,下划线,连接符一起使用
3)特殊的点:任何一个标签都可以带类名,相同的样式可以出现相同的类名
4)元素可以起多个类名,多个类名共用一个class,多个名字之间使用空格隔开:实际开发的时候我们最多三个类名;
弊端:
精准度还是不高,不同的标签可以出现相同的名字
3)Id选择器:“#”
与类选择器相似
4)通配符选择器:“*”
通配符选择器:匹配页面中所有的元素
基本语法: *{}
作用:匹配页面中所有元素,取消内外边距;
*{margin:0;padding:0}
大部分的元素都再带内边距和外边距;开发的时候需要把对应的元素默认间距取消掉
没有带内外边距:div,文本修饰类型标签
但是:
会使用另外一个选择器替换通配符选择器
群组选择器:节约代码,把公共代码提取出来
基本语法:选择器1,选择器2,选贼器3,选择器4{属性:属性值;}
html,body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,input,img,table,form{margin:0;padding:0}
5)群组选择器:用逗号隔开
6)后代选择器:中间用空格隔开
- 后代选择器:
匹配当前元素内所有符合条件的元素(儿子辈分,孙子辈分,重孙子辈分)
基本:选择器1 选择器2{} - 子代选择器:
匹配当前元素内所有符合条件的儿子辈分的元素(只匹配下一级,儿子)
基本:选择器1>选择器2{}
判断题:后代选择器一定匹配的数量比子代选择器匹配的数量多
有一种可能是等于的关系:没有孙子辈分的元素;
7)子代选择器:“>”
8)伪类选择器
伪类选择器:
含义:元素本身没有这种装填,需要通过鼠标的一系列的操作行为(点击,划过,拖拽等等)才能实现的一种样式;
实际开发的时候目前只在使用一个伪类:悬停;
但是面试题里面需要我们详细的记忆里面的内容
四个伪类:(:前后均没有空格)
-
选择器:link{} 鼠标访问前的样式
-
选择器:visited{}鼠标访问后的样式
-
选择器:hover{} 鼠标悬停时的样式
-
选择器:active{} 鼠标点击时的样式(鼠标落点瞬间)
开发标准是按照以上顺序进行书写的 实际上我们四个伪类一起应用的时候大部分都应在超链接上面 但是我们大部分也都在把hover单独拎出来使用
简易:选择器的权重:id>类>标签>通配符
复杂:需要考虑权重值相加的问题
2、背景属性
1)background-color:背景色
2)background-image:url(“图片路径”);背景图片
3)background-repet:是否平铺
- repet===允许平铺
- no-repet=不平铺
4)background-position:背景图定位
5)background-attachment:fixed
6)复合属性:background:no-repet 背景色 url() 背景图位置 fixed
注意:复合属性是可以跟一个值,也可以跟多个值,顺序也是可以改变的
3、精灵图
含义:
精灵图也叫雪碧图、妖怪图,网站中使用到对应的小图标,放在一个背景透明的图片上面;如果网站中有需要到对应的小图标的时候,我们通过背景插入的形式,配合背景定位属性来实现上对应的小图标显示再某一个位置。这个技术被称为精灵图技术。
为什么要使用精灵图?
节约访问服务器的次数,使用精灵图能节约内存
4、列表规则
主要对于列表标签的修饰:有序列表、无序列表,在实际开发中使用的无序列表的频率是比较高的。
1)list-style-type:列表项类型
取值:
- dise:黑色实心圆
- circle:圆环、空心圆
- square:黑色实心方块
- none:取消列表项
2)list-style-image:列表项图片
3)list-style-position:列表项的位置
取值:
- inside:里面
- outside:外面
4)复合属性:list-style:type image position
注意:复合属性后面可以跟一个值,也可以跟多个值;多个值使用时用空格隔开。多个值没有顺序。但在实际开发中。使用的是list-style:none;取消列表项
五、文本规则
1)font-size:文本大小
取值:
- px单位:像素单位(固定值)
- em单位:相对单位(相对于文字大小)
2)font-family:文本字体
取值:
- 汉字不需要带引号
- 后面可以跟多个字体(安全字体):读取时会按照从左到右依次读取,如果第一个能实现则实现第一个字体,如果不能就依次往后
- 浏览器的默认字体是宋体:因为高版本浏览器伪类增强用户的体验度,把默认字体更改成立微软雅黑
- 如果英文字体是由多个单词组成的一个字体,则需要带引号
3)font-wight:文本加粗
取值:
- lighter=====100:细体
- 、normal=====400:正常字体
- bold=======700:加粗字体
- bolder======900:具有强调意义的加粗
4)font-style:文本倾斜
取值:
- normal:正常字体
- italic:倾斜
- oblique:具有强调意义的倾斜
5)text-decoration:文本修饰线
取值:
- underline:下划线
- line-through:中划线
- overline:上划线
- none:取消修饰线
6)color:文本颜色
取值:
- 英语单词
- RGB
- 十六进制
7)font-variant:小型大写字符
取值:
small-caps
8)text-align:文本对齐方式
取值:
- left:左侧对齐
- right:右侧对齐
- center:居中对齐
- justify:两端对齐
9)line-height:行间距
10)letter-spacing:字间距
11)word-spacing:词间距
12)text-transform:大小写转换
取值:
- capitalize:每一个英文单词首字母大写
- lowercase:全部小写
- uppercase:全部大写
13)text-indent:首行缩进
5、浮动规则
含义:
就是让元素漂浮起来,主要是为了解决让原本纵向排列的元素,横向排列
属性:float
取值:
- none:不浮动
- Left:左浮动
- Rigfht:右浮动
注意:
- 只要添加了浮动,并且取值不为none时,就会导致脱离文档流,不占据页面空间,后面的元素会补位上去,浮动影响的是后面的元素
- 如果浮动后剩余的空间不够容下一个元素,则最后一个元素会在这行显示,如果高度不一样的话,就会出现卡住的效果。最后一个元素补位的位置显示,是参照他前面一个元素留下的剩余的空间,以右侧和下方为参照
6、清除浮动的影响
clear:
取值:
- none:默认值,不清除
- Left:清除左浮动
- Right:清除右浮动
- Both:清除所有浮动
7、盒子模型
1)border:边框
含义:代表元素的边界,任何一个元素都有边框
属性:
- border-width:边框的粗细
- border-style:边框的类型
取值: -
- solid:单实线
-
- double:双实线
-
- dashed:线状虚线
-
- dotted:点状虚线
- border-color:边框的颜色
- border:复合属性
2)padding:内边距(内填充)
含义:内容到边框之间的区域
3)margin:外边距
含义:元素到元素,边框到边框之间的距离
4)内容区域:设置的宽度与高度
5)padding与margin的特殊取值
1、能否取负值
padding:不能取负值,没有任何意义
margin:可以取负值,作用,可以让元素实现位置移动
2、margin的特殊情况
- 让元素位于水平居中的位置
前提:必须要有宽度;主要应用版心区域
取值:margin:0 auto; - 其他特殊情况;用于调整外边距
A)兄弟关系的外边距
a)竖直排列的兄弟
上下的外边距,取最大值,默认存在一个外边距重合的特殊情况
b)横向排列的兄弟
左右的外边距求和,默认存在外边距重合,但因为浮动形成了BFC独立区域
B)父子关系外边距
6)盒子模型的大小计算
实际的宽度=CSS.width+padding(左右)+border(左右)+margin(左右)
实际的高度=CSS.height+padding(上下)+border(上下)+margin(上下)
8、溢出隐藏规则
含义:元素原本有自己的宽度和高度,但内容过多了,超出了这个区域,超出的部分被称为溢出
属性:overflow
取值:
- visible:溢出显示
- hidden:溢出隐藏
- scrol:溢出滚动
默认会带两个没有用的滑动条,哪个方向溢出,哪一个方向才会有功能 - auto:溢出自动
默认不会带滚动条,只有哪个方向溢出,哪个方向才会出现滚动条
9、定位规则
1)含义:让元素先对于某一个位置,或者到某个位置显示
2)属性:position
3)取值:
- static:静态定位,普通文档流定位
什么效果也没有,默认值。在实际开发中不会用 - relative:相对定位,相对于自己的位置进行微调
- absolute:绝对定位
-
- 如果子元素使用了绝对定位,但外层的所有父级元素均没有非static的定位,则子元素参照的是浏览器的左上角
-
- 子元素使用绝对定位,外层的元素有非static的定位,则参照就近已有定位的元素进行位置的调整
- fiexd:固定定位,参照的是浏览器的窗口
- sticky:粘性定位,是相对定位和固定定位的一个结合,主要实现的是滚动吸顶
始终遵循一个点:父相子绝,子绝父相
注意:只要使用定位,就要让元素的位置发生改变,单纯的使用定位或者值,是无法让位置改变的,要想让元素位置发生改变,则需要使用偏移属性配合(top/right/bottom/left)
4)z-index:增加定位的层级
10、表格规则
含义:
表格就是一个格子,用来展示用户信息的,面前主流的页面布局几乎不用使用,但后台管理系统的信息区域有可能会使用
基本语法:
< table > 表格
< tr> 表格的行
< td >表格的单元格< /td >
< /tr >
< /table >
一盒table代表的是一个表格,一个tr代表的是一行,一个td代表的是一行中的单元格
表格的标签属性:
属性和属性值直接使用在标签的位置,而且属性和属性值需要用等号连接
1)border:边框,给table添加边框后,会直接给td也添加上
2)Width/Height:宽高属性
注意:取值不给单位的情况下,默认是px,宽度可以使用百分比,高度不可以使用百分比,也高度是具有继承性的
3)Bgcolor:背景色
4)Bordercolor:边框颜色
5)Align:对齐方式:left/right/center
6)Cellspacing:单元格于单元格之间的距离
7)Cellpadding:单元格与内容之间的距离
8)Frame:表格的外边框线
取值:
- above:上外边框
- below:下外边框
- Lhs:左外边框
- Rhs:由外边框
9)Rules:表格的内边框线
取值:
- rows:表格内部横向边框
- cols:表格内部纵向边框
10)valign:单元格内部水平文本对齐方式
取值:left/right/center
11)单元格内文本垂直对齐方式
取值:top/bottom/middle(居中)
12)单元格合并
- colspan:列合并
- rowspan:行合并
11、表格的CSS属性:
1)caption:表格的标题:使用的位置在第一个tr之前,css属性caption-side:top/bottom
2)表格的标题行和标题列单元格标签
Th标签:替换的是td
Th的特点:默认加粗且居中
3)表格的行分组标签
- Thead:表格的头部
- Tbody:表格的主题
- Tfoot:表格的尾部
默认情况下,没有分组会自动划分一个tbody标签
注意:
表格中只允许出现一个头部和一个尾部,但可以出现多个主体
4)表格的列分组
< colgroup span=”” >< /colgroup >
5)border-spaing:单元格之间的间距
6)border-collapse:collapse;边框线的合并,1px的细线边框
7)Tab-spacing:表格的布局算法
当表格没有添加布局算法的时候,单元格的内容增多,表格可能会被撑大
取值:
1)aotu:自动,默认值
优点:只要内容增多,表格就会变大,灵活性比较好
缺点:每次刷新页面的时候都要从新计算页面的大小
2)Fixed:固定
优点:不用每次重新加载表格的宽度大小
缺点:灵活性不高
12、表单规则
含义:表单是用来收集用户信息的
基本语法:form
属性:
- action:提交跳转的地址
- method:提交的方法
- target:打开的方式
表单的控件:
input:类型
- text:单行文本输入框
- password:密码框
- submit:提交按钮
- reset:重置按钮
- button:普通按钮
- image:图片按钮(注意:input上的value属性,是值的意思)
- radio:单选框:默认单选框中存在共选问题,能一起选中,通过name属性,进行分组,checked属性,代表的是默认选中
- checkbox:复选框:能选中多个,复选框也有name属性,用来分组的,方便js获取,checked属性,代表的是默认选中
- file:文件域,文件上传
- hidden:隐藏域,隐藏一些值,直接上传,不会显示在浏览器中
2)select:下拉菜单类型
3)textarea:多行文本框
- cols属性:允许输入显示的列数
- rows属性:允许输入显示的行数
注意:在实际开发中基本是不用的,因为输入的内容几乎是不可控的
13、CSS属性:
1、widht/height
2、resize:重置尺寸
取值:
- both:水平和垂直都可以实现拖拽
- none:水平和垂直都不允许拖拽
- horizontal:水平拖拽
- vertical:垂直拖拽
4)其他类型
- 字段集和字段集标题
主要应用于区块划分
基本语法:
< fieldset >
< legend >文本标题< /legend >
< /fieldset > - 引入浮动框架集
14、宽度高度自适应
宽度自适应:
元素不设置宽度,就是宽度自适应。Width:aotu
在实际开发中大部分的宽度自适应是应用在块级元素中,行内元素的宽度自适应是被内容决定的,内容多,则宽大,内容少则宽小,
块级元素宽度自适应的特点:就是独占一行,站满父元素的一行
高度自适应:
元素不设置高度,就是高度自适应。Height:aotu
发现:
固定高度的布局不是很好,如果内容过少,下面会有很大的留白,如果内容过多,会产生溢出
使用高度自适应可以解决上面溢出的问题,但如果内容过少,就会出现头部和尾部紧挨在一起,页面布局不合理
Min-width:元素最小宽度
Max-width:元素最大宽度
Min-height:元素最小高度
Max-height:元素最大高度
15、伪元素选择器
- 选择器:first-letter:匹配第一个字符
- 选择器:first-line:匹配第一行
- 选择器:before{content:”文本”}:向元素内部正前方添加文本
- 选择器:after{content:”文本“}:向元素内部正后方添加文本
注意:追加进来的元素也是行内元素,但追加进来的元素没办法被选中
16、动态计算宽度高度
动态计算宽度与高度,是利用cale来计算剩余的宽度或者高度
两栏布局1:上半部分给固定的高度,下半部分给height:calc(100% - 上半部分的高)
两栏布局2:下半部分不给高度
三栏布局1:左右给固定的宽度,中间的width:calc(100% - 左右宽度的和),再对三格盒子进行浮动
三栏布局2:不给中间的盒子设置高度,再对应右边的盒子进行定位
三栏布局3:将中间的盒子与右边的盒子换位置
17、H5语义化标签
1)Header:头部
2)Footer:尾部
3)Section:主体区域
4)Main:主要内容区域
5)Article:独立文本区域
6)Aside:侧边栏
7)Nav:导航栏
8)Address:地址栏(倾斜)
9)Figure:独立区域
10)Figcaption:独立区域标题
=以上标签为块级元素=
11)Mark:标记
12)Video:视频
属性:
- src:路径
- Controls:控件能点击的区域
- Loop:循环播放
- Autoplay:自动播放
- Muted:静音
- Poster:延迟转圈刷新加载的效果
13)Audio:音频
属性与视频一样,但没有poster
优点:见名知意,可以通过标签的名字知道这个区域的功能和内容
CSS3属性
18、属性选择器
- [属性]:匹配页面中带有对应属性的元素
- [属性=”属性值“]:匹配页面中带有对应元素,并且有对齐属性值的元素
- [属性^=”值“]:匹配页面中带有对应元素,并且属性值以对应的值开始的元素
- [属性$=”值“]:匹配页面中带有对应元素,并且属性值以对应的值为结束的元素
- [属性*=”值”]:匹配页面中带有对应元素 ,并且属性值中包含这个值的元素
- [属性~=”属性值“]:匹配页面中,包含这个属性值的元素,属性值是一个列表
- [属性|=”值”]:匹配页面元素中,属性值是以对应的值,或者是对应值-开头的元素
19、结构伪类选择器
- :nth-child()查找第几个子元素
- :nth-of-type()匹配同类中第几个元素
- :nth-last-of-type()倒着查询同类中第几个元素
- :first-child()第一个子元素
- :last-child()最后一个子元素
- :not()否定伪类,排除括号里面的元素
- :root:根目录,一个页面有且只要一个根目录html
- :empty:空伪类,父元素里面是空的
- :only-child:只有一个子元素的元素,匹配的是子元素
- :terget:目标伪类,只要获取到目标焦点,就能实现对应的效果,需要配合一个锚点案例完成
20、关系选择器
- 后代选择器:空格
- 子代选择器:>
- 毗邻选择器:~
- 相邻选择器:+
21、UI状态伪类
主要应用于表单中
- :disables{}
- :enabled{}
- :focus{}
- :checked{}修改单选、复选框的选中状态
- ::selection
22、活动连接
主要应用于超链接上
- :link:访问前
- :visited:访问后
- :hover:划过
- :active:点击时
23、字体模块
浏览器里面能支持的字体:微软雅黑,黑体,宋体,隶书,楷体,等等
有一部分字体不支持:颜体,柳体,草书,行书,狂草等等,
我们需要使用浏览器的外部字体来进行引入
外部字体文件格式为: .ttf格式, 可以直接在字体网站中下载即可
如何引入
**@font-face{
font-family:起名字;
src:url(路径) ;
font-weight:normal;
font-style:normal;
}**
字体图标模块
什么是字体图标?原本是一个图,但是遵循文本所有的特点(加粗,大小,倾斜,颜色,间距,等等)
如何引入或者是如何下载字体图标呢?
字体也称之为iconfont
一般我们去阿里字体图标库里面下载
24、文本特性与盒子特效
文本的阴影:
text-shadow:h-shadow v-shadow blur clor
- h-shadow 水平方向阴影位置
- v-shadow 垂直方向阴影位置
- blur 模糊距离
- color 阴影的颜色
25、盒子特效模块
盒子阴影
**box-shadow:h-shadow v-shadow blur size inset**
- h-shadow 水平方向影子位置
- v-shadow 垂直方向影子位置
- blur 模糊距离
- size 尺寸大小
- inset 内阴影
26、多背景
多背景模块
一个元素中允许插入多个背景
属性:background:
取值,就是多个图,多个位置,多个取消平铺一起使用,多个图之间使用逗号隔开
27、圆角边框
圆角显示
-
border-radius:v1; ==================实现四个方向的圆角
-
border-radius:v1 v2; ===============实现四个方向的圆角,v1左上,右下; v2右上,左下
-
border-radius:v1 v2 v3; ============实现四个方向的圆角,v1左上; v2右上,左下; v3右下
-
border-radius:v1 v2 v3 v4; =========实现四个方向的圆角,v1左上; v2右上; v3右下,v4左下
以上属性,无论是取v1-v4;一下子实现了四个方向,问题:能否直接值实现一个方向 想法:border-radius:30px 0px 0px 0px 属性:单角属性;只设置一个角 border-垂直方向-水平方向-radius:数值px border-top-left-radius:左上角 border-top-right-radius:右上角 border-bottom-right-radius:右下角 border-bottom-left-radius:左下角 */ /* border-radius: 10px 30px 50px 100px; */ /* 单角属性 */ /* border-top-left-radius: 10px; border-top-right-radius: 50px; border-bottom-right-radius: 100px; border-bottom-left-radius: 200px; */
注意事项:
圆角边框属性,有边框的时候从边框位置计算弧度大小,没有边框的时候从内容位置计算弧度大小
十、多列布局
多列: 是按照对应的列数进行布局显示
1)coLumn-count:数值====划分列数
2)coLumn-width: 数值+px调整列宽,注意: 如果列的宽度小于默认的宽度,不会影响列数,如果列宽大于默认的宽度,则会影响列数
3)column-gap:数值调整列间距的,注意: 实际开发的时候几乎不会调整列间距,调整比较大的列间距影响布局美观性
4)coLumn-rule:2px solid gray; (就是类似于边框)
- column-rule-width
- column-rule-color
- column-rule-style
5)设置高度内容填充column-fill
balance;平衡,均衡auto;自动,会把第一列盛满之后然后,去撑满下一列
6)是否跨列clumn-span:
- none;不跨列
- aLl;跨所有列
28、标准盒子与怪异盒子
盒子模型总共分为两种
1)标准盒于模型(W3C 官方盒子型)2)怪异盒于模型(IE异盒子)
4个部分组成:
内容(width,height)
内边距(padding)
边框(border)
外边距(margin)
二者区别:
标准盒子模型: 是用来计算盒子大小占位的,在实际计算盒子大小的过程中,内边距和边框和外边距都会增加进来,把盒子撑大
怪异盒子模型:也是用来计算盒子大小占位的,在这里触发怪异盒子模型之后,会改变原有盒子模型大小计算方法; 触发完怪异盒子之后,盒子不会变大(注:添加外边距的时候,还是会变大的)如何触发怪异盒子
box-sizing:
- content-box; 标准盒子,默认值
- border-box; 触发了怪异盒子,从边框外边开始计算
计算大小;
标准
- 实际宽度=width+左右padding+左右border+左右margin实际高度-height+上下padding+上 下border+上 下margin
怪异
- 实际宽度=css.width(内容,内边距,边框)+左右的margin实际高度=css.height(内容,内边距,边框)+上下的margin
弹性盒子*
29、什么是弹性盒子:
- 含义: 当触发弹性盒子之后,修改我们子元素的一个排列方向,主要是为了修改子元素的排列问题:有的人把弹性盒子也称之为伸缩性的盒子,宽度变大,内容跟着变大;有的人把弹性盒子也称之为FLex布局,fLex弹性盒。
- 如何触发弹性盒子
触发弹性盒子之后,影响的是子元素
display:flex;
触发弹性盒子之后,有哪些特点
- 让于元素横向排列,与浮动没有关系;
- 只会影响于子元素,不会影响孙子辈分的元素
- 触发弹性盒子之后,会让子元素变成块元素; 改变元素类型
- 触发完弹性盒子之后,只有一个子元素,给子元素添加margin:auto的时候,然后会实现 -
- 水平垂直正居中;
学习弹性盒子里面的几个基础概念
- 容器: 容器就是我们的大盒子,又元素
- 项目: 项目就是我们的小盒子,子元素, 项目有可能变成容器
- 主轴: 触发完弹性盒子之后,子元素默认的排列方向
- 侧轴: 触发完弹性盒子之后,与主轴对立的方向
- 横轴: 就是我们的水平轴,就是X轴
- 纵轴: 就是我们的垂直轴,就是Y轴
容器上的属性
就是用来修饰父元素的
1)触发弹性盒子display:flex;
2)flex-direction:修改主轴方向
- row;----------主轴在横向,左向右显示(开始位置显示)(*)
- row-reverse;======主轴在横向,右向左显示(结束位置显示) 主轴的反方向排列主轴在纵向
- column;=========从上向下显示(开始位置显示)(*)主轴在纵向
- column-reverse-----从下向上显示(结束位置显示) 主轴的反方向排列
3)justify-content:调整主轴上面的间距(主轴上面对其方式)
- flex-start--------主轴的开始位置显示(没有分开)
- fLex-end--------主轴的结束位置显示(没有分开)
- center------------主轴的中间位置显示(没有分开)
- space-between======主轴两端对其,中间距离平分,首尾元素贴边显示(*)
- space-around=======主轴两端环绕,项目周围的距离是一样的(*)(注意: 项目与项目之间的距离是首尾项目距离容器之间距离的2 倍)
- space-evenly=========主轴间距平均,项目与项目,首尾项目距离容器之间距离相等
4)align-items:修改侧轴对齐方式
- flex-start====侧轴开始方向对齐
- flex-end=====侧轴结束方向对齐
- Center======侧轴中间位置对齐
- Baseline=====基线显示,基本不用
- Strrtch=====默认拉伸效果(需要给项目不设置高度才会显示
5)flex-wrap:折行显示
取值:
- Nowrap:不折行
- Wrap:折行显示
- Wrap-reverse:来回折行
注意:如果项目过多,触发弹性盒后,默认会被挤压不换行,折行完毕之后,会产生一个比较大的行间距。(原因:默认拉伸效果的元素,添加一个一个固定的高度)
6)align-content:解决行间距,调整行间距
取值:
- flex-start======侧轴开始位置显示(没有间距)
- flex-end======侧轴结束位置显示(没有间距)
- space-around===侧轴两端环绕(行与行中间的距离是首位行距离父元素之间的距离的2倍)
- space-between==侧轴两端对齐(首尾贴边显示)
- space-evenly===侧轴间距平分
项目上的属性
含义:用来修饰项目(子元素)上面的属性
1)order:调整显示顺序
取值:可正数也可以负数,取值越大越靠后,取值越小越靠前,默认为aotu可以理解为0
2)flex:占居剩余宽度或者高度
取值:1(取值等于1时是占居剩余的所有空间)
3)flex-shrink:不挤压,不折行
取值:0或者1
4)align-self:单独调整侧轴上的对齐方式
取值:
- flex-start====侧轴开始方向对齐
- flex-end=====侧轴结束方向对齐
- Center======侧轴中间位置对齐
- Baseline=====基线显示,基本不用
- Strrtch=====默认拉伸效果(需要给项目不设置高度才会显示
30、移动端
1)移动端:指可以移动的设备,主要包括:手机、ipad、kindle、电话手表
2)手机屏幕尺寸
- Iphone4========320*480
- Iphone5========320*568
- Iphone678=======375*667
- Iphone678s======414*736
- Iphone12por========390*844
3)设计稿大小
- Iphone4========640*960
- Iphone5========640*1136
- Iphone678=======750*1134
- Iphone678s======1242*2208
- Iphone12por========1170*1532
4)在编写代码的时候,需要使用的是:css像素=物理像素/dpr(dpr=设计搞像素/手机屏幕尺寸)
5)理想视口
理想化的状态,理想化视口;通过代码来实现的
< meta name=“viewport” content=“width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no” >
就能实现让你的pc端布局正常显示在手机屏幕中
width=device-width 宽度等于设备的宽度
minimum-scale=1.0 最小缩放比例为1.0
maximum-scale=1.0 最大缩放比例为1.0
initial-scale=1.0 初始缩放比例为1.0
user-scalable=no 是否允许用户缩放,不允许
6)布局中常用的单位
- px:固定单位。不会随着屏幕的大小而变化
- em:相对单位。相对自身或父元素的字体大小进行缩放
- rem:相对单位。相对于根目录的字体大小进行缩放
- vw:视口的宽度。100vw等于一个完整的视口宽度
- vh:视口的高度。100vh等于一个完整的视口高度
7)响应式布局
使用媒体查询技术来完成的:媒体查询技术,就是用来检测各种媒体设备,来针对不同的设备完成不同的布局展示前端开发工程师,我们使用媒体查询技术目前,只是用来检测屏幕的大小,来针对不同屏幕大小完成不同布局展示
基本语法:
每一个关键词前后必须带空格;小括号里面的语句不需要带分号
@media screen and (min-width:300px) and (max-width:500px) {
body{
background-color:red
}
}
解析: 使用media(媒体查询) 检测屏幕(screen) 并且要求(and) 屏幕最小宽度为(min-wdith:300px)最大度为(max-width:500px) (转译:屏幕宽度在300-500之间) 满足此条件的话,执行{}里面的语句
31、渐变、过渡与动画
线性渐变
1、含义:从一个颜色到另一个颜色的改变
2、属性:background:linear-gradient(to 方向词,col1,co12,co13)
- to 方向词;—到达某一个方向,从相反方向开始
- to bottom;=到达下面,从上面开始
- to left; =到达左边,从右边开始to right; =到达右边,从左边开始
- to top;=到达上面,从下面开始
径向渐变
1、含义:颜色从元素中心点开始,向四周进行发散
2、属性:background:radial-gradient(center,shape,size,col1,col2,col3)
3、center;====渐变中心(x,y)
渐变中心位于正中位置,
注意事项:默认的渐变中心位于元素正中位置,(对角线交汇处)默认是按照对角线进行渐变
4、shape;=====渐变形状
circle;=圆
ellipse;=椭圆(*)
注意事项: 如果元素是正方形,则渐变出现正圆;如果元素是长方形,则渐变出现椭圆
5、size;=======渐变形成区域的大小四种渐变大小展示四种情况:
- farthest-side;最远的边结束颜色渐变
- farthest-corner;最远的角结束颜色渐变
- closest-side;最近的边结束颜色渐变
- closest-corner; 最近的角结束颜色渐变
6、co11,co12,co13;=渐变的颜色
- col1;中心点颜色
- co13;结束位置处的颜色
7、重复的径向渐变:-repeating-radial-gradient()
过渡:transition(all 3s linear 5s)
- All:全部
- 过渡的时间
- 过渡类型:
-
- ease:逐渐缓慢
-
- ease-in:逐渐加速
-
- ease-oit:减速
-
- linear :匀速
-
- 贝塞尔曲线,更改效果
-
- 执行步骤:按照步骤执行
- 4、过渡延迟时间
动画:transform
1、平面移动:translateX()/translateY()/translate()
注意事项:如果translate属性值()里面跟了一个值的话,则只能实现 水平反向
为啥我们可以使用margin,还要学习平移函数:
a)margin:主要是用来调整位置间距的;translate用来做动画平移的
b)鼠标划过的时候,margin计算移动距离,没已从一次就相当于判断一次是否到达对应的距离平移果,是直接计算完毕直接移动过去对应的距离
2、旋转:
- rotateX(deg):以x轴进行旋转
- rotateY(deg):以y轴进行旋转
- rotate():以中心进行旋转
3、transform-origin:可以修改旋转、缩放的中心
4、缩放:
- scaleX(倍数):以x轴进行缩放
- scaleY(倍数):以y轴进行缩放
- -scale(倍数) :以中心进行缩放
5、倾斜:
skewX:沿x轴进行倾斜
skewY:沿y轴进行倾斜
skew:沿x轴和y轴进行倾斜
关键帧动画:
@keyframes name{
0%{}
100%{}
}
注意事项:默认样式和起始样式一抹一样的话,则不用写其实样式即可注意事项:如果只有开始和结束状态,使用谁都可以,但是如果有多重状态,需要使用百分比,百分比里面充分体现了关键帧的用处注意事项:默认的调用动画只执行1次,执行多次的时候,延迟只执行一次注意事项:如果你添加了alternate,反复执行的话,要么执行次数为偶数,要么就无穷尽的执行(infinite)
调用动画,调用的时候,使用animation即可(复合属性)animation:name 3s linear 5s 3 alternate
动画的名字-------name-----animation-name
动画执行时间-------3s------animation-duration
动画执行类型------linear------aniamtion-timing-function
动画延迟执行--------5s--------animation-delay
动画执行次数--------3----------animation-iteration-count
动画反复执行------alternate--------animation-direction
在hover里面使用: animation-play-state: paused;鼠标移入后可以暂停动画
32、网格布局
什么是网格
类似与表格布局,都是通过合并单元格的形式完成布局对应的布局,但与表格布局有很大的差别,
网格布局的基础至少
1)容器:父元素
2)项目:子元素
3)行:横向的为行
4)列:纵向的为列
5)单元格:横向的网格线与纵向的网格线交汇处为单元格
6)网格线:组成行和列的线条区域
触发网格布局
display:inline-grid(行内块网格)
display:grid(块级网格)
容器属性
1)划分行列属性
- grid-template-rows:划分行数
- grid-templat-clumns:划分列数
取值 -
- 数值+px:后面跟几个数值将划分几个单元格
grid-template-rows:100px;
grid-templat-clumns:100px
- 数值+px:后面跟几个数值将划分几个单元格
-
- 数值+%:
grid-template-rows:10%;
grid-templat-clumns:10%
- 数值+%:
-
- 匹配重复:repeat(次数,大小)
grid-template-rows:repeat(3,100px);
grid-templat-clumns:repeat(3,30%)
- 匹配重复:repeat(次数,大小)
-
- 占居剩余宽度高度的所有:auto
grid-template-rows:100px auto 300px;
grid-templat-clumns:repeat(3,30%)auto;
- 占居剩余宽度高度的所有:auto
-
- 按照比例划分:fr(用法与弹性和flex:1;类似)
grid-template-rows:1fr 2fr 3fr;
grid-templat-clumns:1fr 100px 100px 100px
- 按照比例划分:fr(用法与弹性和flex:1;类似)
-
- 自动划分行数和列数,需要配合repeat函数的使用
grid-template-rows:repeat(auto-fill,160px);
grid-templat-clumns:100px 100px 100px
- 自动划分行数和列数,需要配合repeat函数的使用
-
- 最小最大函数:minmax(最小数值,最大数值)
grid-template-rows:minmax(100px,500px);
grid-templat-clumns:100px 100px 100px
- 最小最大函数:minmax(最小数值,最大数值)
2)网格线的命名
横向为r1-rn,纵向为c1-cn
3)合并单元格:grid-template-areas(写在容器里面)
grid-area:(写在项目里面)
例如:div{
grid-template-areas:”a a b ”
“ a a c ”
“ d e f ”;
}
div>nth-child(1){
grid-area:a;
}
4)调整单元格排列方向:grid-auto-flow
取值:
- row:横向排列(默认值)
- Column:纵向排列
5)单元格内容对齐方式:place-items:垂直方向,水平方向
取值:
- start:开始方向
- end:结束方向
- center:居中
- stretch:拉伸
6)网格位于容器的对齐方式:place-content:垂直位置,水平位置
取值:
- start:开始方向
- end:结束方向
- center:居中
- stretch:拉伸
- space-around:间距环绕
- space-between:两端对齐
- space-evenly:间距平分
项目属性
一般情况下在实际开发中,使用网格线合并的方式是较多的
grid-row:开始网格线/结束网格线;===横向网格占位
grid-column:开始网格线/结束网格线;===纵向网格占位