NO.1-M2

一，CSS盒模型

 

　　1，当父盒子包裹子盒子，且上边线重合时，给子盒子添加margin-top时，子盒子与父盒子的上边线并不能分开，,而是导致，两个盒子同时下来,而是导致，两个盒子同时下来

　　　　　　使两条上边线分开的解决办法

　　　　　　　　1，给父盒子添加一点padding-top：1px； 不推荐使用，会导致父盒子结构多余1px的padding

　　　　　　　　2,给父盒子添加1px的border-top；会导致1px的多余空间，不推荐使用；

　　　　　　　　3，给父盒子或子盒子添加浮动； 可能会由于浮动一定程度的影响页面的布局；

　　　　　　　　4， 给父盒子添加overflow:hidden;属性；推荐使用的方式

　　2，border-radius 圆角

　　　　　　　　1，border-radius可以接收8个属性值（空格分开），分别表示 x轴（左上，右上，右下，左下）/Y轴（左上，右上，右下，左下）

 　　　　　　　　 2，缩写形式

  　　　　　　　　　　  只写x轴，Y轴默认等于X轴；     四个角写不全，默认对角相等；      只写一个值，默认8个数均等

 　　　　　　　　　　　　 eg：border-radius:50px 20px ;

 　　　　　　　　　　　　　　　　　　   =border-radius:50px 20px 50px 20px ;

  　　　　　　　　　　　　　　　　　　=border-radius:50px 20px 50px 20px/50px 20px 50px 20px ;

　　　　　　　　  3，当圆角弧度>=正方形边长的一半，将会显示为圆形。

3，border-image 图片边框

　　　　1，border-image:共可以放10个属性值：

　　　　　　① 图片路径：url（）

　　　　　　② 图片的切片宽度：4个值；分别代表上下左右四条边；

  　　　　　　　　　　　　　　 通过4条切线，可以将图片分为九宫格，九宫格四个角分别对应边框的四个角（不会进行任何拉伸），

 　　　　　　　　　　　　　　　  九宫格四条边分别对应四条边框（会根据设置进行拉伸/铺完/重复等操作）

　　　　　　　　　　　　　　　　注意：写的时候，一定不能带px单位

　　　　　　③ 边框的宽度：4个值：分别代表上下左右四条边的宽度；（值的大小，表示填充图片的大小，包括4个角处图片的大小）

 　　　　　　　　　　　　　　   注意：写的时候，必须带px单位。与切片宽度用/分隔！！！

 

　　　　　　④ 边框的重复方式： stretch-拉伸 round-铺满 repeat-重复

【round和repeat的区别】

　　　　　　　　round：会对四条边进行适当的拉伸压缩，确保四条边可以重复整数次。

　　　　　　　　repeat：会保持四条边的宽度长度比例不变，可能导致四角出，无法显示一条完整的边

　　　　2，属性值的写法：border-image：① ②/③px ④；

　　　　3，border-image在webkit内核的浏览器中，必须带-webkit-前缀

　　　　4， box-shadow盒子阴影,

　　　　　　　　1,6个属性值：空格分离

　　　　　　　　　　① X轴阴影距离（必选），可正可负，正--右移；负--左移

　　　　　　　　　　② Y轴阴影距离（必选），可正可负，正--下移；负--上移

　　　　　　　　　　　　　　（阴影相对原对象上下左右移动的距离，这不改变阴影的大小）

　　　　　　　　　　③ 阴影模糊半径（可选），只能为正，默认为0，数值越大，阴影越模糊；

　　　　　　　　　　　　　　（在已有阴影的边缘模糊一段距离）

　　　　　　　　　　④ 阴影扩展半径（可选），可正可负，默认为0，数值越大，阴影扩大；数值越小，阴影缩小。

   　　　　　　　　　　　　　 （在已有的阴影上往外扩展距离）

　　　　　　　　　　⑤ 阴影颜色（可选），默认黑色。

　　　　　　　　　　⑥ 内外阴影（可选），默认为外阴影， inset：内阴影

　　　　　　　　　　　　　　　　注意： 没有outset

5，显示三角形

<div style="border: 50px solid rgba(255,0,0,0);width: 0;height: 0;

