文本属性

text 文本

1.文本水平对齐方式

text-align-center(中) left(默认值是左) right(右)

2.垂直方向对齐方式 vertical-align

属性值 top上 middle中 bottom下 baseline 基线

3.行高 line -height 行与行之间的距离

属性值 数值＋单位 pc端常用单位 px像素

数值 几倍几倍行距

当line height==height时,实现单行文本垂直方向居中

4.文本修饰 text-decoration

属性值: underline下划线啊 line-through删除线 overline下划线onoe 去掉下划线

5.文本首行缩进 text-indent

属性值: 数值+单位 常用单位px/em

可以为负值

6.复合属性: font: weight style size/line-height family

文字大小和文字字体不能够省略

书写顺序不能错

文字属性

文字属性:font

1.文字大小 font-size

pc端基本像素 px

px 文字大小默认16px;

支持的最小文字是12px;

不要使用奇数

rem,em,vw,vh,pt 移动端常用单位

2.文字粗细 font-weight:bold;

属性值:normal 正常不加粗(默认) bold加粗 bolder(更加粗)

lighter(变细)

100-900 整百整百的数值 400是默认值(不能带单位)

3.文字倾斜 font-style:iatilc 正常默认值也是normal

italic 倾斜属性值

4.文字字体 font-family

windows操作系统默认字体是微软雅黑

当有多个属性值时,首先显示第一个字体,系统不支持再显示第二个

都不支持的话显示系统默认字体

属性值为中文时需要加""号

多个单词之间也需要加""号

5.文字的颜色 color

属性值:英文单词

16进制 #000000 0-f

rgb3原色 rgb(0-255,0-255,0-255)

列表属性

列表属性:

1.list-style-type:用来更改项目符号类型

属性值:disc实心圆(默认值)

circle 空心圆

square 方块

none 取消项目符号

2.list-style-position:用来更改项目符号的位置

outside外侧(默认值)

inside内侧

3,list-style-image:用图片作为项目符号类型

4.复合属性:list-style:项目符号类型 项目符号位置

边框属性

边框属性

1.边框线型 border-style

属性值:solid 实线 dashed 虚线 double 双实线 dotted 点状线

none 去掉边框

2.边框颜色 border-color

transparent(透明)

边框颜色默认为文字颜色

属性值:三种表示方法

3.边框粗细 border-width 默认3px

属性值:数值+单位

复合属性

border:线型 粗细 颜色 (线型不能省,顺序没要求)

4.单独设置某一方向上的边框

border-方位词(left right bottom top)

5.单独设置某一方向上边框的某一属性

边框圆角

边框圆角:border-radius

一个值的时候:表示四个角

两个值:左上和右下 右上和左下 (对角)

三个值: 左上 右上和左下 右下

四个值:左上 右上 右下 左下

单独实现某个角的圆角

border-上下-左右-radius:先上下,再左右

border-radius:x/y

x表示水平半径

y表示垂直半径

宽高一致,border-radius为50%实现圆形

背景属性

背景:background

1.背景颜色 background-color

2.背景图片 background-image url()

3.背景图片平铺 background-repeat

属性值: repeat平铺(默认值)

no-repeat 不平铺 repeat-x水平方向平铺 repeat-y垂直方向平铺

4.背景图片的位置 background-position

属性值 : 值1 值2 数值＋单位 属性值可以为负数

值1表示水平方向 值2表示垂直方向

如果只设置一个值,只代表水平方向,垂直方向默认会居中

方位词:left right top bottom center

5.背景图片固定:background-attachment

属性值:scroll 滚动(默认值)

属性值:fixed 永远固定在可视窗口

6.背景图片的大小 background-size

cover图片等比例缩放, 直到撑满整个盒子 图片会出现裁剪

contion 图片等比例缩放,直到撑满某个方向 会出现留白

7.背景复合属性background:颜色 路径 平铺 固定 位置

没有顺序要求

