CSS+Html面试题（二）

一、CSS选择器有哪些，选择器的优先级？

选择器类型：ID选择器、类选择器、标签选择器、通配符、伪类、伪元素、子代选择器、相邻选择器、后代选择器
优先级排序：!important>内联样式>ID选择器>类选择器>标签选择器>通配符

二、CSS中，对DOM元素隐藏的方式

1、display:none，元素不占据空间
2、visibility:hidden，隐藏元素，但元素仍占据空间
3、opacity:0,设置透明度为0
4、利用据对定位，display:fix/absolute,left:-999px
5、设置宽高属性为0

三、行内元素、行内块元素和块级元素的区别？

行内元素：没有宽、高，垂直方向上的内边距、外边距属性，只有水平方向的内边距和外边距属性，不自动换行
块级元素：有宽、高、内边距、外边距属性，默认为父元素的宽、高属性，自动换行
行内块元素：有宽、高、内边距、外边距属性，不自动换行，常见的行内块元素有：label、input、select、textarea、button、img、th、td

四、什么是外边距重叠，怎么解决外边距重叠问题

外边距重叠：相邻盒子（父子关系或者兄弟关系）的外边距合并成一个外边距
解决办法：针对父元素，给父元素添加padding或border属性；给父元素设置overfloe：hidden，创建一个新的BFC，但是会隐藏超出父元素范围的内容；
针对子元素：给子元素清除浮动clear：both；将子元素设置display:inline-block，使其成为行内块元素；使用绝对定位的方式

五、rgba()和opacity的区别？

rgba()是color、back-ground等属性的值，当设置为透明的时候，子元素不能继承透明效果
opacity是CSS中的一个属性，值的取值范围为0-1，子元素可以继承当前元素设置的透明度

六、CSS中如何让单行文字在水平垂直居中？

line-height设置和height属性一样的高度；text-align:center

七、如何水平居中一个元素？

1、

.child{height: 100px;position: absolute;//父元素相对定位top:50%;left:50%;transform: translate(-50%,-50%);
}

2、

.child{width: 100px;height: 100px;position: absolute;top:50%;left:50%;margin-top: -50px;margin-left: -50px;
}

3、

.child {width: 100px;height: 100px;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto
}

4、

.father{width: 200px;height: 200px;display: flex;justify-content: center;align-items: center;
}

八、如何垂直居中一个img？

1、将父元素设置为flex容器，利用align-items: center;属性使子元素（图片）在父元素的垂直方向上居中对齐

.container {display: flex;align-items: center;justify-content: center; /* 可选，用于水平居中 */height: 100vh; /* 可根据需要调整高度 */
}

2、把父元素定义为grid容器，然后使用place-items: center;属性同时实现水平和垂直居中

.container {display: grid;place-items: center;height: 100vh; /* 可根据需要调整高度 */
}

3、利用绝对定位的方式，先将父元素设置为相对定位，再将图片设置为绝对定位，然后通过top: 50%;和transform: translateY(-50%);的组合，使图片的垂直中心与父元素的垂直中心对齐

.container {position: relative;height: 300px; /* 可根据需要调整高度 */
}
.container img {position: absolute;top: 50%;transform: translateY(-50%);
}

九、px、em、rem的区别

px:px是像素的缩写，是固定的，一旦设置就不会因为适应页面的大小而改变
em:相对长度单位，如果本身有大小，相对于本身，没有的话相对于父元素大小，默认浏览器的大小就是1em=16px
rem：相对长度单位，相对于根元素的字体大小

十、Sass、Less是什么，大家为什么要使用？

他们都是CSS的预处理器，扩展了CSS的功能，使开发者能够更灵活，更快捷的进行开发。sass的文件以.scss结尾，less文件以.less文件结尾，能够支持混合、继承、变量、嵌套、计算等功能。如果想要功能更强大可以使用sass，如果想要更接近css原生建议使用Less.