重绘不一定需要重排，重排必然会导致重绘

CSS是什么? 层叠样式表

一、网页布局

通栏：始终占满整个屏幕宽度

外围结构不需要设置宽度，或者用100%（跟随父元素）

版心：固定宽度，放网页核心内容（ps中ctrl+r量取）

站点文件：首页（index.html）

二、样式

1、外部样式

（1）、html链接关联CSS名称<link href="index.css" rel="stylesheet" / type=""text/css>

顶部图标`<link href="img8.jpg" rel="icon"/>`

说明：

link需要放在<head></head>之间

rel:用于定义文档关联，如stylesheet、icon等

type:定义文档类型

权重：

1、同一个样式中表中优先级和书写的顺序有关，后写的优先级高

2、内部样式和外部样式表的优先级也和书写顺序有关，后写优先级高（另.内联优先级最高）（2）、<style type=”text/css“>(不推荐)</style>

2、内部样式(不推荐)

A、在body创建要修饰的对象，如

段落

B、在head标签创建一个

C、在标签里面，书写想要修饰的样式

规范:命名不能中文,数字开头,一般采用字母和字母+数字(可以用_和-)；起名不要用关键字（所有标签名、属性都是属于关键字）

优秀命名方式：次首字母大写驼峰命名和蟒蛇命名法以及-字符链接命名

header头部区域；nav导航区域；banner区域；con内容区域；links链接区域；footer底部区域

3、行内样式（内联样式）

<标签 style="属性1:值1;属性2:值2; ……"></标签>

三、CSS选择符

（1）类型选择符

用法：所有html标签都可当做类选择符用，body,div,p,h1,a,img,em,strong,span......

作用：

a:统一某一个类型的标签的时候

b:想清除某个标签默认样式的时候

img {vertical-align: top;}

(2) id选择符

用法:<标签名 id="名字"></标签名>

css中 #取的名字{}

特点：id是惟一的，一个页面只能出现一次；主要用于外围结构构建（最外面的几个div）、

提示标签

锚点<标签 id=“名字”></标签>

（3）类选择符（前端用的最多）

用法：<标签 class="起的名字"></标签名>

css中： .自己取的名字{样式；}

特点：一个标签可以用多个名字，多个标签也可用相同名字

（4）包含选择符

用法：父选择符父选择符子选择符{子元素样式；}

特点：懒得给子元素取名，且某一个父元素有名字时

（5）群组选择符

用法：选择符1，选择符2，选择符3{统一样式}

（6）通配符

用法：页面中所有标签

特点：用于css开头清除内外边距

padding:0px;margin:0px;

（7）伪类选择器

用法：

a:link {color: red;} /\* 未访问的链接状态 \*/

a:visited {color: green;} /\* 已访问的链接状态 \*/

a:hover {color: blue;} /\* 鼠标滑过链接状态 \*/

a:active {color: yellow;} /\* 鼠标按下去时的状态 \*/

特点：常用于a超链接，且顺序不可更改

另：hover亦可用于其他标签，如div:hover(鼠标悬停)

cursor属性

1 、auto ：标准光标

2 、default ：标准箭头

3、 crosshair 光标呈现为十字线。

4、 pointer（手形光标）

5、 text 此光标指示文本。

6、 wait ：等待光标

权重的总结：

内联样式表： 1000 （跟元素最接近）

id选择符： 0100 （id唯一）

（伪）类选择符：0010（用户定义行为）

标签选择符： 0001 （标签范围过广，权重较低）

通配符：0000 （标签范围最广，所以权重最低）

后代（包含）选择符：权重时父元素和子元素权重的和

群组选择符：权重还是组中各选择符自身的权重

!important 权重最高的！！！

注意：权重相同时，按照后写的执行，写在后面的样式会覆盖掉前面的样式

总结：

!important > 内联样式表 >id选择符 >(伪)类选择符 >标签选择符 >通配符

后代（包含）选择符的权重需要对父元素和子元素的权重相加

群组选择符的权重就是本身，不会发生变冉

层叠性：1、开发者模式>读者模式>浏览器模

2、权重 3、根据顺序进行优先级排列

四、CSS修饰文本相关的样式

