html&css复习笔记-4

calc函数

用于动态计算长度值
需要注意的是，运算符前后都需要保留一个空格
例如：width：calc（100% - 10px）；
任何长度值都可以使用calc（）函数进行运算
calc（）函数支持“ + ” ， “ - ” ， “ * ” ， “ / ” 运算
calc（）函数使用标准的数学运算优先级

textarea

文本域

resize

重新设置大小
vertical：垂直方向
horizontal：水平方向

字段集模板

<fieldset>
	<legend>##</legend>
	<input type="radio" name="aa">男/*单选框*/
	<br>
	<input type="radio" name="aa">女
</filedset>

html5语法

内容类型：
HTML5的文件拓展符与内容类型保持不变，仍然为“.html”或".htm"
.
DOCTYPE声明：
不区分大小写
.
指定字符集编码：
meta charset=“UTF-8”
.
可省略标记的元素：
不允许写结束标记的元素：br、col、embed、hr、input、link、meta
可以省略结束标记的元素：li、dt、dd、p、option、colgroup、thead、tbody、tfoot、tr、td、th
可以省略全部标记的元素：html、head、body、colgroup、tbody
.
省略引号：
属性值可以使用双引号，也可以使用单引号

HTML5新增语义化标签

section元素 表示页面中的一个内容区块
article元素 表示一块与上下文无关的独立的内容
aside元素 在article之外的，与article内容相关的辅助信息
header元素 表示页面中的一个内容区块或整个页面的标题
footer元素 表示也没面中一个内容区块或整个页面的脚注
nav元素 表示页面中导航链接部分
figure元素 表示一段独立的流内容，使用figcaption元素为其添加标题（第一个或最后一个子元素的位置）
main元素 表示页面中的主要的内容（ie不兼容）

h5新增音频标签

video元素 定义视频

<video src="movie.ogg" controls="controls" >Video元素</video>

audio元素 定义音频

<audio src="someaudio.wav">Audio元素</audio>

controls属性：如果出现该属性，则向用户显示空间，比如播放按钮
autoplay属性：如果出现该属性，则视频在就绪后马上播放
loop属性：重读播放属性
muted属性：静音属性
poster属性：规定视频正在下载时显示的图像，直到用户点击播放按钮

h5增强表单-input

Type=“color” 生成一个颜色选择的表单
Type=“tel” 唤起拨号盘表单
Type=“search” 产生一个搜索意义的表单
Type=“range” 产生一个滑动条表单
Type=“number” 产生一个数值表单
Type=“email” 限制用户必须输入email类型
Type=“url” 限制用户必须输入url类型
Type=“date” 限制用户必须输入日期
Type=“month” 限制用户必须月类型
Type=“week” 限制用户必须输入周类型
Type=“time” 限制用户必须输入时间类型
Type=“datetime-local” 选取本地时间

h5增强表单-数据列表

Datalist：选项列表

//例子：
<input type="url" list="url_list" name="link"/>
<datalist id="url_list">
	<option label="W3School" value="http://www.W3School.com.cn"/>
	<option label="Google" value="http://www.google.com"/>
	<option label="microsoft" value="http://www.microsoft.com"/>//注option元素永远都要设置value属性
</datalist>

h5增强表单-属性

autofocus属性：
给文本框、选择框、或者按钮空间加上该属性，当打开页面时，该控件自动获得焦点，一个页面只能有一个
.
required属性：
验证输入不能为空
.
Multiple：
可以输入一个或多个值，每个值之间用逗号分开
例：< input type=“email” multiple/>
还可以应用于file
.
pattern：
将属性值设为某个格式的正则表达式，在提交时会检查其内容是否符合给定格式
例：< input pattern=“[0_9][AZ]{3}” title=“输入内容：一个数与三个大写字母” placeholder=‘输入内容：一个数与三个大写字母’>

层次选择器

+——————当前元素的后面第一个兄弟
~——————当前元素的后面所有的亲兄弟

属性选择器

很奇怪的使用

E[attr]:只使用属性名，但没有确定任何属性值
E[attr=“value”]：指定属性名，并指定了该属性的属性值
E[attr ~ =“value”]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，器中词列表中包含了一个value词，而且等号前面的“~”不能不屑
.
拓展知识：
E[attr^=“value”]：指定了属性名，并且具有属性值，属性值是以value开头的
E[attr$=“value”]：指定了属性名，并且具有属性值，而且属性值是以value结束的
E[attr*=“value”]：指定了属性名，并且具有属性值，而且属值中包含了value

