前端学习笔记

媒体查询和bootstrap @media （媒体查询） { 选择器 {样式} } min-width最小 max-width最大 1，@media写入指令媒体查询 2，括号里写入查询条件 3，多个媒

移动适配rem 屏幕宽度不同，网页元素尺寸不同 媒体查询------写在style里，媒体特性里无空格 @media （媒体特性 width：375px） { ​ 选择器 { ​ css属性 ​ .b

flex布局 修改主轴方向属性flex-direction， row 行，水平 column 列，垂直 row-reverse 行，从又到左 column-reverse 列，从下到上 flex-di

移动端特点与flex布局 谷歌浏览器有个切换按钮可以切换手机和电脑的调试方式 手机模拟情况可以选择手机型号，一般默认自适应模式。 屏幕尺寸 PPI（像素密度）：单位英寸内的物理像素点的个数，值越大越清

iconfont/平面转换 以字体形式存在于浏览器中 iconfont的使用方法 ------link引用iconfont.css文件----- 1.&xx； 在body内容处写入字符实体 style

空间转换和动画 语法：transform:translate3d(x,y,z)； 取值：像素值或者百分比 透视 属性（给附有3d属性的最近一级父级添加）视距（400px~1200px一般）： pers

装饰，溢出部分显示效果。 属性名：overflow。 属性值：visible默认值，溢出部分可见。hidden溢出部分隐藏。scroll无论是否溢出，都显示滚动条。auto根据是否溢出，自动显示或隐藏

网页与网站的关系—————————— 网页：网站中的每一页。 网站：提供特定服务的一组网页的集合。 SEO三大标签 SEO（search engine optimization）：搜索引擎优化 作用：

精灵图———————————————— 多张小图合成一个大图片，叫做精灵图。 优点：减少服务器发送次数，减轻服务器压力。原理：将本来只发送很多次的图片变成只发送一次。 用法：1，在css里设置一张图的

盒子 盒子分为4个部分，内容区域（content），边框区域（border），内边距区域（padding），外边距（margin）。 width和height决定了内容边框的大小。 border边框粗

定位----————————---———— 网页常见布局方式，标准流，浮动，定位。 定位可以解决盒子与盒子之间的层叠问题。定位层级最高，可以叠在其他普通盒子上面。可以让盒子始终定位在网页的某一个地方。