border-left: 50px solid red;"></div>

6，显示正六边形

<div style="border: 30px solid rgba(255,0,0,0);width: 60px;height: 0;

border-bottom: 50px solid red;"></div>

<div style="border: 30px solid rgba(255,0,0,0);width: 60px;height: 0;

border-top: 50px solid red;"></div>

二， 浮动

1,标准流中的块级盒子，宽度将会自动伸展为100%， 而浮动盒子，宽度不会自动撑开,由文字内容撑开

 

2,当一个盒子浮动，标准流中未浮动的其他盒子，将视浮动盒子不存在，而占据盒子原来的位置，（浮动盒子，会盖在这个盒子的上方），但是，未浮动盒子中的文字内容，将会受到浮动盒子宽度的印象，（未浮动盒子的内容，不会）

 

3，由于第二条的原因。

　　  可以给受影响的盒子，添加clear属性，清除浮动盒子对自身的影响

　　clear可选值： left--清除左浮动影响， right--清除有浮动影响；both--同时清除左右浮动影响

 

4,父盒子没有指定高度。如果，子盒子没有浮动，则父盒子的高度可以被子盒撑开。 如果，父盒子中的所有子盒子都浮动，则父盒子高度将变为0

 

5，解决所有子盒子都浮动，父盒子高度都塌陷的问题

  　　1，给父盒子也添加浮动，

　　  2，给父盒子添加overflow：hidden；属性    （推荐使用！！！！）

　　  3，在父盒子最后添加一个高度为0 的空div。给这个div添加clear：both；属性，清除浮动效果

　　  4， ④可以将第三条的div，用为对象选择器：：after实现；
     　　　　　　   #div::after{
      　　　　　　　　　　    display:block;
       　　　　　　　　　　   content:"";
       　　　　　　　　　　   height:0px;
       　　　　　　　　　　   clear:both;
    　　　　　　　　　　     }

6，盒子模型分类

　　1，标准盒子（W3C盒子）：我们设置的高宽，仅仅包含content的部分；再添加padding或border，会导致盒子变大

　　2，IE盒子（怪异盒子）：我们设置的高宽，仅仅包含padding的部分；再添加padding或border，会导致盒子变小

 

三，定位

一，相对定位 relative（ 原来的位置相对于现在的位置）

  　　1，使用position：relative：设置元素相对定位元素；

  　　2，使用top，left，right，bottom调整元素的位置

 　　　　　　　　　　  当left和right同时存在时，left生效，当top和bottom同时存在时，top生效

　　  3，定位机制：

　　　　　  　①相对定位是相对于自己原来的位置定位。当top等属性不指定时，元素位置不发生改变

  　　　　　　②相对定位，不会释放掉元素在原有文档流中的位置，不会影响其他文档流元素的位置；

　　 4，关于元素z轴重叠：

     　　　　　  ①定位元素默认的z轴高于普通的文档流元素

　　　　　　　②同为定位元素，“后来者居上”。即后面的盖住前面的

　　　　　　　③ 同为定位元素，可以使用z-index手动调节定位元素的上下层z轴顺序；即属性值大的在上面

                                        z-index默认为0（无论是否为定位元素，z-index属性值高者在上即：当定位元素的z-index小于普通文档流时，普通文档流在上），且只能作用于定位元素。

二，绝对定位

　　　　1，使用position：absolute：设置元素为绝对定位

　　　　2，定位机制

　　　　　　①相对于第一个非static）定位的祖先元素进行定位。　　　　即：相对于使用了relative，absolute，fixed定位的祖先元素进行定位

　　　　　　②如果所有的祖先元素都未定位，则相对于浏览器左上角进行定位

　　　　　　③使用absolute的元素，会从文档流中完全删除。原有空间会被释放 (也有后来者居上)当祖先元素用relative定位时，祖先元素位置移动时，里面的所有元素都等同移动

三，固定定位 fixed

　　　　1，使用position：fixed：设置固定定位

　　　　　　　　　　固定定位是一种特殊的绝对定位，只是祖先元素无法使用定位锁住

　　　　2，定位机制

　　　　　　　　永远相对于浏览器的左上角进行定位，且不随滚动条的滚动而滚动

