寒假第四次周报

svg

svg: scalable vector graphics，可缩放的矢量图

1. 该图片使用代码书写而成
2. 缩放不会失真
3. 内容轻量

怎么使用

svg可以嵌入浏览器，也可以单独成为一个文件

xml语言，svg使用该语言定义

    <img src="imgs/weixin.svg" alt="">
    <p></p>
    <embed src="imgs/weixin.svg" type="image/svg+xml">
    <object data="imgs/weixin.svg" type="image/svg+xml"></object>
    <iframe src="imgs/weixin.svg"></iframe>

书写svg代码

矩形:rect

1. width
2. height
3. x：左上角离左边的距离
4. y：左上角离上边的距离
5. fill:填充颜色
6. stroke：边框颜色
7. stroke-width：边框宽度

圆形：circle

1. cx:圆心横坐标
2. cy：圆心纵坐标
3. r:半径
4. fill:填充颜色
5. stroke：边框颜色
6. stroke-width：边框宽度

椭圆：ellipse

1. rx:椭圆与x轴平行的半轴长度
2. ry：椭圆与y轴平行的半轴长度

线条：line

1. x1
2. x2
3. y1
4. y2

折线：polyline

1. points:分别写出几个点的横纵坐标
2. stroke：边框颜色
3. stroke-width：边框宽度
4. fill:填充颜色(none)第一个和最后一个点相连与折线所形成的封闭图形

多边形：polygon

1. points:分别写出几个点的横纵坐标
2. stroke：边框颜色
3. stroke-width：边框宽度

路径：path

属性：d
M = moveto（起点）
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc（弧线）

A
半径1
半径2
顺时针旋转角度
小弧（0）或大弧（1）
顺时针（1）逆时针（0）

Z = closepath(闭合图形)

例子

画太极图

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background:#ccc">
    <path fill="#000" d="M250 50 A100 100 0 0 1 250 250 A100 100 0 0 0 250 450 A200 200 0 0 1 250 50"/>
    <path fill="#fff" d="M250 50 A100 100 0 0 1 250 250 A100 100 0 0 0 250 450 A200 200 0 0 0 250 50"/>
    <circle cx="250" cy="150" r="30" fill="#fff"/>
    <circle cx="250" cy="350" r="30" fill="#000"/>
</svg>

数据链接

data url

如何书写

数据链接：将目标文件的数据直接书写到路径位置

语法：data:MIME,数据

意义

优点：

1. 减少了浏览器中的请求

请求

响应

减少了请求中浪费的时间

2. 有利于动态生成数据

缺点：

1. 增加了资源的体积

导致了传输内容增加，从而增加了单个资源的传输时间

2. 不利于浏览器的缓存

浏览器通常会缓存图片文件、css文件、js文件。

3. 会增加原资源的体积到原来的4/3

应用场景：

1. 但请求单个图片体积较小，并且该图片因为各种原因，不适合制作雪碧图，可以使用数据链接。

2. 图片由其他代码动态生成，并且图片较小，可以使用数据链接。

base64

一种编码方式

通常用于将一些二进制数据，用一个可书写的字符串表示。

浏览器兼容性

问题产生原因

• 市场竞争
• 标准版本的变化

厂商前缀

比如：box-sizing， 谷歌旧版本浏览器中使用-webkit-box-sizing:border-box

• 市场竞争，标准没有发布
• 标准仍在讨论中（草案），浏览器厂商希望先支持

IE： -ms-
Chrome，safari: -webkit-
opera： -o-
firefox: -moz-

浏览器在处理样式或元素时，使用如下的方式：
当遇到无法识别的代码时，直接略过。

1. 谷歌浏览器的滚动条样式

实际上，在开发中使用自定义的滚动条，往往是使用div+css+JS实现的

2. 多个背景图中选一个作为背景

css hack

根据不同的浏览器（主要针对IE），设置不同的样式和元素

1. 样式

IE中，CSS的特殊符号

• *属性，兼容IE5、IE6、IE7
• _属性，兼容IE5~IE6
• 属性值\9，兼容IE5~IE11
• 属性值\0，兼容IE8~IE11
• 属性值\9\0，兼容IE9~IE10

IE5、6、7的外边距bug，浮动元素的左外边距翻倍

2. 条件判断

渐近增强 和 优雅降级

两种解决兼容性问题的思路，会影响代码的书写风格

• 渐近增强：先适应大部分浏览器，然后针对新版本浏览器加入新的样式

书写代码时，先尽量避免书写有兼容性问题的代码，完成之后，再逐步加入新标准中的代码。

• 优雅降级：先制作完整的功能，然后针对低版本浏览器进行特殊处理

书写代码时，先不用特别在意兼容性，完成整个功能之后，再针对低版本浏览器处理样式。

caniuse

查找css兼容性

caniuse.com

居中总结

居中：盒子在其包含块（父元素内容盒）中居中

行盒（行块盒）水平居中

直接设置行盒（行块盒）父元素text-align:center

常规流块盒水平居中

定宽，设置左右margin为auto

绝对（固定）定位元素的水平居中

定宽，设置左右的坐标为0（left:0, right:0），将左右margin设置为auto

实际上，固定定位（fixed）是绝对定位（absolute）的特殊情况

单行文本的垂直居中

设置文本所在元素的行高，为整个区域的高度

行块盒或块盒内多行文本的垂直居中

没有完美方案

设置盒子上下内边距相同，达到类似的效果。

绝对定位的垂直居中

定高，设置上下的坐标为0（top:0, bottom:0），将上下margin设置为auto

样式补充

display:list-item

设置为该属性值的盒子，本质上仍然是一个块盒，但同时该盒子会附带另一个盒子

元素本身生成的盒子叫做主盒子，附带的盒子称为次盒子，次盒子和主盒子水平排列

涉及的css：

1. list-style-type（可继承）

设置次盒子中内容的类型

2. list-style-position

设置次盒子相对于主盒子的位置

3. 速写属性list-style

清空次盒子

list-style:none

图片失效时的宽高问题

如果img元素的图片链接无效，img元素的特性和普通行盒一样，无法设置宽高
除非设置为行块盒或者块盒

行盒中包含行块盒或可替换元素

行盒的高度与它内部的行块盒或可替换元素的高度无关，只与字体大小有关

text-align:justify

text-align:

• left: 左对齐
• right：右对齐
• center：居中
• justify：除最后一行外，分散对齐（若最后一行也要，则加after，display：inline-block，width：100%；content：“ ”；）

制作一个三角形

div{
            
            border-left-color: transparent;
            border-bottom-color:transparent;
            border-top-color:yellowgreen;
            border-right-color:transparent;
            width: 0px;
            height: 0px;
            border-width:100px;
            border-style: solid;
        }

direction 和 writing-mode

开始 start -> 结束 end
左 left -> 右 end

开始和结束是相对的，不同国家有不同的习惯

左右是绝对的

direction设置的是开始到结束的方向(ltr,rtl)

writing-mode：设置文字书写方向

utf-8字符

一个文字对应一个数字
css中用/加十六进制数，不能用实体字符。