1、font-size 默认文字大小是16px（设置偶数，且不低于12px，ps中文本的高）

pt 磅一般用于印刷邻域 9pt == 12px em相对大小，根据父元素决定

2、color 文本颜色单词、值、rgba（255、255、255、0.8）

3、font-weight：bold 加粗，bolder更加粗 normal正常

4、font-style:italic 斜体字 oblique 倾斜的文字

5、font-family："宋体"，"楷书" 放在""里面

6、line-height：单行文本垂直居中对齐 line-height：数值和height的数值一样就行

7、line-align：center 水平居中 justify 两端对齐 right left

8、text-indent: 2em;首行缩进,取负值表示悬挂缩进（输入框前空字符）

9、text-decoration：none 去下划线；underline下划线 line-through删除线 overline 上划线

10、letter-spacing： px 字符间距：

11、word-spacing： px 单词间距

12、控制文本大小写：text-transform:capitalize首字母大写 uppercase全大写 lowercase全小写

五、列表属性

1、去掉列表符号 list-style:none（常用作去掉列表原有属性，用背景图替换列表符号）

2、list-style-image:url() 用图片做列表符号

3、list-style-position 控制列表符号位置

属性outside、inside(列表符号在盒子外边、里边)

4、控制列表符号 list-style-type:circle\ square（空心圆、正方形）disc 实心圆;

六、边框属性

1、border:30px solid red;（复合写法）边框默认在元素外边

border：none(去除边框) 0

拆分：border-width: 边框大小

border-color: 边框颜色

