1. jpg图片格式，对色彩的信息保留好,清晰,颜色较多,产品类图片经常使用jpg格式
2. gif图片格式 实际经常用于一些图片小动画效果  透明背景 动画效果
3. png 结合jpg和gif的特点 如果想要切成背景透明的图片 选择png格式
4. psd 可以直接从上面复制文字,获取图片,测量大小和距离

PS切图

1. 图层切图 右击图层,导出为PNG   很多情况下需要将图层合并后导出
2. 切片切图  使用切片工具
3. PS插件切图 cutterman插件

CSS属性书写顺序

1. 布局定位属性:display/position/float/clear/visibility/overflow
2. 自身属性:width/height/margin/padding/border/background
3. 文本属性:color/font/text-decoration/text-align/vertical-align/white-space/break-word
4. 其他属性(CSS3):content/cursor/border-radius/box-shadow/text-shadow/background:liner-gradient.....

页面布局结构整体思路

1. 必须确定页面的版心(可视区)
2. 分析页面中的行模块,以及每个行模块中的列模块,页面布局第一准则
3. 一行中的列模块经常浮动布局,先确定每个列的大小,之后确定列的位置,页面布局第二准则
4. 制作HTML结构,结构永远最重要
5. 先理清楚布局结构

学成在线案例中的知识点

1. 实际开发中，不会直接使用链接a，而是用li包含链接(li + a) 的做法
2. 行内块元素之间会有缝隙
3. button会有默认边框
4. 可以专门写一个版心的类,当所需内容需要时,添加此类
5. 浮动的盒子不会有外边距合并的问题
6. 行高会继承,所以给父元素添加行高可以实现内容的垂直居中
7. vscode中 ctrl+g 实现内容的快速跳转
8. 将父元素的宽度变大,从而使得一行中能包含全部子元素,而不使最后一个掉到下一行
9. 子元素浮动,父元素没加高度,则最终其高度为0,所以要清除浮动

定位:  将盒子固定在某一个位置上   定位=定位模式(定位方式) + 边偏移(最终位置)

浮动可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列盒子

定位则是可以让盒子自由在某个盒子内移动位置后者固定在屏幕中某个位置,并且可以压住其他盒子

定位模式: position  static静态定位   relative  相对定位   absolute 绝对定位   fixed固定定位

边偏移:  top   bottom    left   right   相对与其父元素个边线的距离

1. 静态定位(static)  默认定位方式   标准流  无位偏移
2. 绝对定位(relative) 元素在移动位置时,是相对于它原来的位置 
   1. 相对于其原来的位置移动
   2. 原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它(不脱标,继续保留原本位置)
