前端开发面试题--htmlcss篇

1.说一下盒子模型

1.1 标准盒模型（默认值）

• box-sizing: content-box ：宽和高代表的仅仅是盒子内容，特点是给盒子加边框和内边距会撑大盒子
• 盒子的总宽度= width+padding+border+margin（高度同理）

1.2 怪异盒模型（ie浏览器默认的盒子模型）

• box-sizing: border-box：宽和高代表的是盒子的content+padding+border，给盒子加边框和内边距不会撑大盒子（前提是内边距和边框不会超过盒子宽度）
• 盒子的总宽度=width+margin（高度同理）

1.3 弹性盒模型（flex布局）

• 是当前页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
• 使用弹性盒模型的目的是：提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

2.有哪些外边距合并问题，怎么解决？

2.1 相邻块元素垂直外边距合并

• 当上下两个相邻的块元素（兄弟关系）相遇时，如果上面的盒子有下外边距，下面的盒子有上外边距，则他们之间的垂直间距不是这两个上下外边距的和，而是这取这两个值中较大者，这种现象被称为相邻块元素垂直外边距的合并

2.2 嵌套块元素垂直外边距塌陷和合并

• 对于两个嵌套关系的块元素，父元素有上外边距同时子元素也有上外边距：

  1.如果父元素的上外边距大于子元素上外边距，此时子元素在父元素中并没有上外边距而是被父元素的上外边距包含住了这个叫做嵌套关系块元素上外边距合并。

  2.如果父元素的上外边距小于子元素的上外边距，此时子元素在父元素中也没有上外边距而是作用到父元素的上外边距了这个叫做嵌套关系块元素上外边距塌陷。

2.3 解决方案：

• 1.给父元素添加：overflow: hidden;
• 2.给父元素设置伪类，用标签隔开防止塌陷(推荐)

.div: before{
   
	content: "";
	display: table;//使用空的table标签可以隔离父子元素的外边距，阻止外边距重叠塌陷。
}

3.css引入页面的方式有几种，使用link和@import有什么区别？

3.1 有三种

• 行内样式
• 内部样式
• 外部样式
• @import方式导入

<style>
	@import "";
</style>

3.2 link和@import有什么区别

• link同时加载内容和样式，@import先加载HTML，再加载css
• link可以引入除css外其他内容，@import只能引入css
• JavaScript操作DOM只能操作link引入的css
• @import会增加页面的http请求
• link没有兼容性，@import有兼容性(IE5以上支持)

4.介绍一下你对浏览器内核的理解？

4.1 引擎的区别

浏览器内核就是渲染引擎。
主要有两种引擎：

• 渲染引擎(layout engineer或Rendering Engine)负责对页面语法的解释并渲染，决定了浏览器如何显示网页的内容和格式，但是不同内核的浏览器对于网页的语法解释会有不同，所以渲染效果也不相同
• js引擎是用来解析和执行js,来实现网页的动态效果。

4.2 常见浏览器内核

浏览器	内核	备注
ie	Trident
Chrome	blink	以前是webkit,现在是blink,blink是webkit的分支，国产浏览器新版本是blink内核
firefox	Gecko
Safari	webkit	webkit的鼻祖是Safari
Opera	blink	最初是自己的Presto内核，后来是webkit，现在跟随谷歌用bink

4.3 另外其他浏览器内核

浏览器	内核
2345浏览器，360浏览器，猎豹浏览器	ie + Chrome双内核
百度，世界之窗	ie内核
搜狗浏览器，遨游，qq浏览器	Triend（兼容模式） + webkit（高速模式）

5.image的 alt 和 title 有什么区别

• alt：是当图片加载不出来时用文字来代替。
• title：是当鼠标悬浮在图片上后的提示文字

6.iframe有哪些缺点

• 样式难调，还会有滚动条
• 浏览器的返回按钮不生效
• 会增加服务器的http请求
• 不会被一些搜索引擎搜索到
• 在一些较小的移动设备上无法完全显示框架
• 不容易打印。

7.使用css让一个元素消失在视野中的方法