border-style: 边框类型(solid实线、dashed虚线、dottedd点状、double双线、none

2、单独给一个方向设置边框

border-left(right、top、bottom)：30px solid red;

3、属性值对应的边框位置border-width/style/color:

1个值：四周； 2个值上下左右； 3个值上左右下； 4个值上右下左

4、画三角形：元素宽高为0px，然后加上四周边框，最后把不要的边框颜色变透明transparent

5、圆角边框： border-radius: 20px 20px 20px 20px ;

七、背景图

1、复合写法background:skyblue url(../images/b.jpg) no-repeat fixed;

2、背景图片 background-image:url();

特点：

A、背景图默认是平铺的

B、背景图默认是不占位置的

C、背景图的显示范围由容器大小决定

background-size:cover;可以让背景图完全盖住容器，但是部分背景图看不全

3、背景颜色 background-color;

4、背景图相关的大小 background-size：横向的px 纵向s的px；

5、背景图的位置 background-position：水平的垂直的；

水平的 left或者right或者center

垂直的 top或者bottom或者center

位置的移动可以取负数(数值)，默认是0px 0px

6、背景图的平铺设置 background-repeat：repeat/no-repeat;（不重复）

7、背景图的依附设置 background-attachment：fixed；背景图的固定

1.背景图原点的改变（背景的起始点）

background-origin:

padding-box 背景图填充框的相对位置

border-box 背景图边界的相对位置

content-box 背景图内容的相对位置

2.背景的裁切：

background-clip:

padding-box

border-box

content-box

3.背景图的大小：

background-size:

属性值：

固定大小 100px 200px

百分比 100% 100%

cover 成比例放大，直到铺满整个容器

contain 成比例放大，当背景图的宽度或者高度到达最大边界就停止

八、脱离文档流（元素浮动）

使用场景：想要竖着的盒子横过去的时候，可以用

float：left；给左浮动向左飘

float：right；给右浮动向右飘

特点：

1、一旦一个元素浮动了之后，浮动了之后，就飘着了，不再占据浏览器的位置，如果后面的容器没有浮动的话，会跑上去，占据位置，但是后面容器里面的内容，会环绕显示。

2、多个容器同时浮动，会飘着横向排列

3、浮动引起的高度塌陷：在一个包含结构里面，如果父元素没有设置高度，所有的子元素又浮动了，所有的子元素会悬空飘着不占据位置，对于父元素来说里面现在就是空的，那么这个现象叫做高度塌陷解决方法：

A、给父元素设置高度

B、给父元素添加overflow：hidden；（原因是因为触发了父元素为BFC）

九、页面中元素间距

1、外间距margin

使用场景：这个间距对于该元素来说是外面的时候用，常用于同级元素产生边距

（1）、单一方向：

margin-top 外上

margin-bottom 外下

margin-left 外左

margin-right 外右

(2)、数值与位置(可以取负值)

margin:10px四周; margin:10px 20px 上下左右; margin:10px 20px 30px 上左右下

margin:10px 20px 30px 40px 上右下左

（常见bug）

a、上方元素的margin-bottom与下方元素的margin-top会重合，浏览器取较大值

b、父子结构中给子元素加的margin-top会传递给父元素，造成两个元素的位置一起下移，

解决方法：给父元素设置overflow：hidden；（溢出隐藏），此时父元素上边还会留在原来位

置，但是会被子元素拉长高度

2、内填充padding

使用场景：间距对于该元素来说是里面的时候用，常用于父子结构div，添加在父元素上

padding是添加在原有盒子大小之上的所以会把盒子给撑大

解决：a、父盒子宽高-padding=预期宽高

b、box-sizing：border-box；（盒子模型为边框盒子）

(1)、单一方向

同margin

(2)、数值与位置（padding不能取负值）

同margin

十、文本溢出属性

单行文本溢出设置

width: 200px;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

多行文本显示省略号

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3;

text-overflow: ellipsis;

overflow: hidden;

white-space: 空白空间的处理

whiteSpace:'normal', wordBreak: 'break-all', wordWrap: 'break-word'

normal 默认值,多余空白空间只会保留一个

pre 空白会被浏览器保留

pre-wrap 保留一部分的空白空间,可以正常换行

pre-line 合并空白字符，只会显示一个，正常换行

nowrap 文本不会换行，直到遇到
标签为止

overflow:内容溢出

visible 默认值，内容不会被修剪，超出的内容会在盒子外面

hidden 内容会被裁剪，并且不可见

scroll 内容会被裁剪，但是浏览器会显示滚动条，可以看其余的内容

auto 内容会被裁剪，但是浏览器会显示滚动条，可以看其余的内容

overflow-y：auto 纵向滚动条

inherit 从父元素继承的overflow属性

text-overflow:文本溢出

clip 不显示省略号，直接裁剪

ellipsis 显示省略号

十一、元素类型

元素划分：

1、块状元素（display:inline;转换为内联元素）

特点：可添加宽高、独占一行、矩形显示常作为容器

如：div -最常用的块级元素

form - 交互表单

ol、ul 、dl -和 li-dt-dd 列表及其元素

table-tr-td 表格及行-单元格

h1 -h6 大标题

p - 段落

hr - 水平分隔线

fieldset - 表单字段集

colgroup-col - 表单列分组元素

2、内联元素（display:block;转换为块元素，同浮动）

特点：不可添加宽高、一行逐个显示、不支持(padding-top、margin-top/bottom)

如： a –超链接（锚点）

span - 常用内联容器，定义文本内区块

input - 输入框

label - 表单标签

img - 图片

b - 粗体(不推荐)

i - 斜体（不推荐）

br - 换行

em -斜体强调

strong - 粗体强调

sub - 下标

sup - 上标

textarea - 多行文本输入框

u - 下划线

select - 项目选择

3、可变元素（display:inline-block转换成内联块状元素）

特点：根据布局流的规则显示成块或者内联

如：

元素转换display:block/inline/inline-block/none/list-item

其中：

display:block;转换为块元素，同浮动

display:inline;转换为内联元素

display:inline-block；转换成内联块状元素

display:none；隐藏元素 （nav中悬停显示）

display:list-item；li默认值，带有列表符号

display:inline-block;引起的空隙问题

父元素添加：font-size:0px（换行空格占一个字符）

a:hover{

/\* 鼠标悬停 背景色改变成和ul的底边框一样的颜色 \*/

background:orangered;

}

鼠标悬停在a标签上它下面的em 隐藏

a:hover em {

    display:none;

}

鼠标悬停在a标签上它下面的 span显示

a:hover span {

display:inline;

}

十二、置换元素

置换元素：浏览器根据标签和属性，来决定元素显示的内容

1. 转存失败，建议直接上传图片文件

例如：浏览区根据img的src属性来显示内容，

非置换元素：

在浏览器中，大多数的标签都是非置换元素，直接将内容展示在浏览器上

十三、嵌套规则

1、标签本身嵌套规则

ul li

ol li

dl dt dd

2、块状元素可以嵌套块状或内联元素（p段落标签除外）

3、内联元素不可以嵌套块状元素（a超链接标签除外）

4、元素一般不能自己嵌套自己（div除外）

十四、图片问题

浏览器在解析转存失败，建议直接上传图片文件的时候，会向下多解析3像素。

解决方法：给img设置img{vertical-align：top;} 垂直靠上对齐

display:block; //解决3px空隙的问题



object-fit：一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。

fill 默认，不保证保持原有的比例，内容拉伸填充整个内容容器

contain 保持原有尺寸比例。内容被缩放

cover 保持原有尺寸比例。但部分内容可能被剪切

none 保留原有元素内容的长度和宽度，也就是说内容不会被重置

scale-down 保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们 两个之间谁得到的对象尺寸会更小一些

initial 设置为默认值

inherit 从该元素的父元素继承属性

十五、元素定位

postition:定位属性

方法：1、给目标元素添加position属性；2、给参照物添加position属性；3、确定坐标值

position值：

1、absolute：绝对定位（用于包含结构父级元素，无父级则为浏览器窗口-移动端画版块）

2、relative:相对定位（用于包含结构子元素）

不会触发脱离文档流、参照物为元素本身用于微调

3、fixed:固定定位（用于侧边固定或者居中小广告）

脱离文档流、参照物为浏览器窗口

4、sticky:黏性定位（顶部导航nav黏着上边框）

等于relatice和fixed的结合。没有超出临界值就是relative，超出之后就是fixed

5、static：静态定位(默认值，不识别top、right、bottom、left)

包含块：父级元素用绝对定位position:absolute 子级元素用相对定位position:relation

层级控制：z-index：数值（数值越大层级越高）

浏览器窗口居中：（居中小广告、强制浏览页面）

方式一：

position:fixed;

top:50%;

left:50%;

transform: translate(0%, -50%);

width: fit-content;

box-sizing: content-box;

方式二：

position:fixed;

top:0;

bottom:0;

left:0;

right:0;

margin:auto;

b、子元素在父元素中居中：

父元素：position:relative;

子元素：

position:absolute;

top:0;

bottom:0;

left:0;

right:0;

margin:auto;

c、banner图:

img{

position:absolute;

left:50%;

margin-left:-图片宽度的一半;

}

父元素：position:relative;

十六、锚点

锚点：超链接的一种，在单一页面内，不同位置的跳转

语法：

<标签 id="锚点名称">\</标签>

<a href="#锚点名称"></a>

搭配 html { scroll-behavior: smooth;} 实现平滑滚动

目标伪类选择器：一般搭配锚点、超链接进行使用

选择符：target{ }

锚点盖楼：左边用position:fixed固定导航区域，然后用锚点进行跳转

<a href="#box1">1</a> <div id="box1">1</div>

十七、宽高自适应

宽度自适应：当元素是块状元素不设置或者设置为100%，当前元素跟随父元素发生变化

高度自适应：不设置height,或者height:auto,高度由内容撑开

1、最小高度： min-height:内容高度≤min-height时显示min-height高度

内容高度≥min-height时显示内容高度

2、全屏页面

子元素的高度随父元素的发生变化

父元素必须有高度，子元素高度100%

需求：

让一个元素来覆盖整个浏览器窗口

html,body{

height:100%;

}

3、高度塌陷：

如果子元素都发生了脱离文档流，父元素没有设置高度，父元素会出现高度塌陷

解决高度塌陷的方法：添加

overflow:hidden;

缺点：overflow：hidden;溢出隐藏，会隐藏定位元素越边部分

C.在浮动元素的后面添加一个空的元素，并且设置样式为clear:both;

clear属性值：left right both（两者都）

隐藏元素：

display:none；

彻底隐藏，不占据页面空间

visibility:hidden;

隐藏元素，占据空间

十八、伪对象选择器

：after{ } 必须搭配content:""属性来使用在元素后面追加内容,

一般搭配包含结构的定位来扯开距离

#footer .xiaoa::after{

    content: "";

    display: block;

    height: 12px;

    width: 1px;

    background: #7a7a7a;

    position: absolute;

    left: 55px;

    top: 8px;

}