四，z-index属性

　　　　1，作用：根据z-index属性设置的  数值，决定元素在z轴方向上的层叠顺序

　　　　2，使用要求：

　　　　　　①z-index  只能给定位元素调整层叠顺序。 relative，absolute，fixed

　　　　　　② 元素的z-index属性要考虑父容器z-index的约束

　　　　　　》》如果，父容器设置了z-index属性。则子容器的所有元素，将不能脱离父容器的约束。

　　　　　　　　　　　　即，父容器设置了z-index，则子容器只能以父容器的数值为准。　再给与子容器设置z-index，只能调整子容器在父容器层次之内的层叠次序）

　　　　　　》》如果，父容器没有设置z-index，或者设置为z-index：auto；则子容器调整z-inded将不受父容器层次的约束

  　　　3，z-index：auto；和z-index：0；的异同

　　　　　　　　同 ①z-index：auto；是默认值，与z-index：0；处于同一平面；

　　　　　　　　异 ②z-index：0；会约束子元素必须与父容器在同一平面；

   　　　　　　　　　　 z-index：auto；不会约束子元素的层次。

 

五，clip属性

　　　　1，作用：clip属性用于裁切图片标签，显示图片的指定区域

　　　　2，使用要求：clip属性只能作用于有absolution或fixed定位的图片标签上

　　　　3，clip属性，只接受一个rect（）函数，函数传入四个值，

　　　　　　　　上下两个值得距离都是从上边量取，左右两个值都是从左边量取

　　　　　　　　 eg： clip: rect(0px,126px,126px,0px);

六，负边距

1， 水平居中

　　　　　　1,实现块级元素在父容器中水平居中

 　　　　　　　　 ①设置子容器为定位元素

  　　　　　　　　②left：50%；  margin-left：-width/2；

   　　　　　　　　  top：50%; margin-top:-height/2;

  　　　　　  2，使用负边距增大元素的宽度

　　　　　　　　①，子容器的宽度不指定；只指定高度或者由内容撑开高度；

　　　　　　　　②，margin：0px -50px；可以使左右两边，均超出父容器50px

 

 CSS新增属性

 

一.  display属性

　　可以设置元素以何种状态显示，可选值：

　　　　　　none：隐藏元素；

　　　　　　block：显示为块级元素；

　　　　　　inline：显示为行级元素；

　　　　　　inline-block：显示为内联块级元素本身将是一个行级元素，但是，拥有块级元素的所有属性，比如宽高，margin，padding等。。。

　　　　　　【常见的inline-block级别的标签】

　　　　　　<img/>  <input/> <textarea></textarea> <td></td>

 

二.  隐藏一个元素的方式

　　　　1，宽或高设为0px，配合overflow：hidden；属性

　　　　2，display：none；  显示display：block：

　　　　3，opacity：0；设为全透明。但是元素的空间会占据

　　　　4，visibility：hidden；隐藏元素，但是元素所在空间依然会占据。与opacity：0；效果很像

　　　　　　　　显示隐藏的元素：，visibility：visible

三. CSS3新增的属性前缀

　　　　1，-webkit-：chrome/Safari浏览器

　　　　2，-moz-：火狐浏览器

　　　　3，-ms- ：IE浏览器

　　　　4，-o-  ： Opra 欧朋浏览器

四. CSS长度单位

　　　　1，px  表示长度。长度是固定的，表示占分辨率的几个像素点

　　　　2，%  表示相对于默认值的宝粉笔

　　　　3,em:  长度与元素的字号挂钩 即，长度为几倍字号

　　　　4，rem: 与根元素的字号挂钩。即，与HTML标签的font-size挂钩。

　　　　　　　　　　如果，不设置则默认字号为16px。

五. em与rem的区别

　　　　1，em是与当前元素自身的font-size挂钩，如果当前元素没有设置，则向上查找最近的祖先元素，知道跟字号。

　　　　2，rem与当前元素无关，直接与跟字号挂钩。

 

六. CSS3背景属性

　　　　1，backgroud-clip:设置背景图或背景色的裁切显示区域。（不改变图片的位置，只改变图片的显示区域）

