div+css常用属性(持续更新)

div+css

盒子属性：

1.scrollHeight:盒子内容高度 
2.offsetHeight:盒子总高度 content+border
3.clientHeight:可见部分高度，content

背景样式：

1. Background-color:单词/rgb/rgba(opacity)/十六进制
2.`Background-imge:url(“”);（位置）或加渐变
3. background-repeat:no-repeat;（不平铺）
4. background-size:10px 10px;cover（大小）
5. background-origin&background-clip:content-box&border-box&padding-box(基点)
6. background-attachment:fixed;（背景图片关联：固定）

复合写法：

background:color url() repeat position/size attachment，可重复（但不能加颜色）;
如：background:red url(“”) no-repeat 0/100px 100px fixed；
如：background: url(“”) fixed，url(“”)；

background-imge: linear-gradient()（为了代替图片）

一、线性渐变：
<1>linear-gradient(方向,color 0%,color 50%,color 100%);
方向:1、to right/to top right 2、角度值:顺时针:0deg=top;
<2>用像素值linear-gradient (方向,color 0,color 5px,color 10px); 
linear-gradient-repeating()
二、径向渐变：
<1>radial-gradient:(中心点，渐变半径值,color 0%,color 50%,color 100%)
中心点：默认中间；可以：at 100px 100px,
<2>用像素值radial-gradient(中心值,color 10px,color 20px;)

圆角属性：

border-radius:10px;三个值：左上 右上左下 右下
八个值：四个角的椭圆长半轴短半轴

浮动：记得清除浮动，多用伪元素

float:

特性：脱离文档流；有行内块换行特性，但不同的是会被挡住，要定宽；父级盒子塌陷，不能撑开高度；
解决高度塌陷：父级加高&父级加overflow（bfc机制）&clear:both用在父级相邻的元素里（可以用伪元素）;

定位：用完定位最好写层级

position:absolute&relative&fixed;
相对定位：原来的位置不会被占据

1、默认参考元素为直系最高长辈元素，而且参考元素只能为长辈元素
2、以添加了相对定位||绝对定位的长辈元素为参考元素
3、父相子随；
4、脱离文档流
5、宽度百分数是相对于参考元素
6、层级z-index:在0-1之间```
固定定位：fixed;
！！居中方法：1、top:0:left:0;right:0;bottom:0;margin:auto;
2、top:50%;left:50%;margin-top:负一半;margin-left:负一半；

overflow

• 对子元素超出父级元素的处理

表单：

input属性：type：text,date,time,password,email,number,file,
Number属性还可以设置step,min,max

表格：

Table:
Thead:一般省略
Tbody:
Tr:
border-collapse:collapse(td不分隔)默认不分隔()
border-spacing:px;td之间的间距;
Td合并：横向:colspan;纵向:rowspan;
Tfoot: 一般省略

高级选择器：

1. 伪类选择器：
:hover
:active鼠标按下
:checked:被选中
2. 结构性伪类选择器
xxx:nth-child(n){}表示xxx父级的第几个xxx同类型标签的儿子（xxx:nth-last-child(n){}倒数第几个）
3. 属性选择器：
[class]、[name]  全部class或name属性
Li[class^=”text”]:li中以text类名开头的元素   如class=‘text haha’会被选择
Li[class$=”text”]:li中以text类名结尾的元素

css3动画：

1. 被动触发：伪类选择器式的动画，只需要开始和结束帧

* 添加时间：transition-duration:1s;
* 第一帧开始的时间：transition-delay：1s;
* 限定哪个属性有动画效果：transition-property:属性
* 速度：transition-timing-function：
* 属性：linear,匀速
	1) ease,低速-加速-低速
	2)ease-in:低速-高速
	3)ease-out:高速-低速
	4)ease-in-out:低速-高速-低速
	5)cubic-bezier(x,x,x,x)贝塞尔曲线
* 复合写法：transition：属性(all) 过度时间 过度速率 动画延时

2. 主动触发：

a. 创建动画帧

@keyframes 动画名称{
	0%{	}
	0.1%{	}
	0.5%{	}
	……
	100%{	}

}

b. 添加动画：animation-name:动画名称;
c. 添加时间：animation-duration:3s;
d. 第一帧开始时间：animation-delay:1s;
e. 速率：
*	属性：animation-timing-function：
f.  播放次数：animation-iteration-count：2；
*	属性：infinite 无限循环
g. 执行完后逆向执行：animation-direction：alternate；
h. 添加开始/暂停伪类：
*	animation-play-state：running/paused
i. 最终状态停在最终位置：animation-fill-mode：forwards；
*	复合写法：animation：name 速率 运动时间 开始时间
j. 播放次数 逆向 

变换：

Transform:

属性：
    移动：translateZ();
    旋转：rotateZ(); ，默认绕着中心旋转
    缩放：scale();（里边为倍数）
    倾斜：Skew()
	变换的基点：transform-origin:1px 1px;关键字top center,top left,

3D

1. 景深：3d视角位置；perspective:800px;
2. 3d属性：transform-style:preserve-3d;

阴影：

1、box-shadow:1px 1px 1px 1px color inset;

第一个x轴方向，第二个y轴方向，第三个模糊程度，第四个阴影半径，第五个颜色，第六个inset(内阴影)默认outset

2、text-shadow:没有inset

3、阴影叠加：用，隔开

box-shadow:1px 1px 1px 1px color



***\*兼容性：\****

-webkit-  谷歌

-moz-  火狐

-ms-  ie

滤镜：

Filter:

亮度：brightness() >1亮，1<暗 

对比度：contrast(百分比)   使区域的颜色变得显眼 

模糊：blur(像素)

色调
（黑白）：graycale(百分数)  0%无变化，
（褐黄）sepia(百分数)

弹性盒子：

• display:flex;规定子元素在父级元素的位置，子元素会沿着父元素x轴排列

1. 方向属性：flex-direction:

row  左到右
row-reverse  右到左
column   上到下
column-reverse   从下到上

2. 换行属性：

• Flex-wrap:（默认不换行）

3. 元素主轴方向排列方式
   Justify-content:

  Flex-start  (默认值)  左对齐
  Flex-end  右对齐
  Center 左右居中
  Space-between  两端对齐  元素之间间隔相等
  Space-around  元素之间的间隔是相等的，每个元素都有间隔

4. 元素纵轴方向排列方式
   Align-items：

  Flex-start  纵轴上对齐
  Flex-end   纵轴下对齐
  Center  上下居中对齐
  Baseline  基线对齐
   Stretch  （默认值） 子元素没有设置高度时将沾满整个容器高度

初学(^o)/~h5

1.iframe

• 跨域问题