：before{ }必须搭配content:""属性来使用 在元素后面追加内容

：first-letter{ } 定义第一个字符的样式

：first-line{ } 定义第一行的样式

目标伪类选择器:一般搭配锚点、超链接进行使用

选择符：target{}

十九、BFC-块级格式化上下文

触发条件：

html根标签、float不为none、overflow:hidden、position：absolute和fixed、

display:inline-block\flex\inline-flex...

双飞翼、两栏自适应布局：两边固定宽并浮动，中间宽不固定并触发BFC

BFC区域和浮动区域不会重叠！！！

二十、浏览器前缀

chrome：-webki-t firefox:-moz- ie:-ms- 欧朋：-o-

css3设置的模式：

兼容模式

标准模式

文本阴影：

text-shadow:属性值1 属性值2 属性值3 属性值4；

属性值1：阴影的水平方向

属性值2：阴影的垂直方向

属性值3：阴影的大小

属性值4：阴影的颜色

二十一、背景色渐变

线性渐变：从一个方向到另一个方向的渐变

语法：

background:linear-gradient(direction,color-stop1,color-stop2....);direction:默认值从上往下

1.单一方向的渐变

to top

to bottom

to left

to right

2.对角渐变

to right bottom

to left top

3.角度的渐变

30deg

径向渐变：从一个点向四周进行渐变

