css3面试题
2020-12-04 本文已影响0人
A_dfa4
样式选择器
盒子阴影文字阴影
动画
盒子模型
标准盒模型 box-sizing: content-box|border-box|inherit; // content-box 是内容的宽高不带padding等 border-box的内容是 内容+padding+border;
ie盒模型
// 举例子 想创建一个 100*100的盒子, 本来写的是 width: 是100 height: 100,没改一次都需要计算,css3提供的box-sizing: border-box; 是盒子的大小 不论怎么调整border和padding.所以我现在项目中大部分都在用border-box,包括我看的bootstrap和element各大ui组件他们的公共样式大部分也是用的border-box,所以我认为这是我们开发中的一种规范,和一种方式
响应式布局
flex布局
面试题
盒子水平居中的五大方案
这种需求在我之前项目当中是非常常见的,我之前经常用...几种 flex布局出来之后我在移动端常用flex布局 很方便, 在逛掘金的时候发现了display: table-cell;也能实现就记下来了
- 定位+ margin
<style>
.wrap{
width: 300px;
height: 300px;
border: 1px solid red;
position: relative;
}
.box{
position: absolute;
width: 100px;
height: 100px;
border: 1px solid pink;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box"></div>
</div>
</body>
- 定位 + transform: translate
<style>
.wrap{
width: 300px;
height: 300px;
border: 1px solid red;
position: relative;
}
.box{
position: absolute;
width: 100px;
height: 100px;
border: 1px solid pink;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="wrap">
<div class="box"></div>
</div>
</body>
- table-cell
<style>
.wrap{
width: 300px;
height: 300px;
border: 1px solid red;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.box{
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid pink;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box"></div>
</div>
</body>
// display: table-cell; 本身是控制文本的 所以子元素需要 display: in-line或者 display: inline-block;并且父元素 需要有具体的宽高
- flex
<style>
.wrap{
width: 300px;
height: 300px;
border: 1px solid red;
display: flex;
justify-content: center;
align-items: center;
}
.box{
width: 100px;
height: 100px;
border: 1px solid pink;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box"></div>
</div>
</body>
几大经典布局方案
圣杯布局
双飞翼布局
=> 左右固定 中间自适应
圣杯布局和双飞翼布局概念
圣杯 是像奖杯一样一体(同级别)
双飞翼是像翅膀一样翅膀可以拆掉可以留下来不属于身体的一部分
圣杯布局
<style>
.container{
height: 100%;
padding: 0 200px;
}
.left,.center,.right{
float: left;
}
.left,.right{
width: 200px;
min-height: 200px;
background-color: rgb(99, 99, 162);
}
.center{
width: 100%;
background-color: pink;
min-height: 400px;
}
.left{
margin-left: -100%;
position: relative;
left: -200px;
}
.right{margin-right: -200px}
.clearfix{
clear: both;
}
</style>
<body>
<div class="container clearfix">
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
双飞翼布局
<style>
body{
min-width: 800px;
}
.left,.container,.right{
float: left;
}
.left,.right{
width: 200px;
min-height: 200px;
background-color: rgb(99, 99, 162);
}
.container{
width: 100%;
background-color: pink;
min-height: 400px;
}
.left{
margin-left: -100%;
position: relative;
left: -200px;
}
.right{margin-right: -200px}
.clearfix{
clear: both;
}
</style>
<body>
<div class="clearfix" style="padding: 0 200px;">
<div class="container">
<div class="center"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
双飞翼2
<style>
.left,.container,.right{
float: left;
}
.left,.right{
width: 200px;
min-height: 200px;
background-color: rgb(99, 99, 162);
}
.container{
width: calc(100% - 400px);
background-color: pink;
min-height: 400px;
}
.clearfix{
clear: both;
}
</style>
<body>
<div class="clearfix">
<div class="left"></div>
<div class="container">
<div class="center"></div>
</div>
<div class="right"></div>
</div>
</body>
圣杯3 flex布局 不写了
移动端响应式布局方案
- media (pc和h5同一套)
- rem (俩套)
- flex (部分)
- vh/vm(相当于百分比)
什么是标签语义化
合适的标签做合适的事情 怎么说
块标签 行内标签 行内块标签 (分类答) ?
如果转换?
让一个标签消失有几种方法?
请说出z-index的工作原理
文档流 定位
你对HTML5的理解
不考虑其他因素,下面哪种的渲染性能更高
.box a {...}
a{...}
a渲染性能更高 因为浏览器的渲染机制是选择器从右向左查询, 先找a 在找.box下的a 1进行了二次查找
你感觉你擅长哪些技术栈
- 突出自己准备的面试题
- 面试官你好我叫** 来自毕业于大学从哪年哪年-哪年哪年参加工作到现在为止工作*年,先后从事哪些公司个人比较少擅长哪些技术栈,自己平时有什么兴趣爱好
- 面试官可能会被你引导,