没有数量要求

背景图片大小是c3新增的所以不能放进去

溢出属性

溢出属性:overflow

属性值:

1.可见的: visible(默认值)

2.超出内容隐藏 hidden

3.显示滚动条 scroll 强制显示滚动条

4.自动显示滚动条 auto (超出时显示滚动条,不超出不显示)

overflow-x

overflow-y 单独设置某一方向上的滚动条

滚动条在移动端不会显示

flex弹性盒子容器属性

弹性盒子:C3提供的一种新的布局方式

x轴,y轴,主轴,侧轴

主轴: 元素排列的方向

侧轴: 另一个方向是侧轴

容器: 父元素

项目: 子元素

先定义弹性盒子:

display:flex;

1.主轴排列方向 flex-direction

属性值: row 横向排列(默认值)

row-reverse 反转横向排列

column 纵向排列

column-reverse 反转纵向排列

2.主轴对齐方式 justify-content

属性值: flex-start 顶端对齐

flex-end 末端对齐

space-between 两端对齐

space-around 两端环绕对齐

center 居中

space-evenly 完全的平均分配

 

3.侧轴对齐方式 align items

center 居中

flex-start 顶部对齐

flex-end 底部对齐

baseline: 基线对齐(大多情况与flex-start效果一致)

stretch:拉伸以撑满父元素高度(默认值)

4.设置项目是否换行: flex-wrap

warp: 换行

nowarp: 不换行(默认值)

warp-reverse 反转换行

5.align-content(行与行之间的对齐方式)

flex-start 起始位置对齐,没有间距

flex-end 末端对齐,没有间距

center 居中对齐,没有间距

space-between 两端对齐,有间距

space-around 两端环绕对齐,有间距

stretch 拉伸撑满父元素高度(默认值)

项目属性

\1. 单独设置某个项目的侧轴对齐方式, align-self

flex-start 顶端对齐

flrex-end 末端对齐

center 居中对齐

stretch 拉伸

auto: 继承父元素(默认值)

2.设置项目的排列顺序 order

属性值: 数值 值越大,越往后排列,默认为0,支持负数

3.flex:1; 设置盒模型项目如何分配空间

复合属性:

flex-grow

一个数字，规定项目将相对于其他灵活的项目进行扩展的量flex-shrink

一个数字，规定项目将相对于其他灵活的项目进行收缩的量flex-basis

项目的长度

flex-shrink:0 设置项目宽高不被拉伸

容器属性

1.主轴排列方向 flex-direction

属性值: row 横向排列(默认值)

row-reverse 反转横向排列

column 纵向排列

column-reverse 反转纵向排列

2.主轴对齐方式 justify-content

属性值: flex-start 顶端对齐

flex-end 末端对齐

space-between 两端对齐

space-around 两端环绕对齐

center 居中

space-evenly 完全的平均分配

 

3.侧轴对齐方式 align items

center 居中

flex-start 顶部对齐

flex-end 底部对齐

baseline: 基线对齐(大多情况与flex-start效果一致)

stretch:拉伸以撑满父元素高度(默认值)

4.设置项目是否换行: flex-wrap

warp: 换行

nowarp: 不换行(默认值)

warp-reverse 反转换行

5.align-content(行与行之间的对齐方式)

flex-start 起始位置对齐,没有间距

flex-end 末端对齐,没有间距

center 居中对齐,没有间距

space-between 两端对齐,有间距

space-around 两端环绕对齐,有间距

stretch 拉伸撑满父元素高度(默认值)

项目属性

项目属性

\1. 单独设置某个项目的侧轴对齐方式, align-self

flex-start 顶端对齐

flrex-end 末端对齐

center 居中对齐

stretch 拉伸

auto: 继承父元素(默认值)

2.设置项目的排列顺序 order

属性值: 数值 值越大,越往后排列,默认为0,支持负数

3.flex:1; 设置盒模型项目如何分配空间

