1. display: none; 与 visibility: hidden; 的区别
-
联系：它们都能让元素不可见
-
区别：
-
display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见 -
修改常规流中元素的
display通常会造成文档重排。修改visibility属性只会造成本元素的重绘
-
2. 外边距折叠(collapsing margins)
-
毗邻的两个或多个
margin会合并成一个margin，叫做外边距折叠。规则如下：-
两个或多个毗邻的普通流中的块元素垂直方向上的
margin会折叠 -
浮动元素或
inline-block元素或绝对定位元素的margin不会和垂直方向上的其他元素的margin折叠 -
创建了块级格式化上下文（BFC）的元素，不会和它的子元素发生margin折叠
-
3. z-index是什么？在position的值什么时候可以触发?
z-index 属性设置元素的堆叠顺序。拥有更⾼堆叠顺序的元素总是会处于堆叠顺序较低的元素的前⾯，当 脱离⽂档流内容较多，并且相互重叠的时候，就有可能发⽣本想完全显示的内容被其他内容遮挡的结 果，这时我们就需要⼈为指定哪个层在上⾯，哪个在下⾯，z-index属性就是⼲这个⽤的。
注意：Z-index 仅能在定位元素上奏效.
在position的值是relative、absolute、fixed、sticky时候可以触发
4. 简述box-sizing的有效值以及所对应的盒模型规则
box-sizing 属性允许您以特定的⽅式定义匹配某个区域的特定元素。
语法：box-sizing: content-box|border-box|inherit;
1）box-sizing:content-box；这是由 CSS2.1 规定的宽度⾼度⾏为。宽度和⾼度分别应⽤到元素的内容框。 在宽度和⾼度之外绘制元素的内边距和边框。是默认值。如果你设置⼀个元素的宽为100px，那么这个元 素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中
2）box-sizing:border-box；为元素指定的任何内边距和边框都将在已设定的宽度和⾼度内进⾏绘制。告诉 浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说，如果你将⼀个元素的width设 为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding 的计算值。⼤多数情况下这使得我们更容易的去设定⼀个元素的宽⾼
3）box-sizing:inherit;；规定应从⽗元素继承 box-sizing 属性的值
5. 移动端适配怎么做？
1） meta viewport（视⼝）
移动端初始视⼝的⼤⼩为什么默认是980px？
因为世界上绝⼤多数PC⽹⻚的版⼼宽度为 980px ，如果⽹⻚没有专⻔做移动端适配，此时⽤⼿机访问⽹ ⻚旁边刚好没有留⽩，不过⻚⾯缩放后⽂字会变得⾮常⼩。
为了解决⻚⾯缩放的体验问题，在⽹⻚代码的头部，加⼊⼀⾏viewport元标签。
这⾥的device-width告诉浏览器，将视⼝的宽度设置为设备宽度（这个宽度是⼈为预设的，不设的话就是 980px）。 属性含义
initial-scale：第⼀次进⼊⻚⾯的初始⽐例 minimum-scale：允许缩⼩最⼩⽐例 maximum-scale：允许放⼤最⼤⽐例 user-scalable：允许使⽤者缩放，1 or 0 (yes or no)
2） 图⽚适配
img { max-width: 100%; } 此时图⽚会⾃动缩放，同时图⽚最⼤显示为其⾃身的100%（即最⼤只 可以显示为⾃身那么⼤） 为什么不⽤ img { width: 100%; } ？ 当容器⼤于图⽚宽度时，图⽚会⽆ 情的拉伸变形
3） 媒体查询
为什么要媒体查询？
针对不⽤的设备提前为⽹⻚设定各种 CSS 样式CSS3中的Media Query模块，⾃动检测屏幕宽度，然后加载 相应的CSS⽂件
语法举例
@media screen and (min-width:1200px){
body{
background-color: red;
}
当屏幕宽度⼤于1200px时，背景⾊变为红⾊
4） 动态 rem ⽅案
为什么要⽤rem？
和媒体查询配合，实现响应式布局
px、em、rem 有什么不同？
px是pixel（像素），是屏幕上显示数据的最基本的点，在HTML中，默认的单位就是px；em 是⼀个相对 ⼤⼩，相对于⽗元素font-size的百分⽐⼤⼩rem 是相对于根元素的font-size
⽤法示例
<!--
* @作者: kerwin
* @公众号: 大前端私房菜
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
html{
font-size: 100px;
}
body{
font-size: 16px;
}
.box{
width: 7.5rem;
height: 100px;
background:yellow;
/* font-size: 16px; */
}
</style>
<script>
//fontsize 计算
document.documentElement.style.fontSize=document.documentElement.clientWidth/750 * 100 +'px'
// fontsize = 当前设备的css布局宽度/物理分辨率(设计稿的宽度)* 基准font-size
</script>
</head>
<body>
<div class="box">
赵钱孙李
</div>
</body>
</html>
6. 什么是CSS3 transform? transition? animation? 区别是什么？
CSS3属性中关于制作动画的三个属性：Transform,Transition,Animation。
1、transform：描述了元素的静态样式，本身不会呈现动画效果，可以对元素进⾏ 旋转rotate、扭曲skew、缩放
scale和移动translate以及矩阵变形matrix。
div{
transform:scale(2);
}
transition和animation两者都能实现动画效果
transform常常配合transition和animation使⽤
2、transition样式过渡，从⼀种效果逐渐改变为另⼀种效果
transition是⼀个合写属性
transition:transition-property transition-duration transition-timing-function
transition-delay
从左到右分别是：css属性、过渡效果花费时间、速度曲线、过渡开始的延迟时间
div{
width：100px;
height:100px;
transition:transform 2s;
}
div：hover{
transform:rotate(180deg);
}
transition通常和hover等事件配合使⽤，需要由事件来触发过渡
我们知道 transition 虽然简单好⽤，但是我们会发现它受到各种限制。
(1)transition需要⼀个事件来触发，⽐如hover，所以没法在⽹⻚加载时⾃动发⽣
(2) transition是⼀次性的，不能重复发⽣，除⾮⼀再触发。
(3) transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
(4)⼀条transition规则，只能定义⼀个属性的变化，不能涉及多个属性。
3、animation动画 由@keyframes来描述每⼀帧的样式
div{
animation:myAnimation 5s infinite
}
@keyframes myAnimation {
0%{left:0;transform:rotate(0);}
100%{left:200px;transform:rotate(180deg);}
}
区别：
（1）transform仅描述元素的静态样式，常常配合transition和animation使⽤
（2）transition通常和hover等事件配合使⽤，animation是⾃发的，⽴即播放
（3）animation可设置循环次数
（4）animation可设置每⼀帧的样式和时间，transition只能设置头尾
（5）transition可与js配合使⽤，js设定要变化的样式，transition负责动画效果，如：
animation属性类似于transition，他们都是随着时间改变元素的属性值，
其主要区别在于：transition需要触发⼀个事件才会随着时间改变其CSS属性；
animation在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到⼀种动画的效果
1）动画不需要事件触发，过渡需要。
2）过渡只有⼀组（两个：开始-结束） 关键帧，动画可以设置多个。
7. ⽗元素和⼦元素宽⾼不固定，如何实现⽔平垂直居中
<!--
* @作者: kerwin
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
html,
body {
width: 100%;
height: 100%;
}
body {
background-color: azure;
}
.parent {
width: 500px;
height: 500px;
background-color: yellowgreen;
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* 使⽤css3的transform来实现 */
}
.child p {
width: 300px;
height: 300px;
background-color: blue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
<p></p>
</div>
</div>
</body>
</html>
<!--
* @作者: kerwin
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
body,
html {
width: 100%;
height: 100%;
}
.parent {
display: flex;
justify-content: center;
align-items: center;
width: 600px;
height: 600px;
background: yellow;
}
.parent .child {
color: #fff;
width: 300px;
height: 300px;
text-align: center;
background-color: blue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">hello world</div>
</div>
</body>
</html>
8. 假设高度默认100px ，请写出三栏布局，其中左栏、右栏各为300px，中间自适应。
-
方法1：浮动
-
方法2：绝对定位
-
方法3：
flexbox。移动开发里经常用到。
方法1、浮动：
左侧设置左浮动，右侧设置右浮动即可，中间会自动地自适应。
<!--
* @作者: kerwin
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
.box div{
height: 100px;
}
.left{
width: 300px;
float:left;
background:gray;
}
.right{
width: 300px;
float: right;;
background:gray;
}
.center{
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="box">
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
</div>
</body>
</html>
方法2、绝对定位：
左侧设置为绝对定位，
left：0px。右侧设置为绝对定位，right：0px。中间设置为绝对定位，left和right都为300px，即可。中间的宽度会自适应。
<!--
* @作者: kerwin
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
.box div{
height: 100px;
}
.left{
width: 300px;
position: absolute;
left:0;
background:gray;
}
.right{
width: 300px;
position: absolute;
right:0;
background:gray;
}
.center{
position: absolute;
left:300px;
right:300px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="box">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
</body>
</html>
方法3、flexbox布局
将左中右所在的容器设置为
display: flex，设置两侧的宽度后，然后让中间的flex = 1，即可。
<!--
* @作者: kerwin
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
.box div{
height: 100px;
}
.box{
display: flex;
}
.left{
width: 300px;
background:gray;
}
.right{
width: 300px;
background:gray;
}
.center{
flex:1;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="box">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
</body>
</html>
2908
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