语法：

background: radial-gradient(center, shape, size, start-color, ..., last-color);

center:渐变点的位置 shape:ellipse和circle

size: closest-side：最近边； farthest-side：最远边；

closest-corner：最近角； farthest-corner：最远角。

重复性渐变：

1.重复性线性渐变

div { background: repeating-linear-gradient(red, yellow 10%, green 20%); }

2.重复性径向渐变

div { background: repeating-radial-gradient(red, yellow 10%, green 20%); }

二十二、过度 - 放在css元素本身中

transition:过度的属性 过渡时间 延时 过度类型(默认linear)

例：transition: width 2s 2s linear,height 2s 2s linear;(可设置多属性值)

二十三、2D

一般搭配hover、transition使用

移动：transform:translate（x，y） 在平面进行位置移动

    transform:translateX（参数）水平移动 
    transform:translateY（参数）垂直移动

旋转：transform：rotate(旋转角度) 取值：deg

缩放：transform:scale（x，y） 取值0-1-+

倾斜：transform:skew(水平，垂直) 取值：deg

变形原点：

transform-orign:x,y,z; 取值：left,0px, transform-origin:20% 40%;

蒙层效果：盒子覆盖背景+透明opacity:0.2;

background-color: rgba(0,0,0, 0.3);

二十四、3D

父元素形成3d空间：transform-style:preserve-3d;

父元素形成景深：perspective: 建议900px-1200px之间

位移transform:translate3d(x,y,z) translateX(),translateY(),translateZ()

旋转transform:rotate3d(edg) rotate3dX(),rotate3dY(),rotate3dZ()

缩放transform:scale3d(x,y,z) scale3dX(),scale3dY(),scale3dZ()

背面不可见：backface-visibility:hidden

二十五、动画

关键帧：@keyframes 取名 { 0%{} 100%{} }

动画：

复合写法：animation：帧名 时间 运动类型（linear） 延时 循环（infinite）；

悬停看图：animation-play-state 属性值：paused 暂停 running 运动

animation-name 关键帧的名称

animation-duration 动画持续的时间

animation-timing-function 动画运动的类型 （匀速 加速 减速 贝塞尔曲线）step-start//直接跳到下一帧

animation-delay 动画的延迟

animation-iteration-count 动画运动的次数 （默认执行一次） infinite无限循环

animation-direction 运动方向

属性值：

reverse 反向运动

alternate 正反方向，往复运动

alternate-reverse 先反向再正向一个往复运动

animation-fill-mode 运动运动前或者运动后，其动画效果是否可见

属性值：

forwards 保留动画最终的状态

backwards 保留动画最初的状态

二十六、语义化标签

header 头部 footer 底部 nav 导航（一般放在headersc里面） main只能有一个（版心）