border-box从边框边缘开始显示，

　　　　　　padding-box，从边框内缘开始显示

　　　　　　content-box，从文字内容开始显示

  　　　　　　　　》》如果不在显示区域的背景图或背景色，会被裁切不显示。

　　　　2，background-origin: 设置背景图从哪里开始定位。

　　　　　　　　　》》border-box  背景图左上角从边框外援开始

 　　　　　　　　 》》padding-box，背景图左上角从内缘开始

 　　　　　　　　 》》content-box，背景图左上角从文字内容开始

　　　　3，background-origin:不会改变背景图显示区域的大小，只是决定背景图左上角从哪里开始定位。

　　　　　backgroud-clip:只负责裁切出显示区域，但是并不关心背景图定位在哪里。

　　　　4,background-attachment:背景图的附着方式

　　　　　　》》scroll：背景图跟随区域滚动。默认效果。

　　　　　　》》fixed：背景图充满整个区域并且背景图是固定的，不随滚动条滚动

　　　　5.background缩写形式

　　　　　　backgroud:background-color 　　background-image　　 background-repeat 　　　　background-attachment 　　background-position ;

 

七. transition: all .5s linear;过渡属性接受4个属性值

  　　1，设置哪个CSS属性参与过渡；可以直接指定all/none

 　　 2，过渡多少时间完成，通常，.3s  .5s

  　　3，过渡的样式效果。通常选ease

 　　 4，过渡延时几秒后在开始，可省略

　　　　　　transition:属性可以同时定义多个过渡效果，用逗号隔开

　　　　　　　　eg：transition:height .5s linear ease,width .5s linear ease;

 

八. transform:定义变换属性

　　　　1，常用的变换属性

　　　　　　　　》》translate（10px，10px）平移，第二个不写，默认为0，

　　　　　　　　》》scale（1.1）缩放，第二个不写，默认等于第一个，

　　　　　　　　》》rotate（90deg）旋转 ，默认绕z轴转，可以使用rotatex（） 绕x轴转等

　　　　　　　　》》skew（20deg，20deg）扭曲；水平，垂直方向扭曲多少度

　　　　2，transform-origin：定义变换起点，常用于旋转变换

　　　　　　　　可选值：left/center/right  bottom/center/top

　　　　　　　　也可以直接指定x，y轴坐标点，第一个数为x轴

　　　　　　　　　　例如：  transform：rotate（90deg）；

    　　　　　　　　　　  transform-origin：right bottom；

　　　　　　　　　　　　表示：绕右下角旋转90度

 

 

CSS动画的使用

　　　　1，声明一个关键帧（动画）

  　　　　　　　　 @keyframes name{

  　　　　　　　　　　　　　　　　from{}

　　　　　　　　　　　　　　　　　to{}

 　　　　　　　　　　　　　　 }

　　　　　　　　阶段的写法

  　　　　　　　　　　①，可以直接使用from-to的写法

 　　　　　　　　　　   ②，可以设置0%-100%的写法，但开头和结尾必须是0%和100%

　　　　2，在CSS选择器中，使用animation调用声明好的动画；

【animation的缩写形式】

　　　　　　Animation-name:动画名称。--就是我们声明的关键帧name

　　　　　　Animation-duration：动画持续时间

　　　　　　Animation-timing-function：动画速度曲线。--常选 ease

　　　　　　Animation-delay：动画开始的时间，延迟时间

　　　　　　Animation-iteration-count：动画播放次数，默认为1.--infinite：无限次播放

　　　　　　Animation-direction：动画在下一个是否逆向播放，默认为normal--表示不进行逆向播放。--alternate--下次逆向播放，即从100%到0%

　　　　　　Animation-fill-mode：表示动画结束后，停留在何种状态，要使用该属性，必须无限次播放。

　　　　　　　　　　　　　　　　　　　　forwards--结束状态；backwars--初始状态；默认效果

　　　　　　　　　　》》animation-name和animation-duration必须设置，其他的选填；

　　　　　　　　　　》》animation可以同时设置多个动画，多个动画之间用逗号隔开

　　　　　　　　　　　　　　animation：framel 1s，frame2 2s.....