CSS拓展

目录

一、@规则

二、Web字体和图标

三、SVG

四、BFC

五、常规流

常规流布局

块盒

---

一、@规则

1.@import "路径"：导入另一个css文件
2.@charset “utf-8”：告诉浏览器该css文件，使用的字符编码集是utf-8，必须写在第一行

二、Web字体和图标

Web字体：用户电脑上没有安装相应字体，强制让用户下载该字体
使用@font-face指令制作一个新字体
@font-face{
font-family:字体名
src:url(路径)
}

字体图标
iconfont.cn
用<i class="iconfont 图标地址"></i>引用

三、SVG

svg：scalable vector graphics,可缩放的矢量图
特点：

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

怎么使用
SVG可以嵌入浏览器，也可以单独成为一个文件

书写SVG代码
矩形：rectangle
<rect>         填充颜色：fill="" ,边框颜色：stroke="" ,位置用x,y设置

圆形 circle
<circle>       坐标位置用cx,cy设置

椭圆：ellipse
<ellipse>     坐标位置用rx,ry设置（rx表示长半径，ry表示短半径）

线条：line
<line>         线两点坐标用x1,x2，y1,y2表示

折线：polyline
<polyline>  points表示转折坐标处的坐标

多边形：polygon
<polygon>  points表示多边形各个点的坐标

路径：path
<path>       d=""
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
                   Z  = closepath

SVG模糊效果
<defs>和<filter>
用<feGaussianBlur>元素创建模糊效果
属性值：
in="SourceGraphic"这个部分定义了由整个图像创建效果
stdDeviation属性定义模糊量
例子：
<defs>
    <filter id="" x="" y="">
         <feGaussianBlur in="SourceGraphic" stdDeviation="" />
     </filter>
</defs>

SVG文本
<text>元素用于定义文本
<text x="" y="">文字部分</text>

SVG阴影
<feOffset>元素是用于创建阴影效果
用法于模糊效果feGaussianBlur一样

SVG渐变-线性
SVG渐变主要有两种类型：Linear和Radial
<linearGradient>元素用于定义线性渐变，必须嵌套在<defs>内部
SVG渐变-放射性
<radialGradient>元素用于定义放射性渐变，必须嵌套在<defs>内部

四、BFC

块级格式化上下文（BFC）：它是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局
BFC渲染区域：这个区域由某个HTML元素创建
一下元素会在其内部创建BFC区域：根元素，浮动和绝对定位元素，overflow不等于visible的块盒
具体规则：
创建BFC的元素，它的自动高度需要计算浮动元素
创建BFC的元素，它的边框盒不会与浮动元素重叠
创建BFC的元素，不会和它的子元素进行外边距合并

五、常规流

视觉格式化模型（布局规则）：页面中的多个盒子排列规则

视觉格式化模型，大体上将页面中盒子的排列分为三种方式：
1.常规流
2.浮动
3.定位

常规流布局

所有元素，默认情况下都属于常规流布局
总体规则：块盒独占一行，行盒水平依次排列

包含块（containing block）：每个盒子都要它的包含块，包含块决定了盒子的排列区域
绝大部分情况下：盒子的包含块，为其父元素的内容盒

块盒

1.每个块盒的总宽度，必须刚好等于包含块的宽度
宽度的默认值是auto，auto：将剩余空间吸收掉
margin的取值也可以是auto，默认值为0
当width 和 margin的值都为auto时，width的吸收能力强于margin
如宽度、边框、内边距、外边距计算后仍然有剩余空间，该剩余空间被margin-right全部吸收
在常规流中，块盒在其包含块中居中，可以定宽，左右margin设置为auto

2.每个块盒垂直方向上的auto值
height：auto，适应内容高度
margin：auto，表示值为0

3.百分比取值
padding、宽、margin可以取值为百分比
以上所有百分比相对于包含块的宽度
高度的百分比：包含块的高度是否取决于子元素的高度，设置百分比无效
                       包含块的高度不取决于子元素的高度，百分比相对于父元素的高度

4.上下外边距的合并
两个常规流块盒，上下外边距相邻，会进行合并
两个外边距取最大值