section 划分区域 article (语义化比section强)内容 aside 左右区域

figure 独立区域 figcation：figure的标题 time装时间（内联）

二十七、多媒体标签

配合source使用

<audio controls>

<source src="horse.ogg" type="audio/ogg">

<source src="horse.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 元素。
</audio>

type属性：

视频：

video/ogg video/mp4 video/webm

音频：

audio/mpeg audio/ogg

视频

autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。

controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。

height pixels 设置视频播放器的高度。

width pixels 设置视频播放器的宽度。

loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。

preload preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。

如果使用 "autoplay"，则忽略该属性。

src url 要播放的视频的 URL。

video:

src： 资源路径

controls 控件展示

autoplay 自动播放

muted 静音属性

loop 重复播放视频

poster 视频下载时显示图像

preload="none"

音频 audio:同视频

二十八、css3属性

1、属性选择器

选择符\[属性名] 只要带有当前属性名的就会被选中

选择符\[属性名="属性值"] 不仅指定了属性名，还指定了属性值

选择符\[属性名\~="属性值"] 属性值是一个词列表，只要包含了指定的属性值就可以选中

选择符\[属性名^="属性值"] 属性值必须是指定的属性值开头

选择符\[属性名\$="属性值"] 属性值必须时指定的属性值结尾

选择符\[属性名\*="属性值"] 属性值中只要包含了指定的字符就会被选中

选择符\[属性名|="属性值"] 属性值一当前指定的开头 或者以属性值-

2、结构伪类选择器

如果子级标签都是同一类型（类名一致的情况）：

选择符:first-child{}

选择符:last-child{}

选择符:nth-child(值 / 2n / 2n+1){}

选择符:nth-last-child(val){} 倒数第几个

设置第一个以外的元素样式:not(:first-child),设置最后一个除外的元素样式:not(:last-child)

.item-wrap:not(:last-child) {

    border-bottom: 1PX solid @border-color;

}}

选择符:first-of-type{}，基本同上，child换成of-type

3、ui元素伪类选择器

E:enabled匹配所有用户界面（form表单）中处于可用状态的E元素

E:disabled匹配所有用户界面（form表单）中处于不可用状态的E元素

E:checked匹配所有用户界面（form表单）中处于选中状态的元素E

E::selection匹配E元素中被用户选中或处于高亮状态的部分

4、动态伪类选择器

E:link 选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上

E:visite 选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上

E:active 选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上

E:hover 选择匹配的E元素，且用户鼠标停留在元素E上。

E:focus 选择匹配的E元素，而且匹配元素获取焦

常用于输入框获取焦点时的状态（背景色）

5、层级选择符

父元素>子元素{}

兄弟元素 + 兄弟元素{}

兄弟元素 \~ 兄弟元素{}

二十九、文本阴影、盒子阴影

text-shadow:2px 2px 2px red;

属性值1 :横向属性值2:纵向属性值3 阴影的大小（模糊程度）属性值4 阴影的颜色

box-shadow:2px 2px 2px 2px red;

推荐：box-shadow:0px 0px 70px rgba(157,179,208,0.4)

三十、文本换行

首先尝试把长单词换到下一行，如果再一行还是有超出，再换行

1.word-warp:break-word;

单词数字硬硬换行

2.word-break:break-all;

三十一、iconfont的使用

1.unicode方式引入：

a:引入iconfont.css文件到html页面中

b:<i class="iconfont"></i>

2.font class方式使用：

a:引入iconfont.css文件到html页面中

b:<i class="iconfont icon-xxx"></i>

注意：

每一个图标当成一个小字体，

习惯把每一个图标放到i标签

然后一定要添加 class="iconfont"

最后再添加对应的图标到i标签里面

3.symbol方式：

a:引入iconfont.js文件

b:引入iconfont.css文件

c: 
    <svg class="icon" aria-hidden="true">

        <use xlink:href="#icon-自己修改"></use>

    </svg>

三十二、图片边框

border-image:url(../images/a.png) 26 26 round;

路径 偏移 拉伸方式

取值：repeat平铺 round铺满 拉伸strech 默认值

三十三、圆角边框

