2020-02-20

2月11日 背景样式操作

1.背景图片在背景颜色上面。背景颜色会延伸到border下面。背景层级:内容层>边框层>背景图片层>背景颜色层。
2.背景图片平铺 background-repeat默认repeat，no-repeat不平铺，repeat-x横平铺，repeat-y纵平铺。
3. 背景图片尺寸，background-size 关键字cover contain 百分比 设置宽高。
4.background-origin图片显示基点，不平铺是存在。border-box content-box padding-box。5.background- cilp背景图片裁剪属性同上。6.background- attchment背景图片关联依附。fixed local scroll。
7.background- position背景图片定位8.background复合写法color url repeat attchment position/size要按顺序。设置多张背景图片，背景颜色设置在最后面。

2月14日 圆角样式

1.圆角样式border-radius设置半径。改变四个角。
2.渐变色，线性渐变liner-gradient background- image(to 方向 颜色$%) ;0%到100%，还可以通过deg度数来调角度。向径渐变radial-gradient（at 位置）设置圆心。

2月15日 浮动

1.浮动样式，浮动元素不能用auto居中，已经脱离文档流了。
2.父元素高度塌陷，解决(1)设置父元素高度。(2) 给父元素BFC化overflow-hidden清除浮动带来的影响！clear:both;幽灵元素。clear清除之前！伪元素::after{ content “&”; display:block clear:both;}

2月17日 定位样式

1.定位样式absolute绝对定位脱离标准文档流，且会被后面的覆盖！top和left设置位置！
2.相对定位relative，相对父元素定位
3. 固定定位fixed top left right bottom四个值！
4.垂直居中top:50%;margin-top:-元素的一半;
5.父相子绝，父级相对定位后子级绝对定位就会以父级为基准！
6.通过z-index来给元素设置层级高度。
7.鼠标悬浮伪类div:hover{} div:hover img{}可以设置你想设置的元素。

2月20日 表单

1.form标签(表单域)放表单内容action用于存放表单提交地址，method提交方式get和post，get不安全提交的内容会出现在地址栏上且储存量小，post更安全。
2.input标签type="text"文本框type="password"密码框maxlength最大长度
3.单选按钮type="radio"单选联动给个相同的name,checked默认选择状态 value传回后端的值，占位提示符placeholder。
4.复选按钮type=“checkbox”,后端接受的是键值对name和value.
5.滑块type="rang"时间日期type=“time”， type=“date”。不同浏览器的展现的样式不一样。
6.颜色选择器type=“color”
7. 文件导入type="file"单个文件选中，多选中添加multiple。
.8.type="button"按钮button普通按钮，submit提交按钮，image图片按钮要设置src=地址。
9.label扩充域for
10.select下拉列表与option组合使用。selected默认选中。optgroup设置选项的组，label添加显示名称。
11.textarea多行文本域resize:none隐藏两个斜杠。
12.fieldset表单组legend组名两者样式都可以改。

2月21日

1.表格tr行td列，由tr包裹td。
2. 行合并colspan“” 列合并rowspan“”

2月22日伪类元素和伪类选择器

1.:link鼠标点击前样式
2.:visited鼠标点击后样式
3.:hover鼠标悬浮样式
4.:active鼠标点击时样式
5.顺序:link :visited :hover :active
6.:checked默认选中样式
7.:nth-child() ,:nth-off-type () 前者按照冒号前面的标签顺序数，后者按照子代里元素的顺序。括号可以用公式，但是未知数在前面。
8.伪元素多用清除浮动影响。
9.last-of-type锁定同一结构的最后一元素10.::selection被选中的内容
11.::after里必须要有content

2月24日

一.动画

触发式动画
1.transition-duration动画执行时间1000ms=1m
2.transition-delay延迟动画执行
3.transition-timing-function过渡动画时间参数默认值ease慢快慢，linear匀速，ease-in慢速开始，ease-out慢速结束，慢速开始和结束ease-in-out。
4.贝塞尔曲线cubic-bezier(，，，) http://cubic-bezier. com
5.transition- property:参与动画的属性名;过渡动画属性，none无属性，all全部参加。
6.复合写法，transition:property duration timing-function delay;属性名 动画时长 时间函数 延迟时长。

二.主动式动画

1.@keyframes 动画名称(animationname) {状态一｛样式一 ｝状态二｛样式二 ｝}要将animation-name:动画名称;放入要有动画的css里面。animation-duration:;动画执行时间，animation-iteration-count播放次数infinite循环播放，animation-timing-function时间函数，animtion-delay动画执行延迟，animtion-direction动画是否正反切换执行，normal正常执行，alternate正反向轮流执行，reverse反向执行，alternate-reverse反正向切换执行。
2.复合写法，animtion:name duration timing-function delay itertion-count direction ;名称 时长 延迟 时间函数 次数 方向。3.animtion-fill-mode 动画最后一帧样子，backwar
d保留第一帧，forwards保留最后一帧，both自适应。
4.animtion-on-paly-state paused暂停running播放2月25日一.transfrom样式1.rotate旋转，rotate(角度值deg) 2. scale缩放，scale(x，y) 3.translate移动，translate(x，y) 4.skew倾斜，skew(x，y) 5.transform-origin变化原点(x% y%)

2月26日

1.transform-style:preserve-3d;3D转化，perspective:值;要给父级，子级产生3D效果，允许改变3D元素查看3D视图，且只影响3D转换元素。

2月27日 盒阴影

1.box-shadow:盒阴影默认值none
2.h-shadow和v-shadow水平和垂直阴影偏移量，都必须写。
3.blur模糊距离
4spread阴影尺寸
5.color阴影颜色
6.outset/inset控制阴影内外方向
文字阴影
1.text-shadow，h-shadow和v-shadow都有，还有blur， color。
滤镜样式
1.filter滤镜属性默认值none
2.blur(px) 高斯模糊，值越大越模糊。
3.brightness (%) ，亮度，默认100%，0%黑，大于100%越来越亮。
4.contrast(%) ，对比度，默认100%，0%灰，大于100%对比越来越强。
5.drop-shadow图片阴影同盒子阴影。
6.grayscale灰度0%到100%。
7.hue-rotate色相旋转
8.invert(%) 反转输入图像
9.opacity(%)透明度，一些浏览器会提供硬件加速。10.saturate(%) 照片饱和度
11.sepia() 深褐色

2月28日 弹性盒模型

1.flexbox，给父级加flex display:flex;
2. flex-wap换行
3.flex-decorflex-grow弹性增长因子按比例在父级里增长flex-shrink弹性缩放因子空间不够时。flex-basis auto:1 1auto initial:0 1auto none:0 0 auto

3月2日 响应式布局

1.视口viewport content中的内容设置视口宽度=当前设备宽度响应式:一个网站兼容多个终端，而不是唯一终端特定版本。
优点:面对不同分辨率，设备灵活性高;快捷解决很多设备的适应问题;适合中小型网站。
缺点:因为要兼容各种设备，工作量很大，效率不高。代码冗余，会很多隐藏无用元素，加载时间长。
原理:通过CSS3新增的媒体查询，定制某个宽度区间的网页布局。
媒体查询:能检测到设备屏幕的宽度，通过不同宽度的值，显示不同的样式。超小屏幕(移动设备) 768px小屏屏幕(平板设备) 768px-992px中屏设备(标屏设备) 992px-1200px大屏设备(宽屏设备) 1200以上2.语法:@media 媒体类型 关键字 媒体特性{ }在and后要有空格