HTML的概念：超文本标记语言 HTML的基本组成
结构 html/xhtml w3c(万维网联盟)制定规范 样式 css w3c(万维网联盟)制定规范 行为 js ECMA(欧洲电脑网商联合会) xhtml: 可扩展的标记性语言 xhtml和html的区别？？
xhtml的单标签后面需要加 / XHTML的标签必须是小写 XHTML属性值必须使用双引号 新建带有.html后缀的文件 英文状态下 按! 按tab 生成基本结构
<!DOCTYPE html>
< html> < head> < metacharset = " UTF-8" > < title> </ title> </ head> < body> </ body> </ html> 标记/标签/元素：放在尖括号中的第一个单词 双标签/双标记：成对出现的标签 单标签/空标记：单独出现的 属性：跟在标签后面，用空格隔开
属性和属性值直接用等号连接 属性值必须用引号引起来 属性可以是多个，多个之间用空格隔开 注释 ctrl+/ 取消注释 ctrl+/ 保存 ctrl+s 撤销 ctrl+z 反撤销 ctrl+y 全选 ctrl+a 布局标签
列表标签
无序列表 < ul> < li> < b> </ b> </ li> < li> < ahref = " " > </ a> </ li> < li> </ li> </ ul> 快速生成列表 ul里面10个li ul>li*10
花括号里面写内容： ul>li*10{哈哈哈$} $代表从1开始的数字 应用场景：网页的导航/新闻列表/商品列表 有序列表 < oltype = " a" start = " 2" > < li> </ li> < li> </ li> < li> </ li> </ ol> type: 排序方式 1/A/a/I/i start: 排序的起始值，必须是数字 自定义列表 < dl> < dt> </ dt> < dd> </ dd> < dd> </ dd> < dd> </ dd> </ dl> 应用场景：1.上面的图片，下面是文字 2.左边是图片，右边是文字 表格: 主要用在后台系统展示数据，一般不用在前台网页布局
table 表格
边框 border=“数字” 像素px 宽度 width=“数字” 高 height=“数字” 表格水平位置 align
left 默认值 center 居中 right 居右 单元格之间的间距 cellspacing=“数值” 一般设置0 去掉单元格之间的间距 调整内容到单元格的距离 cellpadding=“数值” 快速生成表格 table>tr10>td 8{$} 10行8列的表格 tr 行
水平对齐方式 align
left 默认值 center 居中 right 居右 垂直对齐方式 valign
middle 居中 默认值 top 居上 bottom 居下 td 列
水平和垂直的对齐方式和tr一样 列合并 colspan 行合并 rowspan 合并的步骤：
补全表格，有几行几列就生成几行几列的表格 观察属于行合并还是列合并，哪个不同合并哪个 确定属性之后，观察合并几个单元格，属性对应的值就是几 将合并的属性放到合并的起始的单元格 注释掉多余的单元格 层叠样式表 样式表
内联/行内样式表：加在哪个标签，哪个标签才生效
给标签生成一个style的属性 style的属性值为css属性:css属性值;css属性:css属性值; 内部样式表 外部样式表 css属性
宽度 width:数值px必须有单位 0可以不加单位 高度 height:数值px必须有单位 0可以不加单位 字体颜色 color:英语单词 背景色 background-color: 英语单词 层叠 内联样式表< div style =" width : 200px; height : 100px; background-color : red; color : blue; " > </ div> 内部样式表
在head标签里面，生成一个style的双标签 在style的标签里面写对应的css样式 <style>
div {
width : 200px;
height : 200px;
background-color : pink;
}
</style>
外部样式表
新建一个css文件夹 在css文件夹的下面新建一个.css后缀的文件 在html文件的head标签里面生成一个link单标签 < linkrel = " stylesheet" href = " css/外部样式表.css" type = " text/css" > css语法选择器和声明组成 每条声明以分号结尾 最后一条声明可以省略分号 样式表的权重(优先级)
内联>内部 内联>外部 内部和外部,根据就近原则，离得近的优先显示 样式表的选择
内联样式表：css属性较少的时候，还需要考虑优先级的问题 内部样式表：写小案例 外部样式表：整页开发，结构样式分离 选择器
选择器的权重 标签命名
英文单词并且语义化
驼峰命名
短线连接
下划线连接
伪类选择器 在某种状态下所显示的样式 爱恨原则 l ov e ha te
超链接:link{} 链接未点击之前 超链接:visited{} 链接访问之后 任何元素:hover{} 鼠标划过该元素 超链接:active{} 鼠标按下的状态 后代选择器可以是多个选择器 选择器之间可以跨级，但是必须存在后代关系 群组选择器 选择器的权重
内联样式 1000 id选择器 100 class选择器/伪类选择器 10 标签选择器 1 继承样式 0 选择器权重特点
权重值越高，优先显示该样式 后代选择器的权重由每个选择器的权重值相加 群组选择器的权重值为选择器本身的权重值 权重值相同的，就近原则 继承样式的权重值是最低的 字体属性
字体大小 font-size 一般情况是偶数，并且一般不低于10px
数值+px 数值+em 默认值1em=16px 父元素有字体大小，参考的是父元素的字体大小 数值+rem 默认值 1rem=16px 根元素(html)有字体大小时，参考根元素的字体大小(移动端) 字体加粗 font-weight
字体倾斜 font-style
字体类型 font-family
中文，加引号 英文，一个单词不用引号，多个单词要加引号引起来 多个字体类型用逗号隔开，浏览器会依次检索，有该字体直接显示，找到最后都没有该字体时，显示默认字体 文本属性
颜色 color
颜色单词 十六进制 #f1f1f1 rgb(0-255,0-255,0-255) rgb(241, 241, 241); 文本水平对齐方式 text-align
left 左对齐 默认值 center 居中 right 居右 justify 两端对齐 内容向两边，加大中间的间距 行高 line-height
数字：字体大小的倍数 数值+px 应用
多行文本：加行高可以增大行和行之间的距离 单行文本：将行高和元素的高度设置成一样，实现垂直居中 文本修饰 text-decoration
underline 下划线 overline 上划线 line-through 删除线 none 去掉下划线t: 文本缩进 text-indent
数值+px 只对独占一行的元素才生效 可以设置负数 缩进两个词：设置text-indent:2em; 参考当前元素的字体大小 字符间距 letter-spacing
数值+px 中文：加大字和字之间的距离 英文：加大字母之间的距离 单词之间的距离 word-spacing
列表属性
列表符号 list-style-type
disc 实心圆 squre 方块 circle 空心圆 none 去掉列表符号 层叠
通过不同的选择器选择同一个标签的时候，设置了相同的属性，但是设置了不同的属性值，根据选择器的权重值，权重值高的优先显示，如果没有冲突的样式，正常显示 大小写转换 text-transform
首字母全部大写 capitalize 全部小写 lowercase 全部大写 uppercase 默认值 none 复合写法 font
列表属性
list-style-type:disc/square/circle/none list-style:none 去掉列表符号 边框属性
背景属性
背景颜色 background-color 背景图 background-image:url() 背景图是否重复 background-repeat
repeat 重复 repeat-x 在x轴重复 repeat-y 在y轴重复 no-repeat 不重复 背景图的位置 background-position: x轴 y轴;
数值+px 向右和向下为正数,反之,可以设置负数 关键字
水平方向:left/center/right 垂直方向:top/center/bottom 只设置一个值的情况下,第二个值默认为居中 复合写法 background: 背景颜色 背景图 背景图是否重复 背景图的位置; 顺序不固定
展开的写法写到复合写法的后面,不然会被复合写法覆盖掉 应用场景:让纵向排列的元素横向排列 float
none 默认值 left 左浮动 right 右浮动 浮动的特点
从父元素的边缘开始挨个排列 浮动元素会脱离文档流,浮动元素会遮挡后面的兄弟元素,但是不会遮挡文字 浮动元素的宽度如果超出父元素的宽,后面的元素会掉到浮动设置的位置 浮动元素会影响后面的兄弟,但是不会影响到前面的兄弟 img插入的图片占位, 图片作为网页的内容 背景图不占位, 修饰性的图片用背景图插入 矩形工具(一次只能切一个)
选中需要的图片 ctrl+c ctrl+n 弹框中按回车 ctrl+v 粘贴图片 菜单项 文件->导出->快速导出为png格式 切片工具(可以切多个)
选中多个需要的图片 菜单项 文件->导出->存储为web所用格式 弹框中根据需求修改图片格式,完成点击存储 存储的时候文件资源器的,图像选择 所有用户切片 在对应的文件下面会生成images的文件夹 内容区(content) 显示文字/图片/视频等的区域，宽高确定内容区 内填充(padding)
padding值的设置
一个值 padding:10px 四周 两个值 padding:10px 20px; 上下 左右 三个值 padding: 10px 20px 30px; 上 左右 下 四个值 padding: 10px 20px 30px 40px; 上 右 下 左 单方向 padding-方向(left/right/top/bottom): 数值+px; padding值的特点
会撑大盒子,如果不想被撑大的话，要在原来宽高的基础上，减去对应方向的padding值 padding值不能设置负数 背景图/色可以在padding区域显示 可以用来调整内容区到盒子边缘的位置 边框(border) 边框也会撑大盒子，设计图从边框里面开始量取 外边距(margin)
margin值的设置和padding值是一样的 margin值的特点
margin值不会撑大盒子，但是会影响到旁边的元素 margin可以设置负数 背景图和背景色不在margin区域显示 调整自己和别的元素之间的距离 margin:auto; auto: 浏览器会根据当前窗口的宽，减去元素的宽，将剩余的空间进行一个自动的平均分配，实现左右的居中，垂直是不生效的 margin的bug
margin的传递：给元素的第一个子元素 添加上边距 的时候，边距会错误加在父元素的身上
使用padding 给父元素添加边框 给父元素或者是该元素添加浮动 给父元素添加overflow:hidden(溢出隐藏) margin的重叠：给上面的元素设置下边距，给下面的元素设置了上边距，边距会产生重叠，并且以两个值的最大值显示，左右的间距是不会出现重叠的
只给一个盒子添加外边距 设置line-height(行高)和font-size(字体大小)值为一样 vertical-align:垂直方向对齐方式 (只对图片生效)
baseline 基线 默认值 bottom 底线 可以解决bug middle 中线 可以解决bug top 顶线 可以解决bug 应用
解决图片底部三像素的留白 调整小图标和文字对齐的方式 内联元素(inline) span b strong i em a sub sup img
宽高不生效，由内容决定 在同一行显示 盒模型属性padding的左右生效，上下显示不准确;margin的左右显示准确，上下不准确 块级元素(block) h1-h6 div p ul li dl dt dd ol form table
宽高生效 独占一行 盒模型属性都生效 一般作为容器去包裹其他元素,p标签一般不包裹块级元素，也不包裹自己 行内块元素(inline-block) input (img)
元素类型转换 display
block 块 inline 内联 inline-block 内联块 none 隐藏 隐藏之后不占位
visibility: hidden; 隐藏元素 隐藏之后会占位 解决横向排列的元素之间的空格
将标签代码写到同一行 添加浮动 给元素添加一个父元素，设置font-size:0;然后单独设置该元素的字体大小 内联元素添加浮动之后，会转换成块级元素 overflow(overflow-x/overflow-y)
visible 默认值 显示 hidden 溢出隐藏 scroll 显示滚动条 auto 内容没有溢出正常显示，溢出显示滚动条 单行文本 溢出显示省略号
设置宽度 设置不换行 white-space:nowrap 设置溢出隐藏 overflow:hidden 设置文本溢出显示省略号 text-overflow:ellipsis 给元素设置样式之后，该元素的后代都会具有该样式 可以继承
字体类：font-size(字体大小)font-weight(字体加粗) font-style(字体倾斜)font-family(字体类型) 文本类：color(文本颜色) text-indent(缩进) line-height(行高) letter-spacing(字符间距) word-spacing(单词之间的距离) text-align(文本对齐方式) 列表属性：list-style 不可继承
text-decoration(文本修饰) width height float padding margin border static 默认值 relative 相对定位
参考物：自己本身 移动距离：left/right/bottom/top:数值+px 特点
移动之后依然占位 定位元素的层级要比普通元素的层级要高 aboslute 绝对定位
参考物(包含块)：有定位属性(除static属性之外)的祖先元素,设置绝对定位的元素，会一层一层向上找有定位属性的祖先元素，谁有定位属性，就参考谁去移动，如果找到body也没有找到有定位属性的祖先元素的话，就参考body，也就相当于浏览器的窗口 移动距离：left/right/bottom/top:数值+px 特点
脱离文档流，会遮挡后面元素的文字 给元素设置绝对定位后，margin:auto会失效 给内联元素添加定位后，内联元素会变成块级元素 给元素不设置宽，自适应宽度的时候，加了绝对定位，自适应会失效，需要重置元素的宽width:100% 应用场景
元素水平垂直居中1 < divclass = " box1" > < divclass = " box2" > </ div> </ div> .box1 {
width : 600px;
height : 400px;
background-color : pink;
margin : 0 auto;
position : relative;
}
.box2 {
width : 200px;
height : 200px;
background-color : cornflowerblue;
position : absolute;
left : 50%; 当前参考元素的宽度的50%
margin-left : -100px; 向左拉取当前盒子宽度的一半
top : 50%;
margin-top : -100px; 向上拉取当前盒子高度的一半
}
元素水平垂直居中2 .box2 {
width : 200px;
height : 200px;
background-color : cornflowerblue;
position : absolute;
left : 0;
right : 0;
bottom : 0;
top : 0;
margin : auto;
}
absolute 绝对定位
应用场景
元素的水平垂直居中 有重叠效果 < div> < imgsrc = " img/1.webp" alt = " " > < ul> < liclass = " first" > </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> </ ul> </ div> div {
width : 800px; 设置宽高和图片一样的宽高
height : 300px;
border : 10px solid black;
position : relative;
}
ul {
background-color : blueviolet;
position : absolute; 参考div去定位
bottom : 30px;
right : 50px;
}
二级菜单
二级菜单添加绝对定位属性 定位元素 的层级关系 z-index
auto 默认值 数值 数值越大，层级越高，在最上面显示，可以为负数 宽度自适应,参考父元素
宽度不设置 设置百分比 最大宽度(max-width)和最小宽度(min-width) 高度自适应
固定定位 position:fixed;
参考物 浏览器窗口 移动距离 left/right/bottom/top 特点
不会跟随滚动条进行滚动 脱离文档流 margin: auto;失效 宽度自适应会失效，需要重新设置宽度 应用场景
粘性定位 position:sticky;
参考物 浏览器窗口 移动距离 top 特点
未达到top值之前，普通元素，达到top值之后类似于固定定位 实现在同一个页面不同板块之间的跳转 利用a标签的href属性和id名(必须是id名)进行联系 < ahref = " #box" > </ a> < divid = " box" > </ div> 给父元素添加最后一个孩子,内联元素 给父元素添加第一个孩子 内联元素 选中第一个字符 选中第一行 <style>
@import url(路径) ; 区别
@import只能引入css文件，link不只可以引入css文件 @import的css文件会在结构加载完成之后，才开始加载，link是结构和样式同时加载 @import只能在ie5以上支持，link都支持 表格的新增
标题标签 caption
caption-side:top(默认)/bottom 标题的位置 < table> < caption> </ caption> </ table> 列标题 th < tr> < th> </ th> < th> </ th> < th> </ th> </ tr> 行分组
表头 可选thead 表体 可以有多个tbody 表尾 可选tfoot 列分组 colgroup
< colgroup> < colspan = " 1" class = " first" > < colspan = " 2" class = " second" > < colspan = " 1" class = " third" > </ colgroup> 单元格之间的距离：border-spacing：数值+px 一般设置0。加在表格身上 合并边框 border-collapse:collapse; 加在表格身上 表格固定 table-layout:auto(自动)/fixed(固定) 加在表格身上
垂直对齐方式 vertical-align: baseline/top/bottom/middle 可以在单元格中生效 表单的新增
单选框 name的属性必须有，且值必须一样才能够互斥，checked 默认选中 disabled 禁止选中< inputtype = " radio" name = " sex" checked > < inputtype = " radio" name = " sex" > 多选框 checked 默认选中 disabled 禁止选中 < inputtype = " checkbox" checked disabled > < inputtype = " checkbox" > 下拉列表 selected:默认选中 < selectname = " height" id = " " > < optionvalue = " 1" > </ option> < optionvalue = " 2" selected > </ option> </ select> 多行文本域
禁止用户缩放：给textarea 添加 resize:none; < textareaname = " " id = " " > </ textarea> 文件上传 < inputtype = " file" > 扩大表单选中范围 label
< labelfor = " man" > < inputtype = " radio" name = " sex" id = " man" > </ label> 表单字段集 fieldset
< fieldset> < legend> </ legend> < inputtype = " text" > </ fieldset> 块级格式化上下文(独立渲染的区域) 触发条件
float的值为left/right position的值为absolute/fixed display的值inline-block/table-caption/table-cell/flex(弹性盒)/inline-flex overflow的值为hidden/scroll/auto 特性
在BFC的区域，浮动元素的高度也会计算在内（解决高度塌陷） BFC的区域不会与浮动盒子重叠 （两栏布局） width: calc(100% - 300px) 计算符号两边一定要有空格 需要过渡的属性：transition-property：css属性 过渡持续时间：transition-duration：数值+s/数值+ms 1s=1000ms 过渡延迟时间：transition-delay:数值+s/数值+ms 1s=1000ms 过渡执行效果：transition-timing-function：linear(匀速) 复合写法：transition:需要过渡的属性 过渡持续时间 过渡延迟时间 过渡执行效果;（顺序不固定，出现一个时间或者两个时间的话，默认第一个时间为执行时间）
transition: all 1s; 过渡所有的属性，过渡时间为1s background-color:rgba(0-255,0-255,0-255,0-1)
线性渐变：background-image/background:linear-gradient(渐变方向,颜色1,颜色2……)
方向 设置方向一定要加 to
to bottom; 向下 background-image: linear-gradient(to bottom, red, yellow, blue, green);
to top; 向上 to left 向左 to right 向右 to right top 右上角 to right bottom 右下角 to left top 左上角 to left bottom 左下角 数值+deg background-image: linear-gradient(45deg, red, yellow, blue, green);
重复性的线性渐变 background-image/background: repeating-linear-gradient(渐变方向,颜色1,颜色2……) .box2 {
background-image : repeating-linear-gradient ( red 10px, blue 50px) ;
font-size : 50px;
line-height : 50px;
}
径向渐变 background-image/background:radial-gradient(方向,颜色值1,颜色值2……)
方向：和背景图的位置取值一样，设置方向一定要加浏览器前缀，否则不生效 background-image : -webkit-radial-gradient ( left top, red, yellow) ;
重复性的径向渐变 background-image: repeating-radial-gradient(方向, 颜色值1,颜色值2……); background-image : repeating-radial-gradient ( blue, red 20px) ;
问题：利用外部样式表写过渡属性可能会在页面初始的时候就有过渡效果 解决：给整个结构也就是html的标签下面添加 位移
z轴的位移 transform:translateZ(数值+px) 三个轴都位移 transform:translate3d(x轴,y轴,z轴) 旋转
x轴的旋转 transform:rotateX(数值+deg) y轴的旋转 transform:rotateY(数值+deg) 三个轴都旋转 transform:rotate3d(a,b,c,数值+deg) 0或者1 0表示不旋转 1表示旋转 缩放
z轴缩放 transform:scaleZ(数值) 0不显示 1正常 0-1缩小 >1放大 三个轴都缩放 transform:scale3d(x轴,y轴,z轴缩放) 景深：persepctive:数值+px 近大远小 形成3d空间 transform-style:flat(2d平面)/preserve-3d(3d空间)属性加在变形元素的父元素身上 背部隐藏：backface-visibility: hidden; 使用透明度可以实现元素从无到有的过程 第一种 rgba() div {
width : 200px;
height : 200px;
background-color : rgba ( 165, 42, 42, 1) ; 透明度从1
transition : all 1s;
}
div:hover {
background-color : rgba ( 165, 42, 42, 0) ; 过渡到0
}
第二种 opacity div {
width : 200px;
height : 200px;
background-color : brown;
opacity : 1; 透明度从1
transition : all 1s;
}
div:hover {
opacity : 0; 过渡到0
}
区别：rbga不会模糊到里面的文字，opacity会影响里面的文字 属性选择器 权重和class选择器一样 为10 方括号前面可以加标签名，限制名可以是自定义属性
[属性名=“属性值”] 属性名和属性值匹配 [属性名^="值元素 [属性名]{} 属性"] 属性值以某个值开头 [属性名$=“值”] 属性值以某个值结尾 [属性名*=“值”] 属性名中包含某个值 伪类选择器 权重值和class选择器一样 为10 0010
层级选择器
后代选择器 选择器 选择器{} 子代选择器 选择器>选择器 只能选择的孩子 相邻的后面兄弟 选择器+选择器{} 相邻的后面的兄弟们 选择器~选择器{} 新增标签 特点：语义化
新增的语法
文档声明DOCTYPE可以小写 单标签不写结尾标签 可以省略的结尾标签 li、dt、dd、p、option、colgroup、thead、tbody、tfoot、tr、td、th 可以省略的标签 html、head、body、colgroup、tbody 多媒体标签
音频 < audiosrc = " zy/梦然-少年.mp3" controls autoplay muted loop > </ audio> < videowidth = " 800" height = " " > < sourcesrc = " myvideo.mp4" type = " video/mp4" > </ source> < sourcesrc = " myvideo.ogg" type = " video/ogg" > </ source> < sourcesrc = " myvideo.webm" type = " video/webm" > </ source> </ video> 视频 < videosrc = " zy/zyx.mp4" controls autoplay loop poster = " zy/7.jpg" > </ video> < audiocontrols > < sourcesrc = " horse.ogg" type = " audio/ogg" > < sourcesrc = " horse.mp3" type = " audio/mpeg" > </ audio> 标准盒模型：box-sizing:content-box
盒子宽度 = 内容区的width+padding的左右+border的左右+margin的左右 怪异盒模型：box-sizing:border-box ie8以下不支持
盒子宽度 = 内容区的width + margin的左右 父元素
形成弹性盒 display:flex; 主轴对齐方式 justify-content
flex-start 默认值 主轴起点 flex-end 主轴终点 center 主轴中心 space-between 两端对齐 space-around 中间空隙是两边的2倍 space-evenly 平均分配 交叉轴 align-items
stretch 默认值拉伸 (主轴是横向的话，看到该效果需要去掉子元素的高度，子元素的高会拉伸到和父元素一样高，主轴是纵向的话，看到该效果需要去掉子元素的度，子元素的宽会拉伸到和父元素一样宽) flex-start 交叉轴的起点 flex-end 交叉轴的终点 center 交叉轴的中心 主轴的方向 flex-direction
row 默认值 横向从左向右 row-reverse 横向从右向左 column 纵向从上到下 column-reverse 纵向从下到上 换行 flex-wrap
多行 之间的对齐方式 align-content
stretch 拉伸 flex-start 整个盒子的起始 flex-end 整个盒子的终点 center 主轴中心 space-between 多行内容两端对齐 space-around 多行内容中间空隙是两边的2倍 space-evenly 多行内容平均分配 子元素
子项在交叉轴的对齐方式 align-self 重写父元素中交叉轴对齐方式(align-items)
stretch 拉伸 flex-start 交叉轴的起点 flex-end 交叉轴的终点 center 交叉轴的中心 排列顺序 order
放大比例 flex-grow
压缩 flex-shrink
1 默认值 压缩 0 不压缩 滚动导航的实现
设置子项不压缩 flex-shrink:0; 给父元素设置溢出显示滚动条 overflow-x:auto; 子项的宽度 flex-basic:数值+px 复合属性 flex:flex-grow(0) flex-shrink(1) flex-basic(auto);
父元素 {
display : flex;
justify-content : center;
align-items : center;
}
盒子阴影 box-shadow: x轴偏移 y轴偏移 阴影模糊大小 阴影大小 阴影颜色 阴影位置
eg: box-shadow: 10px 10px 20px 10px green inset; 文字阴影 text-shadow:x轴偏移 y轴偏移 阴影模糊大小 阴影颜色
eg: text-shadow: 10px 10px 10px blue; 圆角 border-radius:
一个值 四周 两个值 对角 三个值 左上 对角 右下 四个值 顺时针 背景图的大小 background-size: 宽度 高度
百分比 可能会变形 像素 关键字
cover 背景图会不断放大 直到充满整个盒子，可能会出现裁切的情况 contain 背景图会不断的放大 碰到边缘后就停止放大，可能会出现留白 background-attachment:srcoll/fixed(固定) 背景图不会随滚动条滚动 置换元素：浏览器会根据标签以及标签内的属性值来显示不同的内容 非置换元素:除了置换元素 为啥img或者input有的标签可以设置宽高？？因为标签属于置换元素 普通字体图标的使用
彩色图标的使用
引入js文件 < scriptsrc = " download/font_2135748_v7l4jintarp/iconfont.js" > </ script> 添加通用样式 .icon {
width : 1em;
height : 1em;
vertical-align : -0.15em;
fill : currentColor;
overflow : hidden;
}
使用 只需要改id名就行 < svgclass = " icon" aria-hidden = " true" > < usexlink: href= " #icon-tubiaov-daochushangchuan-" > </ use> </ svg> 概念：根据不同的分辨率，显示不同的样式 主要修改的样式
优点：适配性好 缺点：
增大工作量 出现大量的隐藏元素，导致代码量冗余 一般用在小网站 @media 设备类型 and (媒体特性){}
设备类型
all 所有的设备 screen 显示器/笔记本/移动端设备 print 打印机 媒体特性
min-width(比最小值大)/max-width(比最大值小) 媒体特性的值后面不要加分号 多个媒体特性之间用and连接 and两侧必须有空格 <style>
@media screen and ( min-width : 1000px) {
body {
background-color : red;
}
}
@media screen and ( min-width : 500px) and ( max-width : 999px) {
body {
background-color : blue;
}
}
@media screen and ( max-width : 499px) {
body {
background-color : pink;
}
}
</style>
< metaname = " viewport" content = " width=device-width, initial-scale=1.0,user-scalable=no" > + 视口 viewport
- 布局视口：css所作用的区域，默认是980px;
- 可视视口：所看到的区域
- 完美视口/理想视口：将布局视口的宽和可视视口的宽设置为一样 width=device-width
+ 参数
- width = device-width：宽度等于当前设备的宽度
- initial-scale： 初始的缩放比例（默认设置为1.0）
- minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
- maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
- user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）
设备参数
屏幕尺寸：对角线的长度 分辨率：宽度或者高度容纳像素的个数 PPI: 每英寸显示的像素点的个数 物理像素: ps量取的值 逻辑像素：css设置的值 逻辑像素比(dpr) = 物理像素/逻辑像素 pc端ps量取多少值就设置多少的值，移动端，因为iphone4的出现，出现了视网膜高清屏，1个css像素对应的就不是1个物理像素，物理像素和逻辑像素就产生了不对等的情况
320设计图 dpr=1 750/640设计图 dpr=2 1080/>750 dpr=3 单位
百分比 em/rem
em: 字体大小参考父元素的字体大小 rem: 参考根元素(html)的字体大小
一般将根元素的字体大小设置为100px html{font-size:100px} vw(设备宽度)/vh(设备高度) 根元素单位转换
设计图宽度750/设备宽度 375px 1rem = 26.667vw 设计图宽度640/设备宽度 320px 1rem = 31.25vw 百分比布局(流式布局) rem布局(等比缩放布局)
观察设计图大小，确定dpr,在ps图像-》图像大小，修改图像所对应的宽度(根据量取的值/dpr) 设置HTML标签的font-size:26.667vw或者24.154vw。
100vw = 设备分辨率 ( 设计图 / dpr ) 414 1vw = 414px / 100 = 4.14px 100px = 100/1vw(4.14px) = 24.154vw 在设计图里正常测量，测量出来的结果是以px单位结尾的，我们写代码的时候要把这个px换算成rem，此时px和rem的比例就是1rem:100px 混合布局(百分比+rem) 1.确定装载图片的容器，并为其设置宽高（图标的宽高）。 2.为装载图片的容器设置background-image属性。 3.测量要使用的图标在雪碧中的相对位置。 4.为装载容器设置background-position属性，属性值就为刚刚量取的相对位置（该值都为负值，没有特性情况）。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