border-radius：10px 10px 左上 右下; 10px 10px 10px 左上 （右上，左下）右下

：四个值，左上开始顺时针旋转

画圆：border-radius:50px

三十四、宽高

calc:用于百分比与固定宽的计算，四则运算前后有空格

height:calc (100% - 30px);

pointer-events：none 用于穿透蒙层，触发被蒙层遮住的事件；或者禁止一些事件被触发

fill-available 自适应宽高 与100%区别是padding的影响，100%宽高会被撑大

三十五、怪异盒模型

box-sizing:border-box；border和padding是长在元素宽高里面的

三十六、flex布局

父元素属性

1、形成flex弹性盒模型

display:flex
默认沿着X轴排列、子元素都可以设置宽高、margin:auto可以让子元素水平垂直居中

2、改变主轴排列方式

flex-direction:

row x轴为主轴 row-reverse横向反向排列

column y轴为主轴 column-reverse纵向反向排列

3、子元素在弹性盒里面的主轴对齐方式

justify-content:

flex-start盒开始的地方 flex-end盒的末端

center居中 space-between两端对齐，中间自动分配

space-around完全自动分配空间

4、侧轴的对齐方式：

align-items:

flex-start盒开始的地方 flex-end盒的末端

center居中 baseline stretch默认值，拉伸(子元素不设置固定的宽或者高)

5、子元素是否换行

flex-wrap:

wrap换行 nowrap不换行 wrap-reverse反向换行

6、行与行之间的表现（对齐方式）多行元素

align-content:

flex-start盒开始的地方 flex-end盒的末端

center居中 space-between两端对齐，中间自动分配

space-around完全自动分配空间 strech

子元素属性

1、
    align-self: 针对于某个子元素在侧轴的对齐方式，可重写align-items属性

    auto 默认值，元素继承父容器的align-items属性，如果没有父容器，则为stretch

    flex-start 元素位于容器的开始 flex-end 元素位于容器的结尾

    center居中 stretch拉伸适应容器

2、order 数字越大越往后排，默认为0，可以取负值

3、felx:1;把父元素（弹性盒）剩余空间自动分配（主轴上面的空间）

    flex-grow:1; “瓜分”父项的“剩余空间”。

    flex-shrink：0；用来“吸收”超出的空间

    flex-basis 项目的长度。覆盖设置的width

    flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

三十七、grid布局

父元素属性：

触发grid布局 display:grid / inline-grid 设置几行几列

grid-template-columns:100px 200px 300px; 或者 百分比

grid-temsplate-rows:100px 200px 300px; 或者 百分比

grid-template-columns: repeat(3, 33.33%) 同 grid-template-columns: 33.33% 33.33% 33.33%;

功能函数repeat(参数1，参数2) 参数1：重复几次 参数2：列宽或者行高的值

关键字 auto-fill 如果单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。

.container { display: grid; grid-template-columns: repeat(auto-fill, 100px); }

fr片段标识 列宽或者行高的份数

minmax(最小值，最大值) 列宽不能低于某个值，也不能高于某个值

表示两个相同宽度的列。 grid-template-columns: 1fr 1fr; 
表示列宽不小于100px，不大于1fr。 grid-template-columns: 1fr 1fr minmax(100px, 1fr); 
auto关键字表示由浏览器自己决定长度 grid-template-columns: 100px auto 100px;

行/列间距

复合写法： grid-gap:10px 20px; grid-row-gap:20px; grid-column-gap:20px

规定元素的排列顺序：

grid-auto-flow: column / row

row dense -- 先行后列 后续元素顶上去占满行

column dense; -- 先列后行

规定元素所占有的网格

grid-template-areas:'a b c'

注意：每个子元素必须通过grid-area指定名字

设置所有单元格内容在网格里面的水平 | 垂直对齐方式

justify-items：start | end | center | stretch -- 默认铺满; ；

align-items：start | end | center | stretch -- 默认铺满;

place-item(复合): start | end | center | space-around | space-between

设置整个内容区域在容器的水平和垂直的布局方式

justify-content: start | end | center | stretch | space-around | space-between | space-evenly;

align-content: start | end | center | stretch | space-around | space-between | space-evenly;

place-content(复合)：space-around space-evenly

