CSS总结（5）

CSS总结（5）

一、常用的图片格式

1、jpg图像格式

jpeg（jpg）图像格式对色彩的信息保留较好，高清，颜色较多，我们产品类的图片经常用jpg格式的

2、gif图像格式

gif图像格式最多只能存储256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果，实际经常用于一些图片小动画效果

3、png图像格式

png图像格式是一种新兴的网络图形格式，结合了gif和jpeg的优点，具有存储形式丰富的特点，能够保持透明背景，如果想要切成背景透明的图片请选择png格式

4、PSD图像格式

psd格式是ps的专用格式，是一种设计稿文件，里面可以存放图层，通道，遮罩等多种设计稿，对我们前端人员来说最大的优点是我们可以直接从上面复制文字，获得图片，还可以测量大小和距离

二、PS切图技能（前端必备）

1、图层切图

• 最简单的切图方式：选中图层右击，点击“快速导出为png”
• 很多情况下我们需要合并图层再导出：选中需要合并的图层（shift加选），点击图层菜单选择合并图层（快捷键ctrl+e），再右击快速导出为png

2、切片切图

• 利用切片工具手动划出选中图片，点击文件菜单—导出—存储为web设备所用格式—选择我们需要的图片格式—存储

3、PS插件切图

• Cutterman是一款运行在PS中的插件，能够自动将你需要的图层进行输出，以替代传统的“导出web所用格式”以及使用切片工具进行挨个切图的繁琐流程
• 使用方法很简单

三、CSS属性书写顺序（重点）

• 布局定位属性： display、position、float、clear、visibility、overflow
• 自身盒子属性： width、height、margin、padding、border、background
• 文本属性： color、font、text-decoration、text-align、vertical-align、white-space、break-word
• 其他属性： content、cursor、border-radius、box-shadow、text-shadow、background:linear-gradient

四、定位

1、定位组成

• 定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子
• 定位 = 定位模式 + 边偏移
• 定位模式决定元素的定位方式，通过 position 属性来设置，常用的四个值：
static 静态定位、relative 相对定位、absolute 绝对定位、fixed 固定定位
• 边偏移就是定位的盒子移动到最终位置，有 top、bottom、left、right 四个属性：
top 顶端偏移量，定义元素相对于其父元素上边线的距离
bottom 底端偏移量，定义元素相对于其父元素下边线的距离
left 左侧偏移量，定义元素相对于其父元素左边线的距离
right 右侧偏移量，定义元素相对于其父元素右边线的距离

2、静态定位static（了解）

• 静态定位是元素默认的定位方式，无定位的意思
• 语法： 选择器 { position：static； }
• 静态定位按照标准流特性摆放位置，它没有边偏移
• 静态定位在布局时很少用到

3、相对定位relative（重要）

• 相对定位是元素在移动位置的时候，是相对于它原来的位置来说的（自恋型）
• 语法： 选择器 { position：relative； }
• 移动后原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来位置）
• 相对定位最典型的应用就是给绝对定位当爹的

4、绝对定位absolute（重要）

• 绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）
• 语法： 选择器 { position：absolute； }
• 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）
• 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置
• 绝对定位不再占有原先的位置（脱标），飘的比浮动高

5、固定定位fixed（重要）

• 固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变
• 语法： 选择器 { position：fixed； }
• 固定定位是以浏览器的可视窗口为参照点移动元素，不随滚动条滚动
• 固定定位不再占有原先的位置，也是脱标的
• 固定定位小技巧：固定在版心右侧位置
算法如下：
让固定定位的盒子left：50%，走到浏览器可视区（也可以看做版心）的一半位置，再让固定定位的盒子margin-left：版心宽度的一半距离，多走版心宽度的一半位置

6、子绝父相

• 子绝父相 这个口诀非常重要，意思是：子级是绝对定位的话，父级要使用相对定位
• 子级使用绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子
• 父盒子需要加定位限制子盒子在父盒子内显示
• 父盒子布局时，需要占有位置，因此父盒子只能是采用相对定位
• 当然，子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝等其它情况也会遇到，但是非常的少

7、粘性定位sticky（了解）

• 粘性定位可以被认为是相对定位和固定定位的混合。sticky 粘性的
• 语法： 选择器 { position：sticky； top：像素值}
• 粘性定位以浏览器的可视窗口为参照点移动元素（固定定位的特点）
• 粘性定位占有原先的位置（相对定位的特点）
• 必须添加top、left、right、bottom 其中一个边偏移属性才有效，像素值代表着：当浏览器拖动使得盒子到边缘距离为多少像素值是就固定在可视窗口上了
• IE不支持

8、定位叠放次序z-index

• 在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序（z轴）
• 语法： 选择器 { z-index：数值； }
数值可以是正整数、负整数或零，默认是auto，数值越大，盒子越靠上
如果数值相同，则按照书写顺序，后来居上
数值后面不能加单位；只有定位的盒子才有z-index属性

9、绝对定位的盒子居中算法

• 加了绝对定位的盒子不能通过 margin：0 auto；水平居中
• 算法如下：
让绝对定位的盒子 left/top：50%，再设置 margin-left/top：-盒子宽度的一半

10、定位的特殊特性

• **绝对定位、固定定位也和浮动（都是脱标的）**类似
行内元素添加绝对定位或者固定定位，可以直接设置高度和宽度（脱标了就可以直接给）
块级元素添加绝对定位或者固定定位，如果不给高度或者宽度，默认大小是内容的大小（脱标）
脱标的盒子不会触发外边距塌陷（浮动元素、绝对定位、固定定位）
• 绝对定位、固定定位会完全压住盒子
浮动元素不一样，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字和图片
但是绝对定位、固定定位会压住下面标准流所有的内容，完全压住盒子

五、网页布局总结

• 一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己的专门用法
• 标准流：可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局
• 浮动：可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局
• 定位:定位的最大特点就是有层叠的概念,就是可以让多个盒子前后叠压来显示,如果想让元素自由地在某个盒子内移动就使用定位布局

六、元素的显示与隐藏

1、display显示隐藏（重点）

• display 属性用于设置一个元素应如何显示
• display：none；隐藏对象，隐藏后不再占有原来的位置
• display：block；除了转换为块级元素之外，同时还有显示元素的意思
• 这一部分在后期应用十分广泛，搭配JS可以做很多的网页特效

2、visibility显示隐藏

• visibility 属性用于指定一个元素应当可见还是隐藏
• visibility：visible；元素可视
• visibility：hidden；元素隐藏
• visibility 隐藏元素后，继续占有原来的位置，与 display 有区别，display的应用更多

3、overflow溢出显示隐藏

• overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么
• overflow：visible；溢出的部分仍然可见，会超出元素框
• overflow：hidden；隐藏掉溢出的部分
• overflow：scroll；显示滚动条，不论溢不溢出
• overflow：auto；溢出了就显示滚动条，不溢出就不显示滚动条
• 如果有定位的盒子，请慎用 overflow：hidden 因为它会隐藏超出的多余的部分