结构伪类选择器

X：first-child 匹配子集的第一个元素。IE7就可以支持
X：last-child 匹配父元素中最后一个X元素
X：nth-child（n）用于匹配索引值为n的子元素。索引值从一开始
X：only-child 这个伪类一般用的比较少，比如上述代码匹配的是div下的有且仅有一个的p，也就是说，如果div内有多个p，将不匹配
X：root 匹配文档的根元素。在HTML（标准通用标记语言下的一个应用）中，根元素永远是HTML
X：empty 匹配没有任何子元素（包括包含文本）的元素X

.classname div：last-child{//classname里最后一个div
}

.classname div:nth-child(*){//classname里第*个div
}
.classname div:nth-child(2n){//classname里为偶数的div
}
.classname div:nth-child(2n-1){//classname里为奇数的div
}
.classname div:nth-child(odd){//classname里为奇数的div
}

手风琴模板

<div>
	<a href="#aaa" >aaa</a>
	<div id="aaa" class=""content">
		lorem
	</div>
</div>
<div>
	<a href="#bbb" >bbb</a>
	<div id="bbb" class=""content">
		lorem
	</div>
</div>
<div>
	<a href="#ccc" >ccc</a>
	<div id="ccc" class=""content">
		lorem
	</div>
</div>

css:
.content{
	display:none;
}
.content:target{
	display:block;
}

UI元素状态伪类选择器（form表单）