某个子元素位置

grid-column：1 / 3; 表示该列起始于第一格，终于第三格

是grid-column-start: 1; grid-column-end: 3; 缩写，

grid-row:2 / 4; 表示该行起始于第一行，终于第三行

是grid-row-start: 1; grid-row-end: 3; 缩写，

justify-self属性设置某个单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，

align-self属性设置某个单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，

转存失败，建议直接上传图片文件

三十八、多列布局

column-count：3；分成3列显示 column-grp:每列间距

colum-fill:balance/auto 列高平均/自动分配 column-span:all/none；跨列/不夸列标题

column-rule:; 列边框 column-width:; 与列冲突

三十九、响应式布局

一套代码可适应不同设备分辨率，提升用户体验

缺点：开发成本大，效率低，代码累赘，有很多显示隐藏处理

滑动nav（display: flex; overflow: auto;）（flex-shrink: 0;）

滑动布局 overflow-y: auto;使用一个宽高100%的main盒子放内容

overscroll-behaviorcontain 阻止滚动传播给父元素

四十、媒体查询

@media all and (min-width:320px) and (max-width:374px){

{选择符：样式} }

注：and两边有空格，条件表达式无分号；常用于不同机型微调font-size、display-none、宽高

四十一、移动端开发的相关概念

1、物理像素指的是设备的实际存在的像素，例如iPhone6的物理像素750

2、Css像素是浏览器解析移动端的时候真正解析的数据，浏览器解析iPhone6的时候css像素是375px

3、dpr  iPhone6的dpr是2

(1) Dpr（device pixel ratio）设备像素比=物理像素/css像素  

(2) iPhone6例子   750px/375px=2 ipad1125px为3

4、单位换算；已知css像素375px，视口宽度100vw,需求：1rem=100px,求html=？vw

如IPone6; 375px/100px=100vw/x 解得x=26.6vw；（640px对应31.25vw）简易算法；10000/css像素即为所得

5、视口的设置，为什么要设置视口，这个是因为移动端在解析的时候，真正的数据宽度和用户看到的宽度是不对等的。所以得告诉浏览器，解析的视口宽度得和浏览器的一样，那么就得通过meta标签设置。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

width = device-width：宽度等于当前设备的宽度

initial-scale： 初始的缩放比例（默认设置为1.0）

minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）

maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）

user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）

方式1、重写meta标签 2、更改html的font-size（单位比：1rem=100px\*设备像素比）

方式2、引入js文件 script 2、注释掉mate标签（单位比：1rem=100px）

字体渐变： .text-gradient { color: transparent; font-weight: bold; font-size: 30px; text-shadow: 5px 5px 3px rgba(192, 185, 185, 0.2); background: linear-gradient(to bottom, rgba(192, 185, 185, 0.863), transparent); -webkit-background-clip: text; background-clip:text; }

变量回退

如果变量没有定义，就会使用回退 (70px) .message\_\_bubble {     
    max-width: calc(100% - var(--actions-width, 70px)); 
}

CSS 从头到尾

CSS是什么? 层叠样式表

一、网页布局

二、样式

1、外部样式

2、内部样式(不推荐)

3、行内样式（内联样式）

三、CSS选择符

四、CSS修饰文本相关的样式

五、 列表属性

六、 边框属性

七、背景图

八、脱离文档流（元素浮动）

九、页面中元素间距

十、文本溢出属性

十一、元素类型

十二、置换元素

十三、嵌套规则

十四、图片问题

十五、元素定位

十六、锚点

十七、宽高自适应

十八、伪对象选择器

十九、BFC-块级格式化上下文

二十、浏览器前缀

二十一、背景色渐变

二十二、过度 - 放在css元素本身中

二十三、2D

二十四、3D

二十五、动画

二十六、语义化标签

二十七、多媒体标签

二十八、css3属性

二十九、文本阴影、盒子阴影

三十、文本换行

三十一、iconfont的使用

三十二、图片边框

三十三、圆角边框

三十四、宽高

三十五、怪异盒模型

三十六、flex布局

三十七、grid布局

三十八、多列布局

三十九、响应式布局

四十、媒体查询

四十一、移动端开发的相关概念

五、列表属性

六、边框属性