复合属性:

flex-grow

一个数字，规定项目将相对于其他灵活的项目进行扩展的量flex-shrink

一个数字，规定项目将相对于其他灵活的项目进行收缩的量flex-basis

项目的长度

flex-shrink:0 设置项目宽高不被拉伸

元素显示与隐藏

元素隐藏

1.display:none 不占位置

2.visibility 设置元素可见性

visible 可见的(默认值)

hidden 隐藏元素 (占据位置)

3.opacity:0 隐藏元素 占据位置

4.height:0 如果有文本的话,要单独隐藏文本

5.transform: scale(0) 缩放比例为0隐藏元素(占位置)

显示省略号

单行文本超出显示省略号

1.设置固定宽度

2.强制文本在一行

white-space:

wrap: 换行(默认值)

nowrap 不换行 强制在一行显示

pre: 完全保留文字格式(保留空格符,换行符)强制不换行

pre-line(正常保留换行,省略空格符)

pre-wrap(正常保留换行,空格符)

字间距 : letter -spacing

数值+ px;

单词间的距离:word-spacing 数值+单位

3.设置超出隐藏

overflow:hidden

4.设置文本超出:text-overfkow:

属性值:ellipsis省略号

clip:默认值,不显示省略号

 

多行文本显示省略号

display: -webkit-box;-webkit-line-clamp: 5;overflow: hidden;|

-webkit-box-orient: vertical;

 

因为没法通过css方法限制文本宁数，所以一般要通过js来优化该方法

转换元素类型

转换元素类型 属性名:display

属性值:block 转换成块元素

inline 转换成行内元素

line-block 转换成行内块元素

none 隐藏元素

flex 转换成弹性盒子(第三周周三)

grid 转换成网络布局(第四周周三)

 

不常用的取值

table 转换成表格元素

table-celll 转换成单元格元素

list-item 转换成列表元素

table-row 转换成表格行元素

彩蛋: 浮动会使元素转换成block

盒模型边距

盒模型;

外边距margin+边框border+内边距padding+内容width height

1.width

height 数值加单位 px+%

能设置宽高:div p hn ul,ol,li

不能设置宽高:span a

img input

2.外边距:margin 元素与元素之间的距离

可以为负值

值1: 四个方向

值2:上下 左右

值3:上 左右 下

值4:上 右 下 左

3.内边距:padding 不可以为负值 内容与边框之间的内容

值1: 四个方向

值2:上下 左右

值3:上 左右 下

值4:上 右 下 左

4.盒模型的大小计算:box-sizing

content-box 标准盒模型

盒子在啊页面中占据的实际宽高=边框＋内边距+width, height

border-box 怪异盒模型

盒子在页面中占据的实际宽高=width,heigth

定位

固定宽高 浮动+定位布局

定位:让元素在页面任意位置上显示

属性名:position

属性值:stalic 静态定位 不定位(默认值)

relative 相对定位

absolute 绝对定位

fixed 固定定位

sticky 粘性定位

偏移量(方位词):定位后具有的属性

top

left

bottom

right

1.相对定位:relative

参照物:相对于元素本身进行偏移,且占据位置

2.绝对定位:absolute

参照物:a.先后对于body进行定位

b.相对于最近的具有定位属性的父级元素

不占据位置

父相子绝

3.固定定位: fixed

参照物:是可视窗口 不占位置

4.粘性定位:sticky

相当于相对定位和固定定位的结合

出现滚动条之前是相对定位,出现滚动条之后是固定定位

 

 

实现定位元素水平垂直方向都居中

\1. left50%

top:50%

margin-left:自身宽度一半

margin-top:自身高度一半

2.设置四个方向偏移量为0

然后margin: 0 auto;

设置透明度

<!-- 设置透明度 opacity

属性值:0-1 0完全透明 1完全不透明

 

IE9一下透明度写法:

filter:alpha(opacity=0-100);

