1.完成三栏规划(摆布双方牢固宽度,中心自适应)
1)浮动规划
摆布双方牢固宽度,并离别设置float:left
和float:right
。(但这会带来高度陷落的题目,所以要消灭浮动。消灭浮动的体式格局有:
a. 给父级盒子设置height
;
b.给父级盒子设置overflow:hidden
;
c.在父级盒子完毕前的盒子增加clear:both
;
d.父级盒子也设置浮动;
e.父级div
定义伪类:after
和zoom
,
.clear::after{display:block;clear:both;content:"";visibility:hidden;height:0;}
.clear{zoom:1;}
2)相对定位规划
左中右三个盒子都设置position:absolute
;然后离别设置定位
3)flex
规划
父盒子设置display:flex
;位于中心的子盒子设置flex:1
4)表格规划
父盒子设置display:table
;左中右三个盒子设置display:table-cell
;摆布两个盒子离别设置宽度;
5)网格规划
父盒子设置display:grid
; grid-template-columns:300px auto 300px
;
2.== 和 === 的区分
===
为恒等符:当等号双方的值为雷同范例的时刻,直接比较等号双方的值,值雷同则返回true
,若等号双方的值范例差别时直接返回false
。
==
为等值符: 当等号双方的值为雷同范例时比较值是不是雷同,范例差别时会发作范例的自动转换,转换为雷同的范例后再作比较。
a、假如一个是null
、一个是undefined
,那末相称。
b、假如一个是字符串,一个是数值,把字符串转换成数值再举行比较。
c、假如任一值是 true
,把它转换成 1
再比较;假如任一值是 false
,把它转换成 0
再比较。
d、假如一个是对象,另一个是数值或字符串,把对象转换成基本范例的值再比较。对象转换成基本范例,运用它的toString
或许valueOf
要领。 js
中心内置类,会尝试valueOf
先于toString
;破例的是Date
,Date
运用的是toString
转换。那些不是JavaScript
言语中心中的对象则经由历程各自的完成中定义的要领转换为原始值。
e、任何其他组合,都不相称。
3.transition和animation
transition
1)语法transition
是一个复合属性,可设置四个过渡属性,简写体式格局以下:transition{ transition-property transition-duration transition-timing-function transition-delay}
transition-property
:是用来指定当元素个中一个属性转变时实行transition
结果,值有none
(没有属性转变)、all
(默许值,一切属性转变),indent
(某个属性名,一条transition
划定规矩,只能定义一个属性的变化,不能触及多个属性,假如要设置多个属性时,需离别设置,中心以逗号离隔)【当其值为none
时,transition
立时住手实行,当指定为all
时,则元素发生任何属性值变化时都将实行transition
结果】;transition-duration
:过分时候,是用来指定元素转换历程的延续时候,单元为s
(秒)或ms
(毫秒);transition-timing-function
:时候函数,依据时候的推进去转变属性值的变更速度,值ease
(逐步变慢)、linear
(匀速)、ease-in
(加快)、ease-out
(减速)、ease-in-out
(加快然后减速)、cubic-bezier
:(自定义一个时候曲线);transition-delay
:耽误,指定一个动画最先实行的时候,也就是当转变元素属性值后多长时候最先实行transition
结果,单元为s
(秒)或ms
(毫秒);
2)触发体式格局
伪类触发::hover,:focus,:checked,:active
js
触发:toggleClass
3)以下情况下,属性值转变不能发生过渡结果
a.background-image
,如url(a.jpg)
到url(b.jpg)
(与浏览器支撑相干,有的浏览器不支撑)等
b.float
浮动元素
c.height
或width
运用auto
值
d.display
属性在none
和其他值(block、inline-block、inline
)之间变更
e.position
在static
和absolute
之间变更transition
示例:
<style>
#box2{
height: 100px;
width: 100px;
background: blue;
}
#box2:hover{
transform: rotate(180deg) scale(.5, .5);
background: red;
transition: background 2s ease, transform 2s ease-in 1s;}
</style>
</head>
<body>
<div id="box1">BOX1</div>
<div id="box2">BOX2</div>
</body>
animation
1)语法animation{ animation-name animation-duration animatino-timing-function animation-delay animation-iteration-count animation-direction animtion-play-state animation-fill-mode}
animation-name
:用来挪用@keyframes定义好的动画,与@keyframes定义的动画称号一致;animation-duration
:指定元素播放动画所延续的时候;animation-timing-function
:和transition
中的transition-timing-function
中的值一样。依据上面的@keyframes
中剖析的animation
中能够存在多个小动画,因而这里的值设置是针对每个小动画地点地点时候范围内的属性变更速度;animation-delay
:定义在浏览器最先实行动画之前的守候的时候、这里是指全部animation
实行之前的守候时候,而不是上面所说的多个小动画;animation-iteration-count
:定义动画的播放次数,通常是整数,默许是1
,若为infinity
,动画将无穷屡次的播放;animation-direction
:重要用来设置动画播放次数,其重要有两个值:normal
:默许值,动画每次训话都是按递次播放;alternate
:动画播放在第偶数次向前播放,第奇数次想反方向播放(animation-iteration-count
取值大于1
时设置有用)animation-play-state
:属性用来掌握元素动画的播放状况。重要有两个值:running
:能够经由历程该值将停息的动画从新播放,这里的从新播放不是从元素动画的最先播放,而是从停息的谁人位置最先播放;paused:
停息播放。animation-fill-mod
: 默许情况下,动画完毕后,元素的款式将回到肇端状况,animation-fill-mode
属性能够掌握动画完毕后元素的款式。重要具有四个属性值:none
(默许,回到动画没最先时的状况。),forwards
(动画完毕后动画停留在完毕状况),backwords
(动画回到第一帧的状况),both
(依据animation-direction
轮番运用forwards
和backwards
划定规矩)。animation
示例:
<style>
.box{height:100px;width:100px;border:15px solid black;
animation: changebox 10s ease-in-out 3 alternate paused;
}
.box:hover{
animation-play-state: running;
}
@keyframes changebox {
10% { background:red; }
50% { width:80px; }
70% { border:15px solid yellow; }
100% { width:180px; height:180px; }
}
</style>
<body>
<div class="box"></div>
</body>
4.事宜冒泡的事宜捕捉
事宜冒泡,事宜会从最内层的元素最先发作,一向向上流传,直到document
对象;
事宜捕捉则跟事宜冒泡相反,事宜会从document
对象最先发作,直到最详细的元素;
5.GET和POST的区分
1.发送体式格局:GET
要求数据放在url
上,即HTTP
的协定头中;而POST
把数据放在HTTP
的包体中。
2.大小的限定:GET
传的参数有长度的限定,由于浏览器对url
的长度有限定;而POST理论上是没有限定的。
3.安全性:GET
要求可被缓存,要求保存在浏览器的历史记录中;POST
则不能被缓存。与POST
比拟,GET
的安全性较差,由于发送的数据是URL
的一部分。