刷前端面经笔记(二)

栏目: Html · 发布时间: 5年前

内容简介:1)浮动布局左右两边固定宽度,并分别设置a. 给父级盒子设置

1.实现三栏布局(左右两边固定宽度,中间自适应)

1)浮动布局

左右两边固定宽度,并分别设置 float:leftfloat:right 。(但这会带来高度塌陷的问题,所以要清除浮动。清除浮动的方式有:

a. 给父级盒子设置 height

b.给父级盒子设置 overflow:hidden

c.在父级盒子结束前的盒子添加 clear:both

d.父级盒子也设置浮动;

e.父级 div 定义伪类: afterzoom

.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 ;例外的是 DateDate 利用的是 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. heightwidth 使用 auto

d. display 属性在 none 和其他值( block、inline-block、inline )之间变换

e. positionstaticabsolute 之间变换

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 轮流应用 forwardsbackwards 规则)。

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 的一部分。

刷前端面经笔记(二)


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

你必须知道的213个C语言问题

你必须知道的213个C语言问题

范立锋、李世欣 / 人民邮电出版社 / 2010-6 / 45.00元

《你必须知道的213个C语言问题》精选了213个在C语言程序设计中经常遇到的问题,目的是帮助读者解决在C语言学习和开发中遇到的实际困难,提高读者学习和开发的效率。这些问题涵盖了C语言与软件开发、C语言基础、编译预处理、字符串、函数、键盘操作、文件、目录和磁盘、数组、指针和结构、DOS服务和BIOS服务、日期和时间、重定向I/O和进程命令、C语言开发常见错误及程序调试等内容,均是作者经过充分的调研,......一起来看看 《你必须知道的213个C语言问题》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具