网站导航
> 文章列表 > 面试题---CSS

面试题---CSS

网友: 文章列表 2024-03-21 16:03:03

面试题---CSS

面试题---CSS

  • 子绝父相下，子百分比的问题
  • 两栏布局问题
  • 三栏布局问题---圣杯问题(三栏，左右固定，中间自适应)。
  • 内联样式与块级样式的区别
  • 怎么让一个 div 水平垂直居中
  • 分析比较 display: none 、visibility: hidden、opacity: 0优劣和适用场景
  • css中min-width与max-width

子绝父相下，子百分比的问题

1 父元素相对定位，子元素绝对定位(子绝父相)的前提下，子元素宽高若设为百分比，是相对父元素的content + padding的值, 注意不含border

如果子元素不是绝对定位，那宽高设为百分比是相对于父元素的宽高，标准盒模型下是content(IE盒模型是content+padding+border。)

两栏布局问题

2 两栏布局问题：需求是左边固定，右边自适应
下面介绍常用的两种方式：

  1. 利用绝对定位
  2. 利用flex布局
// 利用绝对定位，让左侧div,成为BFC
<body><div id="parent"><div id="left">左列定宽</div><div id="right">右列自适应</div></div>
</body>
// css
#parent{position: relative; /*子绝父相*/
}
#left {position: absolute;top: 0;left: 0;width: 100px;height: 500px;
}
#right {marin-left:100px;width:calc(100%-100px);height: 500px;
}

<body><div id="parent"><div id="left">左列定宽</div><div id="right">右列自适应</div></div>
</body>
// css
#parent{width: 100%;height: 500px;display: flex;
}
#left {width: 100px;
}
#right {flex: 1; /*均分了父元素剩余空间*/
}

三栏布局问题—圣杯问题(三栏，左右固定，中间自适应)。

  1. 利用绝对定位
  2. 利用flex布局
// 利用绝对定位
1.父元素使用相对定位
2.两侧子元素使用绝对定位
3.中间元素不做定位处理，只留出空间就好<div class="container"><div class="left">Left</div><div class="main">Main</div><div class="right">Right</div>
</div>
// css
body,html,.container{height: 100%;padding: 0;margin: 0;overflow: hidden;
}.left,.right{position: absolute;height:100%;top: 0;
}.left{left: 0;width: 200px;
}.right{right: 0;width: 200px;
}.main{height:100%;margin: 0 200px;
}

<div class="container"><div class="left">Left</div><div class="main">Main</div><div class="right">Right</div>
</div>// css
.container{display: flex;
}.left{width:200px;
}.main{flex: 1;/*均分了父元素剩余空间*/
}.right{width:200px;
}

内联样式与块级样式的区别

常见的块级元素：div、h1-h6、address、p等等。
常见的内联元素：span、strong等等。

面试题---CSS

怎么让一个 div 水平垂直居中

<div class="parent"><div class="child"></div>
</div>// 第一种做法是：直接在父级元素设置flex。通过设置父级的flex，让子级元素水平垂直居中。
.parent {display: flex;justify-content: center;align-items: center;
}// 第二种做法：父元素dispaly:flex;子元素margin:auto;
.parent {display: flex;
}
.child{margin:auto;
}// 第三种做法：transform + absolute + relative
.parent {position: relative;
}
.child {position: absolute;top: 50%; left: 50%;transform: translate(-50%, -50%); 
}

分析比较 display: none 、visibility: hidden、opacity: 0优劣和适用场景

display:none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击。
visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击
opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击

继承方面：

  • display: none和opacity: 0：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。
  • visibility: hidden：是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式。

性能方面：

  • display:none : 修改元素会造成文档回流,读屏器不会读取display: none元素内容，性能消耗较大
  • visibility:hidden: 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取visibility: hidden元素内容，性能消耗较一般
  • opacity: 0 ： 修改元素会造成重绘，性能消耗较少

css中min-width与max-width

max-width(最大宽度属性)：用来定义宽度显示的最大值
min-width(最小宽度属性)：用来定义宽度显示的最小值

<div class="min-width"> <img src="url10" /> //宽为100px 
</div> 
<div class="max-width"> <img src="url11" />  //宽度为400px 
</div> .max-width img{...}{ max-width:300px;} 
.min-width img{...}{ min-width:300px} “min-width”里的img图片最小宽度为300px，而实际图片只有100px ，所以图片被拉伸到300px；
“max-width”里的img图片最大宽度为300px，而实际图片宽度是400px ，所以图片被缩小到300px；

如何修改才能让图片宽度为 300px?
<img src="1.jpg" style="width:480px!important;”>方法一：
max-width:300px;覆盖其样式；
方法二：
transform: scale(0.625)；按比例缩放图片；
网络标签：

相关问题