透明度兼容写法 取值:0-100;

background: rgba(0-255,0-255,0-255,0-1)0-1表示透明度-->

表单

表单:收集用户信息

form(双标签):用来定义一个表单

属性名:action 表单提交的地址

常见表单控件

通过input标签的type属性来实现不同效果的表单控件

1.input type="text" 普通文本框

\2. type="password" 密码框

type="submit" 提交按钮

type="reset" 重置按钮

type="button" 普通按钮

 

 

placeholder 用来设置密码框和文本框和文本框的提示文字

value:用来设置按钮的提示文字

表单控件

按钮,输入框等等统一称为表单控件

输入框:input

通过更改input的type属性值来实现不同效果的表单控件

a.普通文本框

type="text"

b.密码框

type="password"

c.单选框

type="radio"

通过name属性一致实现单选效果

d.复选框

type="checkbox"

文件域

type="file"

type="submit"提交按钮

type="reset"重置按钮

拓展 (普通按钮)<button></button>实现提交功能的普通按钮

type="image"srca 图像域(实现提交按钮功能)

2.下拉框

select下拉框

option

<select>

<option>请选择一个问题</option>

</select>

3.textarea 文本域 双标签

通过更改rows 和cols来设置大小或者通过css来设置款宽高

css属性:resize 设置用户拖拽 both(默认值) none禁止拉伸

horizontal(水平方向拉伸)

vertical(垂直方向拉伸)

4.相关属性

文本框:密码框提示文字 placeholder

maxlength 限制输入字数

