一、HTML面试题
1.如何理解语义化?
让人更容易读懂代码
让搜索引擎 更容易读懂(SEO)与搜索引擎建立良好的沟通,帮助爬虫抓取更有效的信息,爬虫依靠标签来确定每个关键词的上下文和权重)
2.块状元素,和内联元素?
块状元素
display:block/table;有div h1 h2 table ul ol p等 (不管里面有多少内容,都独占一行)
内联元素:
display:inline/inline-block;有span img input button等(不独占一行,会挨着往后排,直到浏览器的边缘换行为止)
二、css布局
1.BFC理解和应用
offsetWidth=(内容宽度+内边距+边框)无外边距
2.margin纵向 重叠.
相邻元素的margin-top和margin-bottom会发生重叠;
空白内容的<p></p>也会重叠,一层一层的重叠,被忽略,p标签的高度就不算了。
3.margin负值问题
margin负值问题
margin-top和margin-left负值,元素向上、向左移动
margin-right负值,右侧元素左移,自身不受影响
margin-bottom负值,下方元素上移,自身不受影响
4.BFC理解与应用
块级格式化上下文,一块独立渲染区域内部元素的渲染i不会影响边界以外的元素
形成条件
①float 不是none
②position是absolute或者fixed
③overflow不是visible
④display不是flex inline-block等
BFC常用应用
1.清除浮动
5.float布局
<1>圣杯布局和 双飞翼布局的目的
①两栏布局,中间一栏最先加载和渲染(内容最重要)
②两侧内容固定,中间内容随着宽度自适应
③一般用于pc网页
<2>技术总结:
使用float布局
两侧使用margin负值,以便和中间内容横向重叠
防止中间内容被两侧覆盖,一个用padding,一个用margin
<3>实现思路:
(1)圣杯布局
①使用container包裹center、left、right,(center的div一定要放在第一位,也就是按center、left、right的顺序依次把三个部分放进container容器里)【为了让center部分最先显示】,并且给center设置width:100%;(使center的宽度始终和父元素一致,从而实现页面宽度缩小时center宽度跟着改变);
②left、center、right三部分设置float:left,给container/footer设置清除浮动(clear:both);【给container设置或者footer设置都是可以的,清除浮动是清除浮动元素给自身带来的影响。所以也可以给footer设置,让它不受上面浮动元素的影响,能够回到原来的位置上】【这里存在一个特殊的情况,在正常情况下,当上面的元素浮动,下面的footer是要移动在center下面被它挡住。但是文字有特殊的解析机制,它会找到一个不挡住它的位置显示,所以footer就到了第二行,因这样可以显示它里面的文字了。】
③给container设置padding-left(left容器的宽度),(padding-right)right容器的宽度,使之后left和right元素移上来有位置;
④给left设置margin-left:-100%;(使left的margin-left为负的父元素宽度的100%,这样它就可以移上去和center位于一行了);然后设置position:relative;right:自身宽度值;(这样就使left元素显示到了center的左侧)
⑤给right元素设置margin-right:负的自身宽度值;【给元素设置margin-right为负值,就相当于元素自身的宽度缩小。当margin-right的值和元素自身的宽度值一样大时,就相当于元素自身宽度为0了,这时它可以认为是不存在的。所以这样设置可以使right元素移到上面一行,位于center的右侧】
6.flex布局
···常用语法
display:flex(弹性布局)
属性:
flex-direction用在父容器上,定义子元素的排列方向
flex-direction:排列方式,默认横向(row,且起点在左边)
flex-direction:row-reverse(横向排,起点在右边)
flex-direction:column(竖着排,起点在上面column-reverse,起点在下面)
justify-content(用在父元素上,定义子元素的对齐方式)
属性:
flex-start:开始对齐(左对齐)
flex-end:结束对齐(右对齐)
center:居中对齐
space-between:两端对齐,子元素之间间隔相同
space-around:子元素之间间隔相同,且与父元素间隔1/2距离
align-items:(用在父元素上,定义子元素在交叉轴上的对齐方式,交叉轴是和主轴垂直的轴)
flex-start:交叉轴起点对齐
flex-end:交叉轴终点对齐
center:交叉轴中心对齐
baseline:了解
stretch:了解
align-self:(用在子元素上,定义元素在交叉轴上的对齐方式,交叉轴是和主轴垂直的轴)
其属性和align-items一模一样,只是align-items用在父元素上,align-self用在子元素上
7.居中问题
水平居中
inline元素:text-align:centerblock元素:margin:auto
absolute元素:left:50%+margin-left负值
垂直居中
inline元素:line-height的值等于height值
absolute元素:top:50%+margin-top负值
absolute元素:transform(-50%,-50%)
absolute元素:top,left,bottom,right=0+margin:auto