html+css 面试题总结附答案
行内元素有哪些? 块级元素有哪些?
块级元素:div p h1 ul li form table
行内元素: a b br i span input select laber strong em img
举5个以上的 HTML5 input 元素 type 属性值
text password button submit reset checkout radio
我们经常用到的语义化标签以及HTML5新增的语义化标签有哪些?
h1-h6 标题内容
p 段落
ul 无序
ol 有序
dl 定义列表
thead 表格中的表头内容
tbody 表格中的主体内容
HTML5:语义化更好的内容标签(<header>, <nav>, <aside>, <article>, <section>,<footer> ,<video>,<audio>,<canvas>)
语义化标签的作用
代码结构清晰,方便阅读,有利于团队合作开发。
方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以语义的方 式来渲染网页。
有利于搜索引擎优化(SEO)。
说一下<label>标签的用法
label标签主要是方便鼠标点击使用,扩大可点击的范围,增强用户操作体验
标签的 for 属性应当与相关元素的 id 属性相同。
<form> <label for="male">Male</label> <input type="radio" name="sex" id="male" /> </form>
说一下盒模型?
盒模型的组成,由里向外内容(content)、填充(padding)、边框(border)、边界(margin)
在IE盒子模型中,width表示content+padding+border这三个部分的宽度
在标准的盒子模型中,width指content部分的宽度
box-sizing的使用
box-sizing: content-box 是W3C盒子模型 box-sizing: border-box 是IE盒子模型
box-sizing的默认属性是content-box
盒子模型的宽度如何计算?
ffsetWidth与offsetHeight有个特点,就是这两个属性的值只与该元素有关,与周围元素(父级和子级元素无关)。
offsetWidth = (内容宽度 + 内边距 + 边框),无外边距
因此,答案是122px
补充:如果让offsetWidth等于100px,该如何做?
加了此属性,width:100px就会包括 内容宽度+内边距+边框,这个整体是100px;所以加了此属性,内容宽度会相应的缩小。
URL 的组成部分
http://www.aspxfans.com:8080/news/index.asp?boardID=5&ID=24618&page=1#r_70732423
一个完整的URL包括:协议部分 域名部分 端口部分 虚拟目录部分 文件名部分 参数部分 锚部分
参考: URL的各个组成部分详解
锚点作用:打开用户页面时滚动到该锚点位置。如:一个html页面中有一段代码,该url的hash为r_70732423
<div name='r_70732423'>...</div>
打开上面url,用户页面时滚动到name=’r_70732423’
CSS引入的方式有哪些? link和@import的区别是?
内联方式
嵌入式
外部链接
导入样式
区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。
区别2:link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。
区别3:link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。
区别4:link支持使用Javascript控制DOM去改变样式;而@import不支持。
列举一下 css3 的长度单位。
vw、vh、vmin、vmax(都是基于视口)rem与em
1.em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定死了的,更适用于响应式布局。(em属于css2)对于em和rem的区别一句话概括:em相对于父元素,rem相对于根元素。
2.vh和vv:1vh等于1/100的视口高度①,1vw等于1/100的视口宽度。
3.还有两个单位: vmax, vmin,分别是vh, vw中的最大值和最小值。
详细案例可参考:https://www.cnblogs.com/nannan1221/p/10772977.html
列举 display 属性的常用值(5个以上)
display: none 此元素不会被显示,并且不占据页面空间
display: block 块级元素
display: inline 行内元素
display: inline-block 行内块级元素
display: flex 伸缩容器
display: table 会作为块级表格来显示
简述 transform,transition, animation 的作用
transform是变化
transition是过渡
animation是动画
transform4个属性
rotate:围绕中心点旋转 deg 单位
translate(x,y):向 x y 轴移动位置 px
scale:整体缩放 倍数、scaleX scaleY 沿 轴方向缩放
skew(x,y) 切变、scaleX scaleY 沿轴切变
css水平、垂直居中的写法,请至少写出4种?
水平居中
行内元素: text-align: center
块级元素: margin: 0 auto
position: absolute +left:50%+ transform:translateX(-50%)
display: flex + justify-content: center
垂直居中
设置line-height 等于height
position:absolute + top:50% + transform:translateY(-50%)
display: flex + align-items: center
display: table + display:table-cell + vertical-align: middle;
图片居中对齐(图片和旁边的文字垂直居中对齐)
vertical-align:middle
画一个三角形?
这属于简单的css考查,平时在用组件库的同时,也别忘了原生的css
.a{ width: 0; height: 0; border-width: 100px; border-style: solid; border-color: transparent #0099CC transparent transparent; transform: rotate(90deg); /*顺时针旋转90°*/ } <div class="a"></div>
画一条0.5px的直线??
考查的是css3的transform
height: 1px; transform: scale(0.5);
清除浮动的方法
额外标签法(在最后一个浮动标签后,新加一个标签,给其设置clear:both;)(不推荐)
创建父级 BFC(overflow:hidden)
父级使用::after伪元素清除浮动 clear: both(推荐)
相对定位,绝对定位和固定定位的区别。
相对定位:相对定位的元素不会脱离文档流
绝对定位:会使得元素脱离文档流;绝对定位是相对于离他最近的开启了定位的元素进行定位的,如果都没有,则相对于body进行定位(所以通常给父元素也加一个定位);绝对定位会改变元素的性质.行内元素会变成块状元素
固定定位: 他是相对于浏览器窗口的位置进行定位.比如漂浮的客服,回到顶部.这类的按钮都是使用的固定定位
制作一个布局,上中下结构的网页,顶部和底部固定,高度都为 100px 中间自适应高度,占满整个浏览器可视区域,(不使用 js,仅用 html5 元素标签和 css)。 。
1. 使用绝对定位
对这三栏都实现绝对定位,其中中间绝对定位的位置是上下两栏的高度,内容超出则中间部分出现流动条overflow:auto;
2. 使用flex布局
还可以使用flex布局实现这一布局,将flex-direction设置为column,定义排列方向为竖排,还需注意的是要定义页面的整体高度为100%
详细案例可参考:上下固定中间自适应布局
额外标签法(在最后一个浮动标签后,新加一个标签,给其设置clear:both;)(不推荐)
父元素添加overflow:hidden,通过触发BFC方式,实现清除浮动(不推荐)
使用after伪元素清除浮动(推荐使用)
html三栏布局有几种(就是左右固定,中间自适应)
浮动布局float、定位布局、flex布局、表格布局、css3栅栏布局
<style media="screen"> //浮动布局float .layout.float .left{ float:left; width:300px; background: red; } .layout.float .center{ background: yellow; } .layout.float .right{ float:right; width:300px; background: blue; } </style> <style> .layout.absolute .left-center-right>div{ //定位布局 position: absolute; } .layout.absolute .left{ left:0; width: 300px; background: red; } .layout.absolute .center{ left: 300px; right: 300px; background: yellow; } .layout.absolute .right{ right:0; width: 300px; background: blue; } </style> <style> .layout.flexbox{ //flex布局 margin-top: 110px; } .layout.flexbox .left-center-right{ display: flex; } .layout.flexbox .left{ width: 300px; background: red; } .layout.flexbox .center{ flex:1; background: yellow; } .layout.flexbox .right{ width: 300px; background: blue; } </style> <style> .layout.table .left-center-right{ //表格布局 width:100%; height: 100px; display: table; } .layout.table .left-center-right>div{ display: table-cell; } .layout.table .left{ width: 300px; background: red; } .layout.table .center{ background: yellow; } .layout.table .right{ width: 300px; background: blue; } </style>
sessionStorage、localStorage和cookie的区别
共同点:都是保存在浏览器端、且同源的
cookie就是客户端保存用户信息的一种机制,用来记录用户的一些信息,它的主要用于保存登陆信息;cookie在浏览器和服务器间来回传递,其他两个不会。
应用场景:判断用户是否登陆过网站,以便下次自动登录
localStorage是html5的一种新的本地缓存方案,目前用的比较多,一般用来存储ajax返回的数据,加快下次页面打开时的渲染速度。
设置localstorage:
window.localstorage: localstorage.name="李皮"; localstorage["name"] = "李皮"; localstorage.setItem(key,val);
获取localStorage:
localStorage.属性 localStorage["属性"]; localStorage.getItem(属性)
删除localStorage:
localStorage.clear();
localStorage.removeItem();
什么是响应式布局??如何实现??
使不同尺寸、分辨率的屏幕,都能呈现出较好的效果,就是响应式布局。
响应式布局的几种思路:
最简单的方案(固定内容区宽度)
给网页的内容区,设置一个宽度。比如 900px,然后内容区居中、两边留白。因为大部分电脑显示器的宽度都超过 900px,所以,不同的显示器的差异,仅仅在于两边“留白”的大小。
等比例缩放(rem)
等比例缩放(rem)
整体思路
给根节点设置一个字体大小
然后,其他尺寸单位全部用 rem
然后,监听屏幕的大小
然后,根据屏幕的大小按比例改变根节点字体的大小
可参考:根据屏幕的大小按比例改变根节点字体的大小
最精准的方案(媒体查询,@media)
整体思路
@media起到的作用是,你可以给不同尺寸的设备,设置单独、互不影响的 css 属性。
比如:屏幕宽度小于 500px 时(手机屏幕),怎样怎样
宽度在 500px ~ 1000px 时(平板屏幕),怎样怎样
宽度在 1000px ~ 1500px 时(电脑小屏幕),怎样怎样
宽度在 1500px ~ 2000px 时(普通电脑屏幕),怎样怎样
宽度在 ……
可参考:@media媒体查询案例
栅格系统 Bootstrap框架(主流方案)
常见的浏览器内核有哪些?
IE:Trident内核 FireFox:gecko内核 Opera :原是用Presto,现改用Blink
Safari :webkit内核 Chrome:Blink(WebKit的分支)
常见浏览器兼容性问题解决方案?
1.问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。
解决方案:CSS里 *{margin:0;padding:0;}
2.问题症状:常见症状是IE6中后面的一块被顶到下一行
解决方案:在float的标签样式控制中加入 display:inline;将其转化为行内属性
备注:我们最常用的就是div+CSS布局了,而div就是一个典型的块属性标签,横向布局的时候我们通常都是用div float实现的,横向的间距设置如果用margin实现,这就是一个必然会碰到的兼容性问题。
3.问题症状:几个img标签放在一起的时候,有些浏览器会有默认的间距,加了问题一中提到的通配符也不起作用。
解决方案:使用float属性为img布局
备注:因为img标签是行内属性标签,所以只要不超出容器宽度,img标签都会排在一行里,但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。(使用负margin,虽然能解决,但负margin本身就是容易引起浏览器兼容问题的用法,所以一般不用)
4.CSS透明
IE:filter:alpha(opacity=60)。 FF:opacity:0.6。
5.万能清除浮动
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
如何提升网站性能?SEO优化?
减少http请求;图片、样式、js压缩再使用;使用cdn;样式、脚本尽量使用外链;减少dom操作;html语义化;
网站头部title,keywords,description正确描述;html语义化;
答案有不全或有偏颇之处,欢迎各位在评论区补充及指正。