3. 绝对定位(absolute)  元素在移动时,相对于祖先元素
   1. 如果没有祖先元素或者祖先元素没有定位,则以浏览器为准进行定位
   2. 如果祖先元素有定位(相对 绝对 固定定位,则以最近一级的有定位的祖先元素为参考位置
   3. 绝对定位脱离原来的位置,脱标
4. 固定定位(fixed) 元素固定于浏览器可视区的位置,主要使用场景,可以在浏览器页面滚动时元素的位置不会改变
   1. 浏览器的可视窗口为参照点移动元素,跟父元素没有任何关系,不随滚条滚动
   2. 固定定位不再占有原先的位置,脱标
5. 粘性定位(sticky) 兼容性较差
   1. 以浏览器的可视窗口为参照点移动元素
   2. 粘性定位会占有原先的位置
   3. 必须添加top left right bottom中的一个才嫩生效

子绝父相

1. 子级绝对定位,不会占有位置,可以放在各自里面的任何位置,不会影响其他兄弟盒子
2. 父盒子需要添加定位限制盒子在父盒子内显示,父元素需要占有位置,因此是相对定位,子盒子不需要占有位置,则是绝对定位

定位叠放次序 z-index   使用定位布局时,可能会出现盒子重叠的情况,使用z-index 来控制盒子的前后顺序(x轴)

数值可以是正数 负数 0 默认为auto  如果属性值相同,按照书写顺序后来居上,数值越大,越上,  数值后没有单位,只有定位的盒子才有z-index属性

定位拓展

1. 绝对定位的盒子的居中    加了绝对定位的盒子不能通过  margin: 0 auto; 水平居中 同理也可以实现垂直居中

   .box{
       position: absolute;
       left:50%;
       margin-left:-100px;//盒子宽度的一半
       width:200px;
   }

2. 定位特殊特性
   1. 行内元素添加绝对或者固定定位,可直接设置高度和宽度
   2. 块级元素添加绝对或者固定定位,如果不给宽度或高度,默认大小是内容的大小
3. 脱标的盒子不会触发外边距塌陷  浮动元素,绝对定位和固定定位,不会触发外边距合并问题
4. 绝对定位(固定定位)会完全压住盒子  浮动元素只会压住下面标准流的盒子,不会压住文字(图片)  因此可以设置文字环绕效果(float)

当盒子中插入图片时，将图片的大小固定成盒子大小

页面布局总结      大部分html标签是盒子    通过CSS浮动,定位进行排列

1. 标准流  可以让盒子上下左右排列,垂直块级盒子显示
2. 浮动  多个块级盒子一行显示或左右对齐盒子,多个块级盒子水平显示
3. 定位,有层叠概念  如果元素自由在某个盒子内移动就用定位布局

元素的显示与隐藏  例如网站中的广告   本质:让一个元素在页面中隐藏或者显示出来

display    display: none;  隐藏元素  display: block;  除了转换为块级元素外,还有显示元素的意思   元素并没有删除  display: none;  隐藏元素后,不再占有原来的位置  搭配Js

visibility   visibility: visible;元素可视化   visibility: hidden; 元素隐藏    visibility 隐藏元素后,继续占有原来的位置

overflow  溢出   指定了如果内容溢出元素的框时,其会发生什么   默认值为 visible   hidden多出的内容隐藏    scroll 溢出部分显示滚动条   auto  在需要的时候显示滚动条  超出显示,不超出不显示

tips:有定位的盒子,慎用overflow: hidden;   因为它会隐藏多余部分

.box:hover .mass{}  //经过box类标签时,mass类的样式的改变

精灵图 为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度

核心原理:将网页中的一些小背景图像整合到一张大图中,这样服务器只需要请求一次即可

sprites的使用   移动背景图片的位置   background-position: x y;  一般为负值   使用精灵图需要精准测量位置

字体图标 iconfont  展示是图标,本质属于字体

优点:

1. 轻量级
2. 灵活性  本质是文字,可以随意改变颜色,产生阴影,透明效果,旋转
3. 兼容性好

但是不能替代精灵技术

结构和样式比较简单的小图标,就用字体图标   复杂的就用精灵图

字体图标下载  https://icomoon.io    https://www.iconfont.cn/

字体图标的引入

1. 下载包中fonts文件放入网页文件根目录下
2. 字体声明(在CSS样式中全局声明字体)
3. html标签内添加小图标 
4. 给标签添加CSS,指定字体

字体图标的追加   压缩包中selection.json  重新上传,进行更改

CSS三角的做法:

.box{
    width: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
    border: 10px solid transparent;
    border-top-color: pink;
}

CSS用户界面样式

1. 更改用户的鼠标样式 cursor   默认:default  小手:pointer  移动:move  文本:text  禁止:not-allowed
2. 轮廓线  outline   input {outline:none;} 取消表单轮廓
3. 防止拖曳文本域  resize  textarea{ resize:none;}文本域写到一行

vertical-align属性应用   使用场景: 经常用于设置图片或者表单(行内块元素)和文字垂直对齐  只针对于行内元素或者行内块元素有效

vertical-align: baseline(默认) | top(把元素顶端与行中最高元素的顶端对齐)  |  middle(把元素放置在父元素的中部)  |  bottom(把元素的顶端与行中最低的元素的顶端对齐)

解决定策的白色缝隙   行内块元素与文字基线对齐:  推荐:   1  添加  vertical-align:middle|top|bottom;  2  将图片转化成块级元素  display:block;

溢出的文字省略号显示

1  单行文本溢出显示省略号

/*1·先强制一行内显示文本*/
white-space: nowrap;
默认normal 自动换行）
/*2·超出的部分隐藏*/
overflow: hidden;
/*3.文字用省略号替代超出的部分*/
text-overflow: ellipsis;

2 多行文本溢出显示省略号    有较大兼容性问题  更推荐让后台人员来做这个效果

常用布局技巧

1 margin负值运用

1. 解决并排盒子之间的边框宽度加倍问题。 原理：让每个盒子压住前面的盒子，边框叠加。   相对定位会压住其他标准流和浮动

2. 鼠标经过某个盒子时,边框颜色

   /*如果盒子没有定位，则鼠标经过添加相对定位*/
   ul li:hover {
     position: relative;
     border: 1px solid orange;
   }
   /*若li都有定位，则使用 z-index 提高层级*/
   ul li {
     z-index: 1;
     border: 1px solid orange;
   }

2 文字围绕浮动元素  浮动元素不会遮挡文字

3 行内块巧妙运用  

4 CSS三角巧妙运用 

.box{
    width: 0;
    height: 0;
    border-color: transparent skyblue blue green;
    border-style: soild;
    border-width: 100px 50px 0 0;
}

CSS初始化  照顾兼容性

\5B8B\4F53  宋体