CSS+Html面试题（二）

news2025/3/7 6:04:30

一、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%);
}