/* html, body , h1,h2,h3, h4,h5,h6,div, ul,ol,li,dl,dt,dd , p{

智能表单新增属性

1.placeholder 文本框密码框的提示文字

2.required 验证表单是否为空

3.autofoucs 自动获取焦点

4.autocomplete 自动补充 类似历史记录功能,一定要结合name才会生效 属性值:on(打开)默认 off(关闭)

5.parrtern 正则表达式:用来输入数据格式

6.Multiple 支持提交多组数据,多组数据用逗号隔开

7.checked 单选框复选框默认选中

8.selected 下拉框默认选中

9.disabled 禁用

10.datalist 选项列表

option单标签 通过value属性写列表选项

label表示选项提示文字

11.list 用来引用选项列表,list属性值=datalist的id名

12.label 提示信息标签 行内元素 通过for属性与表单控件id相符,实现关联

13.fieldset 字段集标签

14.legend 字段集标题标签()在上边框中间显示

表格属性

-

表格属性(table标签上):

1.align: 表格水平对齐方式 lrft center right

设置了margin 0之后,该html属性失效

2.border 表格边框 数值

3.boedercolor 边框颜色

4.width height 表格宽高

5.bgcolor 表格背景颜色

6.cellspacing 单元格与单元格之间的距离

默认值:2

7.cellpadding 单元格与内容之间的距离

默认值:1

表格的css属性

1.border-collapse 合并相邻边框线

属性值: separate 不合并(默认值)

collapse 合并

\2. border-spacing 单元格与单元格之间的距离

数值+单位

3.table-layout 设置表格布局算法

auto(默认值) 列宽由内容最多的决定

fixed 列宽均分格

隐藏空单元格 show hide

面试问题:

两者区别

fixed能加快浏览器运行速度 优化代码

直接均分列宽(不需要读取内容)

auto需要先读取内容,再计算列宽 更灵活

 

表格补充

表格行分类

thead

tbody

tfooter

表格头和表格底可以省略,有且只有一个

表格主体会自动生成,可以有无数个

表格列分类

colgroup span=

谷歌浏览器只支持bgcolor和width

th标题单元格

caption 表格标题

单元格tr属性

单元格属性:td

1.align

2.valign

单独设置某个单元格文字的对齐方式

3.bgcolor 单元格背景颜色

4.width 列宽

单元格背景颜色>行背景颜色>表格背景颜色

colspan 水平方向合并单元格

水平方向合并:合并n个,属性值就是n

同一行删除n-1个 td

rowspan 垂直方向合并单元格

垂直方向合并: 合并n行 ,属性值n

删下一行的td

表格行属性

表格行属性:

1.bgcolor 某一行的背景颜色

2.height 行的高度

3.align 内容水平对齐方式 left center right

4.valign 内容垂直方向对齐方式 top bottom middle

 

默认对齐方式: 水平居左 垂直居中

实现1像素表格

1.给表格设置背景颜色,设为边框颜色

2.给每一行设置背景颜色

3.设置cellspacing为1

文本阴影

文本阴影 text-shadow:

x y blur color

x,y表示水平,垂直方向距离(这两个值不能省略)

blur:模糊程度 不能为负值 默认是0

color:阴影颜色 磨人文字颜色

可设置多重阴影,逗号隔开多组阴影

盒子阴影: box-shadow:x y blur size color position

x,y表示水平,垂直方向距离(这两个值不能省略)

blur:模糊程度 不能为负值 默认是0 单位px

size:阴影大小,默认文字颜色

position:阴影位置 outset外阴影(默认) inset内阴影

样式的使用方法

1.写在开始标签里面通过style属性来使用

\1. 行内样式 写在开始标签里,通过style标签属性书写

\2. 内部样式 写在head标签里,通过style标签来书写

内部样式表 :减少了代码量

3.外部样式表: 结构样式分离

a.写在head标签里面,通过link标签来引入

html提供的一种方法

b.在style标签里面通过@import url()引入

css提供的一种方法

一.@import兼容性较低(多个版本浏览器不支持)

二.浏览器先运行html结构代码,后运行css代码,如果用import方式来使用可能会造成布局混乱,影响用户体验

!important>行内样式>内部样式=外部样式

内部外部样式取决于书写位置

写在后面的会覆盖前面的

! important

外部样式

c.外部样式

<link rel="stylesheet" href="路径"><style>

import url(路径)</style>

两者区别a.语法不同

link=标签语法@import=css语法

b.加载顺序不同

link标签同时加载结构和样式

@import先驾照结构后加载样式

c.操作dom的问题

js

元素堆叠属性

元素堆叠属性: z-index 前提一定要定位

属性值: 数值

范围:无穷大-----无穷小

默认值: auto(书写位置在后面的会覆盖前面的)

可以为负值

网格布局

网格布局

含义:将页面划分成一个个网格

区别:弹性布局:一维布局(只能设置元素一个排列方向)轴线布局

网格布局:二维布局

定义网格盒子:display:grid;块状网格

line-grid行内网格

容器:父元素

项目:子元素

横线:水平方向网格线

纵线:垂直方向网格线

网格:两条线交叉区域

行:水平

列:垂直

实现一行一列的单元格

需要2条横线 2条纵线

实现两行两列的单元格

需要3条横线 3条纵线

实现n行m列的网格:

需要n+1条横线 m+1条纵线

网格容器属性

grid-template-columns:设置列宽 有n组数值就是n列

grid-template-rows:设置行高 有m组数值就是m行

 

1.绝对大小:有n组数值就是n列,n行

2.百分比

3.功能函数 repeat(循环行列数,行高列宽)

4.auto fill 自动均分(配合功能函数repeat使用)repeat(auto-fill,100px)

5.关键字片段(n fr) 1fr 1fr 2fr 表示比例关系

6.auto关键字 自动填充剩余大小

7.minmax (最小值,最大值) 最小最大函数

8.网格线命名:行线 r[n] 列线c[n]

二.网格行列间距

grid-row-gap:列间距

grid-cloumn-gap:行间距

grid-gap:复合写法: 行间距 列间距;

现在的浏览器大多支持这个属性,可以去掉grid

gap:

 

三.网格排列方向

grid-auto-flow:row(默认) column列

四.网格内容对齐

网格内容水平对齐方式: justify-items:start(顶端) center(居中) end(末端) stretch(默认值)

网格内容垂直对齐方式: align-items:start(顶端) center(居中) end(末端) stretch(默认值)

复合属性:place-items:垂直对齐,水平对齐;

五.网格项目对齐方式

justify-content:行对齐方式

start顶端 end末端 center居中 space-around环绕对齐 space-between两端对齐

stretch(理解成弹性盒子对齐)

align-content:列对齐方式

start顶端 end末端 center居中 space-around环绕对齐 space-between两端对齐

stretch(理解成弹性盒子对齐)

place-content:行,列

网格项目属性

合并网格

1.通过网格命名来合并

a.给网格命名(容器)grid-template-areas:'a b c'

'd e f'

'g h i'

 

b.通过相同的网格名进行合并 给项目设置属性

grid-area

2.通过网格线合并

grid-column-start 从第及根列线开始

grid-column-end 从第几根列线结束

复合写法:grid-column:x/y 从第x根列线开始到第y根列线结束

grid-row-start 从第几根行线开始

grid-row-end 从第几根行线结束

复合写法:grid-row:x/y 从第x根行线开始到第y根行线结束

3.通过网格合并

grid-column:1(网格线)/span 2(第2个网格)

css3新增选择器

一.根据层级来选择(层级选择器)

1.子级选择器 E>F 选择E元素的子级F元素 !!!

2.+相邻兄弟选择器 E+F 选择E元素的相邻同级,书写位置下面的F元素

3.~通用选择器 E~F 选中E元素的同级且书写位置在下面的所有F元素

二.根据属性属性值来选择(属性选择器) 属性选择器用[]

1.E[attr] 选中所有具有attr属性名的E元素

2.E[attr="value"]选中所有具有attr属性名=value属性值的E元素 相等

3.E[attr~="value"]选中所有attr属性名包含value属性值的E元素(属性值是词列表) 包含

拓展

4.E[attr^="value"]选中所有attr属性名并且以value属性值开头的E元素 开头

5.E[attr$="value"]选中所有attr属性名并且以value属性值结尾的E元素 结尾

6.E[attr*="value"]选中所有attr属性名并且包含value属性值的E元素 包含

(~与*的区别:~属性值,一定是完整的单词 *属性值,可以是单个字母)

7.E[attr|="value"]:指定了属性名,并且属性值value或者以"value-"开头的值",比如是(Zh-Cn)

 

三.序号伪类选择器

\1. E:nth-child(n) 选中第n个子元素E

可作为函数使用,n从0开始 even 偶数 odd 奇数

2.E:first-child 选中第一个子元素E

E:last-child 选中最后一个子元素E

3.E:nth-last-child(n) 选中倒数第n个子元素E

拓展:

4.:root 选择到根元素(html)

5.E:only-child 选择到子元素E,且该子元素没有同级,只有一个

6.E:empty 选择到子元素E,且该元素E没有任何子元素包括文本符号

四,特殊伪类选择器

1.target 目标伪类选择器 选择跳转之后的样式

2.否定伪类选择器

E:not(选择器) 选择除了()的其他元素E

五,UI元素状态伪类选择器 (针对表单)

1.E:enabled 选中可用状态下的元素E

2.E:disabled 选中禁用状态下的元素E

3.E:checked 选中表单中处于选中状态下的元素E(复选框单选框)

4.E: auto focus 选中表单中处于焦点状态时的元素E(针对输入框)

5.E::selection 选中处于高亮状态下的元素E (用户选中的:ctrl+a)

默认蓝色背景白色文字

媒体查询

媒体查询:根据设备的某些特性(宽度)设定独有的css

由一个或多个条件表达式组成

断点: 样式发生改变时的临界点

基本语法:

@media screen 表达式1 and 表达式2

@media screen and(条件表达式) and(条件表达式){

选择器{

属性名:属性值

}

}

and前后一定要加空格

min-width: max-width

帧动画

过渡动画: 要先设置hover效果

transition: 发生过渡动画的属性 持续时间 延迟时间

帧动画:

1.定义关键帧

@keyfarmes 自定义动画名称第一种写法{

form{ 起始状态

属性名:属性值1

属性名:属性值2;

}

to{ 结束状态

属性名:属性值1;

属性名:属性值2;

}

}

@keyfarmes 自定义动画名称{

0%{

}

10%{

}

50%{

}

.......

100%{

}

}

2.调用帧动画

animation-name:自定义动画名称

3.设置帧动画持续时间

animation-duration:数值+s/ms

其他参数:

a.animation-delay:帧动画延迟时间

b.transition-timing-function:帧动画运动方式 linear匀速

ease 越来越慢

ease-in由慢到快

ease-out:由快到慢

ease-in-out由慢到快再到慢

自定义运动方式:贝塞尔曲线

steps(n)次数 将帧动画分为n步执行 一般用为(from to) 写法 n从0开始计数

c.animation-iteration-count

帧动画执行次数

属性值:数值

infinte无限循环执行

帧动画运动方向:

animation-direction:

reverse:反方向运行

alternate:动画先正常运行再反方向运行，并持续交替运行

alternate-reverse:动画先反运行再正方向运行，并持续交替运行

e.animation-play-state:检索帧动画运动状态

属性值:running(默认值/运动)

paused(暂停)

复合属性:animation:名称!持续时间!延迟时间!远动方式!执行次数!运动方向!

2D变化

2D变化: 平移 倾斜 旋转 缩放

属性名:transform

属性值:

1.平移:translateX(数值+单位) 水平方向平移 属性值可以为负

translateY(数值+单位) 垂直方向平移 属性值可以为负

translate(x,y) x表示水平方向平移,y表示垂直方向平移

如果只有一个值,只代表水平方向平移

 

2.倾斜: skewX(数值+deg) 水平方向倾斜 属性值可以为负的

skewY(数值+deg) 垂直方向倾斜 属性值可以为负的

skew(x,y) x表示水平方向平移 y表示垂直方向平移

如果只有一个值,只代表水平方向平移

3.缩放 属性值大于1表示放大, 0-1之间缩小 等于0隐藏 等于1不变 (比例缩放,所以不能带单位)

scaleX() 水平方向缩放

scaleY() 垂直方向缩放

scale(x,y) x表示水平方向缩放，y表示垂直方向缩放﹑如果只有一个值，代表两个方向同时缩放

4.旋转 rotateX 沿着x轴旋转 数值+deg

rotateY 沿着y轴旋转 数值+deg

rotate() 沿着自身进行旋转 数值+deg

先后顺序不一样,展示效果也不一样

5.变形原点 transform-origin:x y; 可以是数值,也可以是方位词

3D变化

3D:平移 旋转 缩放

近景远深 (盒子和视角间的距离) 默认值为none

perspective:900px;

常用范围:900-1200px; 最佳观看距离

perspective-origin:3D观察角度

1.默认:center center 在正中心观看(基本)

2.左右 上下

3.100% 100%;

定义元素以3D效果展示:transform-style:

flat:元素以2D效果展示(默认)

preserve-3D 元素以3D效果展示

给父元素设置:transform-style:preserve-3D 定义3D旋转舞台

属性名:transform

1.平移

translatex:

translatey:

translate(x,y):

translateZ 前后平移

translate3D(x,y,z): 三个值都得写

2.旋转

rotateX 绕着X轴

rotateY 绕着Y轴

rotateZ=rotate 绕着自身

rotate3D(x,y,z,deg) x,y,z取值范围: 0-1矢量 向量(某个方向旋转角度的比例) 绕着自定义的轴

调用帧动画: animation : name duration;

3.3D缩放 一般不用

scaleX

scaleY

scaleZ 单独使用没有任何效果,需要搭配其他变化函数(旋转, 还要出发近景远深)

颜色Color渐变

渐变:背景颜色的渐变

background:

线性渐变: linear-gradient(to 方位词)

to 方位词:从哪到哪的渐变 默认值:to bottom

多组属性值用逗号隔开

to 上下 左右:实现某个角度的渐变

角度渐变:(xdeg, color)

径像渐变:从某个点到四周渐变

radial-gradient 从某个点到四周渐变

center:渐变的起始位置 两个值 第一个值表示水平,第二关值表示垂直 数值加单位 % start-color

last-color

shape:渐变的形状

ellipse表示椭圆形(默认值)

circle(圆形)

 

size:渐变的大小

closest最近 farthest 远 side 边 corner角

重复渐变:

repeating-linear-gradient(color1 x%, color2 y%,..)

repeating-radial-gradient(color1 x%, color2 y%,..)

过渡动画

过渡动画:两个属性之间平稳的进行变化

transition:发生变化的属性名 持续时间

1.transition-property:设置发生过渡动画的属性名 all(全部发生改变) none(全都不) 逗号隔开多组发生变化的属性

2.transition-duraton:过渡动画的持续时间 数值+时间单位

发生过渡动画的属性名和持续时间不能省略

3.transition-delay 过渡动画的延迟时间 数值+时间单位

4.transition-timing-function 发生过渡动画的运动方式

linear匀速 ease逐渐慢下来(匀速慢下来) ease-in加速 ease-out减速 ease-in-out先加速后减速

贝塞尔曲线网址

移动端布局样式

<!-- pc端(personal computer1人电脑)移动端(方便移动的设备) moblie phone(手机) padiWatch kindle 耳机智能眼镜(vr)

 

设备模拟器:

1.选择设备种类惇2.设备的css像素3.设备的观看比例4.网络状态5.横屏竖屏6.截屏(当前屏幕和长截图)

针对iphone型号研究

iphone4:320480 640960 *2

iphone5:320568 6401136 *2

iphone6,7,8:375667 7501334 *2

iphone6/7/8/s:414736 12422208 *3

 

css像素比(dpr):2或者3

css像素=物理像素(实际测量的像素)/像素比

测量是1200px 实际写400px

视口

布局视口:整个页面的视口

视觉视口:能看的见的窗口

理想视口:布局视口=视觉视口

minimum-scale:最小缩放比例

maximum-scale:最大缩放比例

initial-scale:初始缩放比例

user-scalable:no 禁止用户缩放

vw,vh

<!--vw view width 100vw=100个完整视口的宽度

vh view height 100vh=100个完整视口的高度

 

vw和%有区别吗?

%基于父级元素改变,

元素默认高度是auto height:auto,所以提前得设置html,body 高度值

vw是基于视口,不受影响

如何用vw或者vh实现一个正方形

宽高用相同单位

开发中常使用vw

iphone/678 100vw=375px 1vw=3.75px

rem,em单位

em: 根据最近的有文字大小的盒子进行宽高改变(优先本身文字大小)

10em=160像素

1em=16像素

1.em=本身文字大小/父元素文字大小/根目录文字大小

1em=html根目录文字大小 本身文字大小

2.rem根据根目录文字大小进行改变

1rem=html的文字大小

html{

font-size:50px;

方便计算

}

三种使用方法:

a.使用px to rem插件(基于html默认大小16px进行转换)

b.设置html文字大小为50px(基于dpr=2,方便计算)

物理像素=200px css像素:100px=2rem

c.使用flexable.js 删掉注释原有理想视口代码(处理好了dpr)

物理像素=200px css像素:100px=2rem

-->

常用单位

px % rem,em vw,vh pt(磅值)实际单位

calc函数

calc函数 动态设置长度

calc(x 运算符(+ - * / % ) y)

两栏布局如何实现左侧固定宽,右侧自适应