每日面试题（HTML+CSS）（一）

每日面试题（HTML+CSS）

★ 1. 父元素和子元素宽高不固定，如何实现子元素水平垂直居中

1. 弹性盒模型

(1) 给父元素设置display: flex; justify-content: center; align-items: center;

.fu{
	display: flex;
	justify-content: center;
	align-items: center;
}

(2) 给父元素设置display: flex; 子元素设置margin: auto;

.fu{
	display: flex;
}
.zi{
	margin: auto;
}

2. 定位

(1) 给父元素设置：position: relative; 给子元素设置position: absolute; left: 50%; height: 50%; transform: translate(-50%,-50%)

.fu{
	position: relative;
}
.zi{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}

★★ 2. 分别实现骰子中的’一点’ 和 ‘三点’ 的布局

1. 一点布局

(1) 给父元素设置：display: flex; justify-content: center; align-items: center;

.fu{
	display: flex;
	justify-content: center;
	align-items: center;
}

2. 三点布局

(1) 给父元素设置：display: flex; justify-content: space-between; 给第二第三个子元素分别设置：align-self: center; align-self: flex-end;

.fu{
	display: flex;
	justify-content: space-between;
}
.zi:nth-child(2){
	align-self: center;
}
.zi:nth-child(3){
	align-self: flex-end;
}

★★ 3. 简述选择器~和+的区别

1. ~ 选择器的作用：

(1) 选择紧跟着当前符合条件元素后面的同级元素

(2) 可以匹配多个

2. + 选择器的作用：

(1) 选择紧跟在当前符合条件元素后面的同级元素

(2) 只能匹配一个

例子：

<div class="box"></div>
<p class="one"></p>
<span class="two"></span>
<p class="three"></p>
<span class="four"></span>

.box ~ p ：可以选中box下的所有p元素，即是 one 和 three

.box + span ：则匹配选中box相邻下符合条件的第一个元素，即 two

★★ 4. 简述box-sizing的有效值以及所对应的盒模型规则

box-sizing: content-box/border-box/inherit

box-sizing属性用于更改用于计算元素的宽度和高度默认的CSS盒子模型，可以使用此属性来模拟不正确支持CSS盒子模型规范的游览器行为。

1. content-box

(1) box-sizing的默认属性

(2) 是CSS2.1中规定的宽度高度的显示行为

(3) 在CSS中定义的宽度和高度就对应到元素的内容框（即元素容器本身)

(4) 在CSS中定义的宽度和高度之外绘制元素的内边距和边框（即在元素容器本身上增加内边距和边框，容器宽高需要自增计算

实际的宽度=内容+左右内边距+左右边框+左右外边距

实际的高度=内容+上下内边距+上下边框+上下外边距

2. border-box

(1) 在CSS中微元素设定的宽度和高度就决定了元素的边框值

(2) 元素在设置内边距和边框是在已经设定好的宽度和高度之内进行绘制

(3) CSS中设定的宽度和高度减去边框和内间距才能得到元素内容所占的实际宽度和高度

实际的宽度=内容（宽度+内边距+边框）+外边距

实际的高度=内容（高度+内边距+边框）+外边距

3. inherit

(1) 规定元素是从父容器继承box-sizing的属性值

★★★ 5.html中元素的margin是否会叠加（合并）？如何解决？

1. 父子嵌套元素外边距合并

解决方法：

让父级触发BFC

(1) position:absolute/fixed;

(2) display:inline-block;

(3) float:left/right;

(4) overflow:hidden

使用时根据具体情况解决父子外边距合并的问题

2. 兄弟元素上下外边距重叠

解决方法：

只定义上边距或者下边距

★★ 6. 简述align-items和align-content的区别

1. align-items：可以应用于所有的flex容器，它的作用是设置flex子项在每个flex行的交叉轴上的默认对齐方式

2. align-content：只适用于多行的flex容器，在使用前需在flex容器设置flex-wrap：wrap;表示子元素超出换行；align-content 它的作用是当flex容器在交叉轴上有多余的空间时，将子项作为一个整体进行对齐。

★★ 7. 简述data-*属性的用法（如何设置，如何获取），有何优势？

1. data-*定义：

(1) 是用于储存页面或应用程序的私有自定义数据

(2) 赋予我们在所有html元素上嵌入自定义data属性的能力

2. data-*用法：

(1) 属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符

(2) 属性值可以是任意字符串

(3) 一个元素可以拥有任意数量的data属性

(4) data属性无法储存对象，如需储存，可通过对象序列化

3. data-*如何设置、获取：

(1) 如何设置

通过JavaScript内置的setAttribute('data属性名','新内容')即可设置

通过该数据类型的(dataset) API设置data值，IE10以上才支持

var button = document.queryselector('button')

button.dataset.data属性名 = '新内容' ; 这里的data属性名是指data-后面的名字

(2) 如何获取

通过JavaScript内置的getAttribute('data属性名') 即可获取

通过该数据类型的(dataset) API设置data值，IE10以上才支持

var button = document.queryselector('button')

data = button.dataset.data属性名 ; 这里的data属性名是指data-后面的名字

4. data-*优势：

(1) 其储存的自定义数据能够被页面的JavaScript利用，可以创建更好的用户体验

(2) 可以通过JavaScript来构造数据、填充数据

(3) 代码体积小、较为灵活

(4) 解决网站的外观和实用性之间产生的冲突