E：focus{手动聚焦——点击选中时}
E：enabled{匹配所有用户界面form表单中处于可用状态的E元素}
E：disabled{匹配所有用户界面form表单中处于不可用状态的E元素}
E：checked{{匹配所有用户界面form表单中处于选中状态的E元素}
E：selection{匹配E元素中被用户选中或处于高亮状态的部分}

appearance

input的默认样式
input{appearacne:none;}

文字阴影

text-shadow（水平位移 垂直位移 模糊程度 字体颜色，（第二个阴影）水平位移 垂直位移 模糊程度 字体颜色，…）
默认是右下移动

盒子阴影

h-shadow：必需。水平阴影的位置，允许负值
v-shadow：必需。垂直阴影的位置，允许负值
blur：模糊距离
spread：阴影大小
color：阴影颜色
inset：从外层的阴影（开始时）改变阴影内测阴影

怪异盒模型

含义：更改原有布局盒子模型的计算方式通过box-sizing属性的取值进行更改
优点：固定整个盒子的大小不变，内加padding和border，省计算调整

弹性盒子布局

flex-dirction

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap

nowrap (默认值) 不换行压缩宽度
wrap 换行
wrap-reverses 反向换行

align-self

1. auto 表示继承容器的 align-items 属性。（默认值）
2. flex-start 沿着交叉轴方向 起点 对齐（默认值）。
3. flex-end 沿着交叉轴方向 结尾 对齐。
4. center 沿着交叉轴方向 居中 对齐。
5. baseline 沿着交叉轴方向，按照项目内的文字对齐。
6. stretch 沿着交叉轴方向自动进行拉升到最大。

justify-content

flex-start (默认)靠着main-start对齐//参考常见术语(一般是左方向)
flex-end 靠着main-end对齐//参考常见术语(一般是右方向)
center 靠着主轴居中对齐//一般就是居中对齐
space-between 两端对齐，靠着容器壁，剩余空间平分
space-around 分散对齐，不靠着容器壁，剩余空间在每个项目二侧平均分配
space-evenly 平均对齐，不靠着容器壁，剩余空间平分

order

顺序，设的值越大越靠后，允许负值

flex

类似网格布局

多列布局

column-count
属性规定元素应该被分隔的列数

column-gap
属性规定之间的间隔大小

column-rule

column-rule-color：规定列之间规则的颜色
column-rule-style：规定列之间规则的样式
column-rule-width：规定列之间规则的宽度

column-fill
设置或检索对象所有列的高度是否统一
auto：列高度自适应内容
balance：所有列的高度以器中最高的一列统一

column-span
设置或检索对象元素是否横跨所有列
none：不跨列
all：横跨所有列

column-width
设置或检索对象每列的宽度

break-inside：avoid；避免多列布局的div块被打断

响应式布局

媒体查询

媒体查询可以让我们根据设备显示器的特性（如视口宽度，屏幕比例，设备方向：横纵）为其设定css样式，媒体查询有媒体类型和一个或多个检测媒体特性的条件表达式组成，媒体查询中可用于检测的媒体特性有width、height和color等，使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。

媒体查询操作方式
实际操作为：对设备提出询问（称作表达式）开始，如果表达式结果为真，媒体查询中的css被应用，如果表达式结果为假，媒体查询内的css将被忽略
媒体查询结构
@media all and （min-width：320px）{
body { background-color：blue；
}

设备类型(默认为all)
all：所有设备
aural：听觉设备
braille：电子触觉设备
handled：便携设备，如手机、平板电脑
print：打印阅览图等
projection：投影设备
screen：显示器、笔记本、移动端等设备
tty：如打字机或终端等设备
tv：电视机等设备类型
embossed：盲文打印机
另：and 被称为关键字，其他关键字还包括not（排除某种设备），only（限定某种设备）

横竖屏检测

竖屏
orientation：portrait
横屏
orientation：landscape

em、rem

em：相对单位，相对于父元素的字体大小
rem：相对单位，相对于根元素（html）字体大小

vh、vw

100vh视口的高度
100vw视口的宽度

vh，vw与%的区别

没有滚动条的时候：
100vw==100%

有滚动条的时候
100vw包含滚动条，窗口大小
100% 刨除滚动条 剩余空间占满

背景色渐变

线性渐变

语法
background：linear-gradient（direction，color，color…）
direction：默认时to bottom

径向渐变

语法
background：radial-gradient（center，shape，size，start-color，…，last-color）
center：渐变起点的位置，可以是百分比，默认是图形的正中心
shape：渐变的形状，ellipse表示椭圆形，circle表示圆形。默认是ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样。
size:渐变的大小，即渐变到哪里停止，它有四个值。closest：最近边；farthest：最远边；closest-corner：最近角；farthest-corner：最远角；

设置渐变形状

div{background:radial-gradient(circle,red,yellow,green);}
div{background:radial-gradient(ellipse,red,yellow,green)}

不同尺寸的渐变

div{background:radial-gradient(60% 40%,closest-side,blue,green,yellow,black);}

div{background:radial-gradient(60% 40%,farthest-side,blue,green,yellow,black);}

div{background:radial-gradient(60% 40%,closest-coner,blue,green,yellow,black);}

div{background:radial-gradient(60% 40%,farthest-corner,blue,green,yellow,black);}

重复渐变

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

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

CSS动画

transform

改变盒子再平面内的形态（位移，旋转，缩放）

优点：
设置left属性会频繁的造成浏览器回流重排，而transform和opacity属性不会，因为它是作为合成图层发送到GPU上，由显卡执行的渲染，这样做的优化如下
·可以通过亚像素精度得到一个运行再特殊优化过的单位图形任务上的平滑动画，并且运行的非常快
·动画不再绑定到CPU重排，而是通过GPU合成图像。即使运行一个非常复杂的JavaScript任务，动画任然会很快运行。

transform-origin

可以设置动画的“起点”“中心点”

transition

取值 all 5s linear 3s
简写：transition：all/具体属性 运动时间s/ms 延迟时间s/ms 动画类型

CSS3的transition允许CSS的属性值再一定的时间区间内平滑地过渡。这种兄啊过可以在鼠标点击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值

all：单一属性：transition-property：检索或设置对象中的参与过渡的属性
5s：单一属性：transition-duration：检索或设置对象过渡的持续时间
3s：单一属性：transition-delay：检索或设置对象延迟过渡的时间
linear：单一属性：transition-timing-function：检索或设置对象中过度的动画类型

transition-timing-fuction：检索或设置对象中过渡的动画类型

贝塞尔曲线：
属性值：cubic-bezier（）
进入贝塞尔曲线网址可以制作或找寻自己想要的动画

逐帧动画：transition-timing-function：steps（动画执行的步数）；

translate（）

将元素向指定的方向移动，类似于position中的relative
水平移动：向右移动translate（tx，0）和向左移动translate（-tx，0）；
垂直移动：向上移动translate（0，-ty）和向下移动translate（0，ty）；
对角移动：右下角移动translate（tx，ty）、右上角移动translate（tx，-ty）、左上角移动（-tx，-ty）和左下角移动translate（-tx，ty）。

translateX（）：水平方向移动一个对象。对象只向X轴进行移动，如果值为正值，对象向右移动；如果值为负值，对象向左移动。translateY（）：纵轴方向移动一个对象。对象只向Y轴进行移动，如果值为正值，对象向下移动；如果值为负值，对象向上移动。

scale（）

让元素根据中心远点对对象进行缩放。默认的值为1.因此0.01到0.99之间的任何值，使一个元素缩小；二任何大于或等于1.01的值，让元素显得更大。
缩放scale（）函数和translate（）函数的语法非常相似，他可以接受一个值，也可以同时接受两个值，如果只有一个值时，其第二个值默认与第一个值相等。

rotate（）

旋转rotate（）函数通过指定的角度参数对元素根据对象远点指定一个2D旋转。它主要在二维空间内进行操作，接受一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对远点中心逆时针旋转。
rotateX（）方法，元素围绕其X轴以给定的度数进行旋转
rotatY（）方法，元素围绕其Y轴以给定的度数进行旋转

skew（）

倾斜skew（）函数能够让元素倾斜显示。它可以将以一个对象以其中心位置围绕X轴和Y轴按照一定的角度倾斜。
一个参数时：表示水平方向的倾斜角度；
两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度

shewX正值，拽右下角，往右边拉动
shewY正值，拽右下角，往下拉动

animation

语法：
animation：动画名称 动画的持续时间 动画的过渡类型 动画延迟的时间 动画的循环次数 动画在循环中是否反向运动
infinite：无限次循环

animation-name：检索或设置对象所应用的动画名称
animation-duration：检索或设置对象动画的持续时间
animation-timing-function：检索或设置对象动画的过渡类型（linear：线性过渡；ease：平滑过渡；ease-in：由慢到块；ease-out：由快到慢；ease-in-out：由慢到快再到慢）
animation-delay：检索或设置对象动画延迟的时间
animation-iteration-count：检索或设置对象动画的循环次数
animation-direction：检索或设置对象动画再循环中是否反向运动（normal：正常方向；reverse：反方向运行；alternate：动画先正常运行再反方向运行，并持续交替运行；alternate-reverse：动画先反方向运行再正方向运行，并持续交替运行）

3D世界

3D位移
translateZ（）/translate3d（）
3D旋转
rotateX（）/rotateY（）/rotateZ（）/rotate3d（）
3D缩放
scaleZ（）/scale3d（）

景深

近大远小
程序中实现的方法 perspective 袁术距离 视线的距离（物体和眼睛的距离越小，近大远小的效果越明显）
perspective：1200px；（在父元素中使用）
transform：perspective（1200px）（在子元素中使用）
两个都设置会发生冲突，建议只设置父元素，通常的数值在9000-1200之间
如果当你的视线距离物体足够远的时候，基本上就不会有近大远小的感觉

perspective-origin；
观察3d元素的（位置）角度
perspective-origin：center center（中心）
perspective-origin：left top（左上角）
perspective-origin：100% 100%（右下角）

网格布局

行列布局

固定宽高

CSS
grid-template-rows:200px 200px 200px//每一行行高
grid-template-columns:200px 200px 200px //每一列列宽

repeat

CSS
grid-template-rows:repeat(3,200px)//三行200px行高
grid-template-columns:repeat(3,200px)//三列200px列宽

auto-fill

CSS
grid-template-rows:repeat(auto-fill,25%)//25%自动填充四份行高为25%的行
grid-template-columns:repeat(auto-fill,25%)//25%自动填充四份列宽为25%的列

fr片段

填充自适应

CSS
grid-template-rows:1fr 1fr 1fr//等分三份
grid-template-columns:1fr 1fr 1fr//等分三份

minmax

CSS
grid-template-rows:minmax（100px，200px） 200px 200px//有位置最多占200px，没位置最少占100px
grid-template-columns:200px 200px 200px

auto

约等于1fr，自动填充

CSS
grid-template-rows:200px auto 200px
grid-template-columns:200px auto 200px

grid-auto-flow

默认值：row，朝→方向排序
column：朝下方向排序

justify-content

块中的水平格子布局

align-content

块中的垂直格子布局

间距

grid-row-gap

行间距

grid-column-gap

列间距

grid-gap

复合式写法

区域合并

命名

grid-template-areas:'a a c'
								 'd e f'
								 'g h i'

.box div:nth-child(1){
	grid-area:a;//第一块占a a
}

start、end

.box div:nth-child(1){
	grid-column-start:1
	grid-column-end:3
	grid-row-start:1
	grid-row-end:3
}

.box div:nth-child(1){
	grid-column:1/3
	grid-row:1/3
}