html+css的几道面试题

最新推荐文章于 2024-04-02 00:56:58 发布

⑥⑦

最新推荐文章于 2024-04-02 00:56:58 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/weixin_43249993/article/details/101313884

版权

怎么让一个不定宽高的DIV，垂直水平居中？

1）使用CSS方法：占位置

父盒子设置：display：table-cell； text-align：center；vertical-align：middle；
Div设置： display：inline-block；vertical-align：middle；

2）使用CSS3的transform：不占位置

父盒子设置：position：relative Div设置： transform：
translate(-50%，-50%)；position： absolute；top： 50%；left： 50%；

position几个属性的作用？

position的常见四个属性值：relative， absolute， fixed， static。
一般都要配合"left"、 “top”、 “right” 以及 "bottom"属性使用。

1）Static：默认值，处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。

2）Relative：相对定位，可将其移至相对于其正常位置的地方，它偏移的top，right，bottom，left的值都以它原的位置为基准偏移。注意relative移动后的元素在原来的位置仍占据空间。

3）Absolute：绝对定位，可定位于相对于包含它的元素的指定坐标。意思就是如果它的父容器设置了position属性，并且position的属性值为absolute
或者relative，那么就会依据父容器进行偏移。如果其父容器没有设置position属性，那么偏移是以body为依据。注意设置absolute属性的元素在标准流中不占位置。

4）Fixed：位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。不论窗口滚动与否，元
素都会留在那个位置。它始终是以body为依据的。注意设置fixed属性的元素在标准流中不占位置。

px，em，rem的区别？

1）px像素（Pixel），绝对单位。

像素px是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是计
算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI。

2）em

em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。

3）rem

rem是CSS3新增的一个相对长度单位，使用rem为元素设定字体大小时，相对的是HTML根元素。

4）区别：

IE无法调整那些使用px作为单位的字体大小，em和rem可以缩放，rem相对的只是HTML根元素。
这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
目前，除了IE8及更早版本外，所有浏览器均已支持rem。

什么是BFC？

1）定义：

BFC(Blockformattingcontext)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-levelbox参与，
它规定了内部的Block-levelBox如何布局，并且与这个区域外部毫不相干。

2）布局规则：

A.内部的Box会在垂直方向，一个接一个地放置。
B.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
C.每个元素的marginbox的左边与包含块borderbox的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
D.BFC的区域不会与floatbox重叠。 E.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
F. 计算BFC的高度时，浮动元素也参与计算。

3）哪些元素会生成BFC：

A. 根元素
B.float属性不为none
C.position为absolute或fixed
D.display为inline-block， table-cell， table-caption， flex， inline-flex
F.overflow不为visible

表格自动换行怎么实现？

word-break：normal使用浏览器默认的换行规则；
break-all允许单词内换行；
keep-all只能在半角空格或连字符处换行 word-wrap：normal是用浏览器默认的换行规则；
break-word在长单词或URL地址内部进行换行。

box-sizing、transition、translate分别是什么？

Box-sizing：用来指定盒模型的大小的计算方式。

boreder-box 从边框计算盒子大小

content-box 从内容固定盒子大小。

transition：当前元素只要有“属性”发生变化时，可以平滑的进行过渡。

transtion-propety设置过渡属性；

transtion-duration设置过渡时间；

trantion-timing-function设置过渡速度；

trantion-delay设置过渡延时

translate：通过移动改变元素的位置；有x、y、z三个属性

选择器优先级是怎样的？

！important>行内样式>id选择器>类选择器>标签选择器>通配符>继承

权重算法：

（0，0，0，0）==》第一个0对应的是important的个数，第二个0对应的是id选择器的个数，第三个0 对应的类选择器的个数，第四个0对应的是标签选择器的个数，就是当前选择器的权重。

比较：

先从第一个0开始比较，如果第一个0大，那么说明这个选择器的权重高，如果第一个相同，比较第二个，依次类推

CSS3选择器有哪些？

属性选择器、伪类选择器、伪元素选择器。

Iframe的作用？

用法：

Iframe 是用来在网页中插入第三方页面，早期的页面使用iframe
主要是用于导航栏这种很多页面都相同的部分，这样可以在切换页面的时候避免重复下载。

优点：

便于修改，模块分离，像一些信息管理系统会用到。但现在基本上不推荐使用。除非特殊需要，一般不推荐使用。

缺点：

（1）iframe的创建比一般的DOM元素慢了1-2个数量级
（2）iframe标签会阻塞页面的加载，如果页面的onload事件不能及时触发，会让用户觉得网页加载很慢，用户体验不好.在Safari和Chrome 中可以通过js动态设置iframe的src属性来避免阻塞.
（3）iframe对于SEO不友好，替代方案一般就是动态语言的Incude机制和ajax动态填充内容等.