css3基础

以下是个人笔记：

属性选择器

div li input[type="password"]{

样式

}

[class~="download"]{ }

E[attr~="属性值"] 表示的是一个单独的属性值 这个属性值以空格分隔

[class|="download"]{ }

E[attr|="属性值"] 表示的是一个单独的属性值 这个属性值以 | 分隔

[class*="download"]{ }

E[attr*="属性值"] 表示只要有这个属性值字符就可以

[class^="download"]{ }

E[attr^="属性值"] 表示要有这个属性值字符 且这个属性值必须在最前边

[class$="download"]{ }

E[attr$="属性值"] 表示要有这个属性值字符 且这个属性值必须在最后边

伪类选择器

dd:first-child{} 指的是dd的父元素下的第一个元素 且这个元素必须为对应元素dd

dd:last-child{} 指的是dd的父元素下的最后一个元素 且这个元素必须为对应元素dd

dd:first-of-type{}指的是dd的父元素下所有的dd元素中第一个dd类型的元素

dd:last-of-type{}指的是dd的父元素下所有的dd元素中最后一个dd类型的元素

dd:nth-last-of-type（参数）{}值得是从后往前数第几个

dd:nth-of-type(参数){}参数指的是dd的父元素下所有的dd元素中第几个dd类型的元素 参数从1开始

dd:nth-child(参数){}指的是dd的父元素下所有子元素的第几个 参数是几就是第几个

带有nth的 后边的参数可以写 n 表示选中所有 2n 表示选中2的倍数------ n从0开始小于最大值

dd:only-of-type{}指的是所有dd的父元素下只有一个dd元素的dd元素

p: empty 表示选中没有内容的p元素

div:target{ 这个样式} 表示锚点跳到那个 div 那个div就添加上这个样式

P：before p:after 表示在P标签前后增加一个假元素 里边可以添加内容

P::before 表示在P元素下的子元素中的最前边增加一个 假元素 里边可以添加内容

p:selection{} 表示p里边的内容被选中时改变样式

颜色透明：

透明 rgba(0-255,0-255,0-255,0-1)只是自己透明 opacity表示自己及子元素全透明

hsla(0-360,0%-100%,0%-100%,0-1)

文字：

文字阴影 text-shadow:2px 2px 5px #ccc;

文本换行：

work-break：break-all;打断所有 work-wrap:break-work; 打断单词

white-space:pre; 保留空格 但不换行（会离开父盒子)

white-space：pre-wrap;保留空格且在父盒子内换行

white-space：pre-line;保留（部分）空格 去掉了空行 （只有enter键是空行）

white-space：nowarp;去掉所有空格且强制不换行

text -overflow：ellipsis;//是溢出的部分变成省略号显示在文本框内

依赖于：overflow：hidden； 和 white-space：nowarp;

多行文本文字溢出处理，非标准属性。

text -overflow：ellipsis;

display：-webkit-box; -webkit-line-clanp:3;(这个数字是显示行数) -webkit-box-orient;vertical;

依赖于：overflow：hidden；

边框：（看例子）

圆角处理时，脑中要形成圆 ，圆心，长半径，短半径，的概念正圆是椭圆的一种特殊情况

border-radius: 四个横径 / 四个竖径；

利用border-width: 大小; 制作

/*内容50 外边框50 圆角从外往内数30 所以影响不到内容50*/

边框阴影：

/*这四个数值 前两个值表示向右 下 方的偏移量 可以为负值（就是左 上 方） 后两个 一个表示模糊度 一个是阴影颜色 */

box-shadow:2px2px5px#000;

/*第四个值表示 在原有阴影基础上再次向四周扩展5px便宜量和扩展相加 扩展可以为负值*/

box-shadow:2px2px5px5px#000;

/*内阴影 向内部给阴影*/

box-shadow:inset2px2px5px5px#000;

边框背景：

border-image-source:url();//引入图片

border-image-slice:20 30 40 30;四道线划分

border-image-width:10px;边框背静宽度

border-image-repeat: round; 除去四个角剩余的部分是否平铺 如果没有就会拉伸剩余部分 //round不会截断 repeat会有截断 可以有两个参数前一个上下 后一个控制左右 stretch伸缩不会平铺

盒模型：

ie盒模型只会出现在ie5及ie6+的怪异模式中 width=boder + padding + 内容

正常是width =内容

如何转换为ie盒模型 box-sizing : boder-box; //算到border box-sizing:padding-box;算到padding

背景：

修改填充区：

background-clip: content - box;修改背景区域 改为只内容有背景 border - box；默认背景填充区

padding-box;以padding为界限填充背景

修改定位原点：

background - origin：border-box; 修改定位原点 默认是padding开始可以修改为border-box 和content-box;

修改背景图片大小：

background-size: 100% 100%; 将图片伸缩到背景的100% auto自动伸缩；

background-size：cover；按照最大边，进行缩放 另一边同比缩放，超出部分溢出，溢出部分隐藏

background-size:contain;按照最小边，进行缩放 另一边同比缩放，不一定铺满

线性渐变：

background-image：linear-gradient(blue,green，red); //从蓝色渐变到绿色到红色 参数个数任意

background-image：linear-gradient(90deg,green，red);用角度确定方向 正上方0度顺时针旋转

background-image：linear-gradient(to top,green，red);用关键字 来确定方向

background-image：linear-gradient(to left,green 30%，red30%,blue);

到30%是绿 30%到100%是从红渐变到蓝 （而且 颜色的出现顺序是按照百分比的大小排列）

径向渐变：

background-image：radial-gradient(blue,green);//从中心向四周渐变

background-image：radial-gradient(120px at center center blue,green);//120px辐射范围 center center 中心点

background-image：radial-gradient(120px 80px at 20px 40px blue,green);

