面试题---CSS
- 子绝父相下，子百分比的问题
- 两栏布局问题
- 三栏布局问题---圣杯问题(三栏，左右固定，中间自适应)。
- 内联样式与块级样式的区别
- 怎么让一个 div 水平垂直居中
- 分析比较 display: none 、visibility: hidden、opacity: 0优劣和适用场景
- css中min-width与max-width
子绝父相下，子百分比的问题
1 父元素相对定位，子元素绝对定位(子绝父相)的前提下，子元素宽高若设为百分比，是相对父元素的content + padding的值, 注意不含border
如果子元素不是绝对定位，那宽高设为百分比是相对于父元素的宽高，标准盒模型下是content(IE盒模型是content+padding+border。)
两栏布局问题
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; /*均分了父元素剩余空间*/
}
三栏布局问题—圣杯问题(三栏，左右固定，中间自适应)。
- 利用绝对定位
- 利用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等等。
怎么让一个 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)；按比例缩放图片；
