一、行内元素有哪些?块级元素有哪些? 空元素有那些?
(1)行内元素有:a b span img input select strong。
(2)块级元素有:div ul ol li dl dt dd h1 h2 h3 h4…p
(3)常见的空元素:<br> <hr> <img> <input> <link> <meta>
二、常见的浏览器内核有哪些?
Trident 内核:IE,MaxThon,TT,The World,360,搜狗浏览器。
Gecko 内核:Netscape6 及以上版本,FF,MozillaSuite/SeaMonkey
Presto 内核:Opera7 及以上
Webkit 内核:Safari,Chrome
三、请描述一下 cookies,sessionStorage 和 localStorage 的区别?
cookie 是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密),cookie 数据始终在同源的 http 请求中携带(即使不需要),记会在浏览 器和服务器间来回传递。
sessionStorage 和 localStorage 不会自动把数据发给服务器,仅在本地保存。
存储大小: cookie 数据大小不能超过 4k;sessionStorage 和 localStorage 虽然也有存储大小的限制,但比 cookie 大得多,可以达到 5M 或更大。
有期时间: localStorage存储持久数据,浏览器关闭后数据不丢失除非主动删除数据; sessionStorage数据在当前浏览器窗口关闭后自动删除;cookie设置的 cookie 过期时间之前一直有效,即使窗口或浏览器关闭 。
四、如何在页面上实现一个圆形的可点击区域?
1、map+area 或者 svg
2、border-radius
3、纯 js 实现需要求一个点在不在圆上简单算法、获取鼠标坐标等等
五、介绍一下标准的 CSS 的盒子模型?低版本 IE 的盒子模型有什么不同的?
(1)有两种, IE 盒子模型、W3C 盒子模型
(2)盒模型: 内容(content)、填充(padding)、边界(margin)、 边框 (border)
(3)区别: IE 的 content 部分把 border 和 padding 计算了进去
六、如何居中 div?
1、水平居中:给 div 设置一个宽度,然后添加 margin:0 auto 属性
div{ width:200px; margin:0 auto; }
2、让绝对定位的 div 居中
div { position: absolute; width: 300px; height: 300px; margin: auto; top: 0; left: 0; bottom: 0; right: 0; }
3、水平垂直居中,确定容器的宽高,宽 500 高 300 。 div { position: relative; width:500px; height:300px; top: 50%; left: 50%; margin: -150px 0 0 -250px; }
4、水平垂直居中,未知容器的宽高,利用 `transform` 属性
div { position: absolute; width:500px; height:300px; top: 50%; left: 50%; transform: translate(-50%, -50%); }
5、水平垂直居中,利用 flex 布局 ,实际使用时应考虑兼容性
.container { display: flex; align-items: center; /* 垂直居中 */ justify-content: center; /* 水平居中 */ }
.container div { width: 100px; height: 100px; }
七、 用纯 CSS 创建一个三角形的原理是什么?
把上、左、右三条边隐藏掉(颜色设为 transparent)
#demo { width: 0; height: 0; border-width: 20px; border-style: solid; border-color: transparent transparent red transparent; }
八、请解释一下为什么需要清除浮动?清除浮动的方式 。
清除浮动是为了清除使用浮动元素产生的影响。浮动的元素,高度会塌陷, 而高度的塌陷使我们页面后面的布局不能正常显示。 1、父级 div 定义 height;
2、父级 div 也一起浮动;
3、常规的使用一个 class; .
clearfix::before, .clearfix::after { content: " "; display: table; } .clearfix::after { clear: both; } .clearfix { *zoom: 1; } |