摘要:通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。在页面加载的时也同时加载,而是需要加载完成后在开始加载。是长连接,连接一直保持,是短连接,发起,接收,关闭。
目录
我碰到有意思的题会继续更新,如发现我的解答有问题,请告知,万分感谢。
如觉得对你有帮助,请帮忙点个赞,谢谢。
css的选择器,权重
ie和其他浏览器下,盒模型的区别
盒模型互相转化
元素水平垂直居中
左边固定,右边自适应
左右固定,中间自适应,高度通屏
外边距margin
边框圆角border-radius
border-color
margin负值
margin一些坑
dispaly有那些值
伪类
css3新增了那些属性
老生常谈的hack
清除浮动
html5新增了那些标签
有什么作用?
link @import 有什么区别
lable有什么用
cookies,sessionStorage 和 localStorage 的区别?
WebSocket和socket有什么关系? WebSocket和ajax的区别?
正则验证邮箱
闭包,你在开发中要经常使用闭包吗?为什么?
数据类型
获取元素自定义属性有什么区别?
继承都有哪些
编程题(测试)
css篇
css的选择器,权重
答:
id,class,标签,组合,继承,伪类,* !important > style > id > class > 标签 > *
ie和其他浏览器下,盒模型的区别
答:
- ie下的盒模型为 content(width+height+padding+border)+ margin - 实际大小:content - 标准盒模型为content(width+height) + padding + border + margin - 实际大小:content+padding+border
盒模型互相转化
答:
- 给需要转化的元素设置 box-sizing:border-box; - content-box: 这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。 - border-box : 为元素设定的宽度和高度决定了元素的边框盒。就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 - inherit : 规定应从父元素继承 box-sizing 属性的值。
元素水平垂直居中
答:
- css2 position:absolute; top:50%; left:50%; margin-left:-widht/2; margin-top:-height/2; - css2 position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; - css3 display:flex; justify-content:center; align-items:center; - css3 position:absolute; top:50%; left:50%; transfrom:translate(-50%,-50%);
左边固定,右边自适应
答:
- css2 div1{float:left;} div2{overflow:hidden;}; - css2 div1{float:left;} div2{ margin-left:-div1.width;} - css3 parent{dispaly:flex;} div1{wdith:200px;} div2{flex:1};
左右固定,中间自适应,高度通屏
答:
// 布局// style html,body,.wrap{height:100%;overflow:hidden; background:green;} .left,.right,.center{height:100%;} .left,.right{width:100px;background:aqua;} .left{float:left;} .right{float:right;} .center{background:red}
外边距margin
margin:10px; // 上下左右 10px margin:10px 10px; // 上下10px 左右10px margin:10px 10px 10px; // 上10px 左右10px 下10px margin:10px 10px 10px 10px; // 上10px 右10px 下10px 左10px margin:10px 10px 10px 10px 10px; // 坑 margin:10px 10px 10px 10px 10px 10px; // 坑 margin:10px 10px 10px 10px 10px 10px 10px; // 坑 margin:10px 10px 10px 10px 10px 10px 10px 10px; // 坑
边框圆角border-radius
// 左上右上右下左下 10px border-radius:10px; // 左上右下10px 右上左下10px border-radius:10px 10px; // 左上10px 左下右上10p 右下10px border-radius:10px 10px 10px; // 左上10px 右上10px 右下10px 左下10px border-radius:10px 10px 10px 10px; // 左上左10px/左上上10px 右上右10px/右上上10px 右下右10px/右下下10px 左下左10px/左下下10px border-radius:10px 10px 10px 10px / 10px; // 左上左、右下右10px/左上上、右下下10px 右上右、左下左10px/右上上、左下下10px border-radius:10px 10px 10px 10px / 10px 10px; // 左上左10px/左上上10px 右上右、左下左10px/右上上、左下下10p 右下右10px/右下下10px border-radius:10px 10px 10px 10px / 10px 10px 10px; // 左上左10px/左上上10px 右上右10px/右上上10px 右下右10px/右下下10px 左下左10px/左下下10px border-radius:10px 10px 10px 10px / 10px 10px 10px 10px;
border-color
如题:如下代码最后生成出来是什么。
width:0px;
height:0px;
border-width:60px;
border-style:solid;
border-color: red transparent transparent transparent;
margin负值
如题:有一组li,它们宽高为100px,边框为10px灰色,每一个li之间的间隔为10px,鼠标滑过的时候,让其边框颜色改变为红色,整体排版不能乱,而且边框要展示全。(用css实现)答:
ul>li*N //html li{ width:100px; height:100px; border:10px solid #ccc; margin:-10px 0 0px -10px; position:relative; } li:hover{ border:10px solid red; z-index:9; }
margin一些坑
如题:有两个div,宽高为100px,边框为10px,div1=margin:10px 20px 30px40px,div2=margin:40px 30px 20px 10px,请问这两个元素中间的间隔为像素;答:
上下布局(div1在上div2在下):40px; 上下布局(div2在上div1在下):20px; 左右布局(div1在左div2在右):30px; 左右布局(div2在左div1在右):70px;如题:有两个div,父子级关系,父级:parent,子级:child;parent宽高为100px,child宽高为50p,外边距为50px;child和parent都在什么位置?(浏览器的margin和padding已经清零)。答:
child在parent右上角; parent: 距顶部50px,距左0px; child: 距离顶部50px, 距左50px,底部距离父级底部50px;如题:有两个div,兄弟关系,div1在上,div1宽高100px,加float:left,div2宽高50px,margin:50px,div1和div2在什么位置?手动加重点:怎么展示的?答:
div1覆盖div2。 div1:距上50px,距左0px,距下和右0px; div2:距上50px,距左50px,距下和右50px;附加:如果child外边距为100px,他们的位置呢?
dispaly有那些值
答:// 常用值: block|inline|inline-block|none|table|list-item| inherit
伪类
答:常用: :link | :hover | :active | :visited | :after | :before | :first-child | :last-child :nth-child()
css3新增了那些属性
答://个人常用: transform:rotate(90deg); // 旋转 transform-origin:center center; // 定位中心点 transform:translate(x,y); // 在x和y轴上定位 transtion:.1s; // 过渡动画 animation: obj 2s; // 动画 border-radius:5px; // 边框圆角 background-size:100% 100%; // 背景大小 box-show:0 0 0 #000; // 阴影
老生常谈的hack
答:width:100px; // 所有都识别 width:100px9; // ie6、ie7、ie8 *widht:100px; // ie6、ie7 _width:100px; // ie6 widht:100px ; // ie8
清除浮动
答:.clear{zoom:1;}; .clear:after{content:""; dislay:block; clear:both; }HTML篇
html5新增了那些标签
答:video canvas header footer section nav
有什么作用?
答:让浏览器按照什么版本解析文档。
link @import 有什么区别
答:link是通过html链接引入,@import在css文件中引入。 link在页面加载的时也同时加载,而@import是需要css加载完成后在开始加载。
lable有什么用
答:标注input,点击lable中的文字,就会触发此控件,自动把焦点转移到绑定的表单元素上。综合篇
cookies,sessionStorage 和 localStorage 的区别?
答:cookies:储存最多20多条数据,储存大小在4kb左右,在设置的时间前不会因为浏览器的关闭而消失,安全性存在漏洞,容易被拦截,在所有同源窗口共享。 sessionStorage: 大小在5M或者更大,不在不同浏览器下共享及时在一个页面(iframe);浏览器关闭消失 localStorage:大小在5M或者更大,不会因为浏览器关闭而消失,在所有同源窗口共享
WebSocket和socket有什么关系? WebSocket和ajax的区别?
答:1. mmp!就跟javascript和java,锤子手机和锤子一样,有锤子的关系。 2. web是长连接,连接一直保持,ajax是短连接,发起,接收,关闭。 ajax是客户端发起,web是客户端服务器互相推送。
http和https的区别
答:自己的个人理解:https比http更安全。 为什么安全不知道,请自行搜索。虽然搜索过,并看过好几遍但是个人一直无法融会贯通,所以不再次标注答案。等什么时候吃透了,我在写上。
http和https之间怎么传输?
答:mmp,还是自己去搜索吧。
正则验证邮箱
答:var str = 23246574@qq.com reg = /^w+@w+(.[a-zA-Z]{2,3}){1,2}$/g;)); console.log(reg.text(str));JavaScript篇
闭包,你在开发中要经常使用闭包吗?为什么?
答:可以访问另外一个函数作用域里的变量和函数。不建议频繁使用,或者对自己的技术不是蜜汁自信的不要过多使用,因为闭包使用多了,操作不当,容易造成内存泄漏,变成内存溢出。
数据类型 、
答:number string boolean undefined null object
获取元素自定义属性有什么区别?
答:getAttribute; // 返回对象 getparameter; // 返回字符串
继承都有哪些
答:原型链、组合、寄生、寄生组合、构造、实例、拷贝
题
var arr1 = [1,2,3,4,5,6,7,8,9], arr2 = [9,8,7,6,5,4,3,1,11,10,7,9];
找出arr1和arr2中耦合的数字。把 {"a":[1,2,3],"b":[4,5],"c":[6],"d":[7,8,9,10]} 转成 [{"type":"a","name":1},{"type":"a","name":2},{"type":"a","name":3},{"type":"b","name":4},{"type":"b","name":5},{"type":"c","name":6},{"type":"d","name":7},{"type":"d","name":8},{"type":"d","name":9},{"type":"d","name":10}]
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/93776.html
相关文章
前端最强面经汇总
摘要:获取的对象范围方法获取的是最终应用在元素上的所有属性对象即使没有代码,也会把默认的祖宗八代都显示出来而只能获取元素属性中的样式。因此对于一个光秃秃的元素,方法返回对象中属性值如果有就是据我测试不同环境结果可能有差异而就是。 花了很长时间整理的前端面试资源,喜欢请大家不要吝啬star~ 别只收藏,点个赞,点个star再走哈~ 持续更新中……,可以关注下github 项目地址 https:...
Vue面试中,经常会被问到的面试题/Vue知识点整理
摘要:可以在该钩子中进一步地更改状态,不会触发附加的重渲染过程。我工作中只用到,对和不怎么熟与的区别相同点都支持指令内置指令和自定义指令都支持过滤器内置过滤器和自定义过滤器都支持双向数据绑定都不支持低端浏览器。 看看面试题,只是为了查漏补缺,看看自己那些方面还不懂。切记不要以为背了面试题,就万事大吉了,最好是理解背后的原理,这样面试的时候才能侃侃而谈。不然,稍微有水平的面试官一看就能看出,是...
一个JAVA渣渣的校招成长记,附BAT美团网易等20家面经总结
摘要:作者重庆森林链接来源牛客网整个三月份通过牛客网和网友分享的经验学到了很多东西,现在反馈一下我的面试经历,希望对同学们有帮助。个人情况大三本方向渣硕,经过实验室学长内推,于三月底完成面试。校招是实力和运气的结合,缺一不可。 欢迎关注我的微信公众号:Java面试通关手册(坚持原创,分享美文,分享各种Java学习资源,面试题,以及企业级Java实战项目回复关键字免费领取):showImg(h...
发表评论
0条评论
阅读 1033·2021-11-24 09:39
阅读 3547·2021-11-22 13:54
阅读 2515·2021-10-11 10:59
阅读 709·2021-09-02 15:40
阅读 1008·2019-08-30 15:55
阅读 1010·2019-08-30 13:57
阅读 2281·2019-08-30 13:17
阅读 2980·2019-08-29 18:32