//120 横范围 80竖范围 20 40 是中心点的位置

重复线性：background-image：repeating-linear-gradient(blue 10%,green 30%)

重复景径向：background-image：repeating-radial-gradient(blue 10%,green 30%)

伸缩布局：

使用

1.指定一个盒子为伸缩盒子display：flex;

2.设置属性调整此盒子的子盒子 的布局方式 例如 flex-direction（对齐布局）;

3.明确方向

1.对齐布局（均分）：

display：flex;

flex-direction:colum;默认为水平对齐 调整主轴方向 row（水平） ;colum（竖直） ;row -reverse（水平，靠右）; colum-reverse（竖直，靠下）;

2.调整主轴（水平，靠顶部）对齐方式

display：flex;

justify-content: flex-end;右对齐 flex-start;左对齐 center;居中 flex-around;环绕flex- between两端对齐

3.调整侧轴（靠左侧）对齐方式

display：flex;

align-items :flex-start; （靠左上）flex-end （靠左下）; center（靠左中） ; baseline以文字为基线, stretch拉伸（竖直占满）

4.控制是否换行：

display：flex;

flex-warp:warp;换行 nowarp不换行

5.堆栈排列(align-items + flex-warp)：

display：flex;

flex-warp;

align-content： 可对应用flex-warp 后 产生的换行进行控制，包括flex-start（全靠左上排几行） flex-end（全靠左下排几行） center（左中排几行） space-between（靠左上下排） space-around （靠左环绕）stretch（拉伸满） （这些属性跟3一样只不过就是盒子多点产生了换行）

6.控制子元素伸缩比例

display：flex;

flex:1; flxe2; flex:1; 将父盒子剩余部分分成3份 1 :2 ：1排列

7.(flex-warp+flex-direction)

flex-flow是flex-warp+flex-direction的简写形式

8.更改align-items中的个别元素

display：flex;

align-items；

align-self： ；//更改子元素用的

同align-items可覆盖父元素设置的algin-items，包括flex-start、flex-end、center、baseline、stretch （就是设置好align-item后，在对个别子元素进行操作 更改位置）

9；更改子元素顺序

order：数字； 子元素顺序按照给子元素设置的数字大小排列

多列布局：

-webkit-column-count:4;列数

-webkit-column-width:400px;列宽 当列数乘以列宽大于盒子宽时自动调整列数

-webkit-column-gap:33px;列与列之间的缝隙宽度

-webkit-column-rule:3px solid red;设置列于列之间给一条线

-webkit-column-span:all; all代表所有列 在所有列上边

过渡：

transition: all 1s; //all所有 1s过渡所需时间

当前元素只要有属性发生变化，就可以进行平滑的过度 例如 ：hover时

all参数可以换位特定的属性值 例如：transition: left 1s;

transition-property:left; 属性值

transitioin-duration：2s；过度时间

transition-timing-function:linear/ease;控制过度速度

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

transition-delay:4s; 动画等待时间

动画：

动画相比过度可以控制更多细节 将一个动画拆分成几个步骤

animation:change 5s infinite; steps(5);可以讲一个动画分几步完成

@keyframes change{0%{步骤1} 30%{步骤2} 77%{步骤3} 100%{步骤4} }

@keyframes change{from{ } to{ } }

该动画有8个属性

2D缩放：

通过scale（）；改变元素尺寸

transform: scale(x,y)； x y代表了两个放行缩放的倍数

2D旋转：

rotate（45deg）；

transform:rotate(45deg);表示顺时针旋转 可以为负值表示逆时针

2D移动：

translate（X，Y）；

transform：translate（30px,30px）；从当前位置移动到坐标位置 可以结合上边两个做动画

2D倾斜：

skew（45deg）；

transform:skew(45deg);倾斜45度

3D旋转

rotateX/Y/Z();可以实现xyz轴上的旋转

transform: rotateX(45deg)、transform: rotateY(90deg)、transform: rotateX(45deg)；

transform-origin：left bottom 0px；定位轴的位置；围绕那一点旋转//这个属性写在原样式里不是hover里边

媒体查询：

检测设备根据不同设备及条件调用不同的css3

<link rel="stylesheet" media="screen and (max-width:600px)" href="./css/blue.css">

<link rel="stylesheet" media="screen and (min-width:900px)" href="./css/red.css">

<link rel="stylesheet" media="screen and (min-width:1200px)" href="./css/yellow.css">

@media screen and (max-width:600px) {body {background-color: blue;}}

@media screen and (min-width:900px) {body {background-color: red;}}

判断鼠标进入容器方向

 $("div").on("mouseenter mouseleave",function(e) {

  var w = $(this).width(); // 得到盒子宽度

  var h = $(this).height();// 得到盒子高度

  var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);

  // 获取x值

  var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);

  // 获取y值

  var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4; //direction的值为“0,1,2,3”分别对应着“上，右，下，左”

  // 将点的坐标对应的弧度值换算成角度度数值

  var dirName = new Array('上方','右侧','下方','左侧');

  if(e.type == 'mouseenter'){

  $(this).html(dirName[direction]+'进入');

  }else{

  $(this).html(dirName[direction]+'离开');

  }

});

 原理代码：

以div容器的中心点作为圆心，以高和宽的最小值作为直径画圆，将圆以[π/4，3π/4)，[3π/4，5π/4），[5π/4，7π/4)，[-π/4，π/4)划分为四个象限，鼠标进入容器时的点的atan2(y,x)值在这四个象限里分别对应容器边框的下，右，上，左。

计算x坐标值时，如果点原来的x坐标的绝对值大于圆的半径值，则按 h/w 这个比例进行缩小，使得到的点的位置在容器的边界位置所对应的象限区间里。 y 坐标的计算也是一样。