css与HTML面试题

HTML面试题

如何理解HTML语义化？

让人更容易读懂（增加代码的可读性），搜索引擎更容易读懂（SEO）

块状元素和内联元素？

块元素独占一行（display:block(可以设置宽高)/table,div\h1\h2\table\ul\ol\p等），内联元素可以换行，（display：inline（行内元素，可以换行，不可设置宽高）/inline-block（行内块元素，可以设置宽高也可以换行）,span\img\input\button）。

CSS面试题

盒模型的宽度如何计算？

标准模型 width+padding+border+margin,IE怪异模型width（包含padding+border）+margin

offsetWidth=（内容宽度+内边距+边框），无外边框，box-sizing：border-box（内容宽度将包含内边距和边框）

margin纵向重叠的问题？

p { margin-top: 10px; margin-bottom:15px;}

<p class="p1">test1</p>

<p></p>

<p class="p3">test2</p>

相邻元素的margin-top和margin-bottom会发生重叠；空白内容的<p></p>也会重叠。

p1到p3的距离是15px.

margin负值的问题？

margin-top和margin-left负值，元素向上，向左移动。

margin-right和margin-bottom负值，右侧元素左移、下方元素上移，自身不受影响。

BFC理解与应用？

Block format context,块级格式化上下文。

一块独立渲染区域，内部元素的渲染不会影响边界以外的元素。

形成BFC的常见条件

float不是none,position是absolute或fixed，overflow不是visible，display是flex、inline-block等

float布局问题，以及clearfix：

如何实现圣杯布局和双飞翼布局？

两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局，并且中间部分在HTML代码中要写在前边，这样它就会被优先加载渲染。

主要的不同之处就是在解决中间部分被挡住的问题时，采取的解决办法不一样。圣杯布局是在父元素上设置了padding-left和padding-right，在给左右两边的内容设置position为relative，通过左移和右移来使得左右两边的内容得以很好的展现，而双飞翼布局则是在中间这个div的外层又套了一个div来放置内容，在给这个中间的div设置margin-left和margin-right

————————————————

版权声明：本文为CSDN博主「webchang」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/weixin_43974265/article/details/115427185

手写clearfix

.clearfix: after {
    content:'';
    display: table;
    clear: both;
}
.clearfix {
    zoom:1;  
}

flex画色子：

flex实现一个三点的色子？

absolute和relative分别依据什么定位？

relative依据自身定位，absolute根据最近一层的定位元素定位。常用于菜单下拉等地方。fixed固定定位，常用于弹窗等。

居中对齐有哪些实现方式？

inline元素：line-height的值等于height

absolute元素：top: 50%+margin-top负值

absolute: transform(-50%,-50%)

absolute元素： top,left,bottom,right=0+margin:auto

line-height的继承问题？

具体数值，如：30px就继承该值

比例，如2/1.5，继承该比例(元素自己的行高乘以比例)

百分比，如200%，继承计算出来的值，直接乘以200%(先计算被继承者的font-size*百分比，再继承)

rem是什么？

px,绝对长度单位，最常用

em,相对长度单位，相对于父元素，不常用

rem，相对长度单位相对于根元素（HTML元素），常用于响应式布局

如何实现响应式？

media-query，根据不同的屏幕宽度设置根元素的font-size

rem基于根元素的相对单位

rem的弊端：“阶梯”性

网页视口尺寸：

window.screen.height //屏幕高度

window.innerHeight // 网页视口高度

document.body.clientHeight // body高度

vh网页视口高度的1/100

vw网页视口宽度的1/100

vmax取两者（vh和vw）最大值；vmin取两者最值

关于css3动画？