前端开发面试题前端开发面试题–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方式导入
@import "";
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)负责对页面语法的解释并渲染,决定了浏览器如何显示网页的内容和格式,但