前端面试问题----html、css
常见浏览器内核?
- IE: IE内核(Trident内核)
- safari:webkit内核
- -谷歌:Blink内核
- 欧鹏:Blink内核
- 火狐: Firefox内核
如何理解HTML语义化?
- 让人更容易读懂代码(增加代码的可读性);
- 让搜索引擎更容易读懂(SEO)
常用的块级元素和行内(内联)元素?
块级元素:div、h1-h6、p、ul、ol、li、table等
行内元素:a、span、i、b、input、img、button等
css中选择器有哪些?
通配符选择器:*
标签选择器:p
类选择器:.desc
id选择器:#box
后代选择器:ul li
直接后代选择器:ul > li
兄弟选择器:p~p p+p
群组选择器:.desc,#box,ul
属性选择器:input[type=“text”]
伪类选择器::last-child
盒子模型
- 标准盒模型:width = contentWidth + paddingLeftRight+ borderLeftRight + marginLeftRight
- IE盒模型:width = contentWidth + paddingLeftRight + borderLeftRight
- 补充:
offsetWidth = contentWidth + paddingLeftRight + borderLeftRight(没有外边距);
控制offsetWidth宽度始终为100px:box-sizing:border-box;
margin纵向重叠问题
- margin-top和margin-bottom会发生重叠
- 中间空的标签元素会被忽略
// AAA和BBB之间的距离是多少?
<style>
p{
font-size:16px;
line-height:1;
margin-top:10px;
margin-bottom:15px;
}
</style>
<p>AAA</p>
<p></p>
<p></p>
<p></p>
<p>BBB</p>
答案:15px
margin负值
- margin-top和margin-left设置负值:元素会向上和向左移动;
- margin-right设置负值:自身元素不受影响,右侧元素会向左移;
- margin-bottom设置负值:自身元素不受影响,下方元素会向上移
什么BFC?BFC的应用?
- BFC:一块区域内部区域如何渲染都不会影响外界的元素
- 形成BFC常见场景:
- float不是none
- overflow不是visible
- position是absolute或fixed
- display是flex inline-block
- 形成BFC常见场景:
清除浮动(overflow:hidden)
float布局,清除浮动(clearfix)
- 清除浮动
- 空元素加 clear:both;
- 给父元素加 overflow:hidden;
- afert伪类
- 父级元素同时浮动
- 父级元素固定高度
// 手写clearfix
.clearfix:after{
content:"";
height:0;
display:block;
clear:both;
}
.clearfix{
zoom:1; /*兼容IE*/
}
flex画色子??
??后期补充
CSS的定位position
- relative:相对于自身定位
- absolute:相对于最近一层的父元素定位
- fixed: 相对于浏览器本身
- static: 不定位
- sticky:磁贴定位(目前兼容不好)
水平垂直居中对齐?
-
水平对齐
- inline元素:text-align:center;
- block元素:margin:auto;
- absolute元素:left50% + margin-left的负值 居中对齐
- inline元素:line-height = height;
- absolute元素:top和margin-top的负值
- absolute元素:transform:translate(-50%,-50%)
- absolute元素:top、left、right、bottom=0 + margin:auto;
line-height的继承问题?
- 如果是px:例如30px,继承30px
- 如果是数字的倍数:例如2,继承2
- 如果是相对单位(%和em):继承计算出来的数值
rem是什么?
- 相对长度单位,相对于根元素