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
数值+px
只对英文生效，加大单词和单词之间的距离
列表属性
列表符号 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属性，属性值就为刚刚量取的相对位置（该值都为负值，没有特性情况）。