标签：flex 面试题 -- 元素 width 宽度 border CSS left
1. 面试中，被问到关于flex布局中，flex-shirink的计算问题。
父元素宽度300px，display为flex, 子元素1宽度100px，flex-shirink为1，子元素2宽度300px，flex-shirink为2。 子元素1，子元素2的实际宽度是多少？如何计算？
<div class="box">
<div class="first">85.719</div>
<div class="second">214.281</div>
</div>
.box{
width: 300px;
display: flex;
}
.first{
background: red;
width: 100px;
flex-shrink: 1;
}
.second{
background: yellow;
width: 300px;
flex-shrink: 2;
}
计算方法：
需要收缩的空间：100+300-300=100
每个子项目需要收缩的值：100n+300*2n=100; n=1/7
first宽度：100-100*1/7=85.719
second宽度：300-300*2*1/7 = 214.281
2 实现一个div在不同分辨率下的水平垂直居中
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid pink;
width: 200px;
height: 200px;
}
3 左右固定，中间自适应样式
<style>
.box {
display: flex;
height: 200px;
}
.left {
flex: 0 0 200px;
background-color: pink;
}
.center {
flex: 1;
background-color: yellow;
}
.right {
flex: 0 0 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
4 清除浮动的几种方式：
//1. 在元素最后下加一个元素, 设置clear：both属性，缺点是会增加多余无用的html元素
<div class="container">
<div class="left">left浮动</div>
<div class="right">right浮动</div>
<div style="clear:both;"></div>
</div>
//2. 使用after伪元素(给父元素添加after伪元素)
.container::after {
content: ' ';
display: block;
clear: both;
}
//3. 给父级元素设置overflow:hidden, 缺点：不能和position配合使用
5 box-sizing常用的属性有哪些？分别有什么作用？
（1）content-box 宽高是元素本身的宽高 不包含border+padding （2）border-box 元素的宽高已经包含了border+padding （3）inherit 从父元素继承box-sizing属性
6 CSS样式权重
!important > 内联样式 > id选择 > （class选择 = 伪类选择） > (标签选择 = 伪元素选择)
7 请简要描述margin重合问题，及解决方式
具体解释：可见CSS--BFC （https://www.cnblogs.com/Super-scarlett/p/15855526.html）
问题：相邻两个盒子垂直方向上的margin会发生重叠，只会取比较大的margin 解决：（1）设置padding代替margin （2）设置float （3）设置overflow （4）设置position：absolute 绝对定位 （5）设置display： inline-block
8 <meta></meta>标签的理解
1、meta是html文档头部的一个标签，这个标签对用户不可见，是给搜索引擎看的。 2、描述、关键字、作者、移动端适配。 3、<meta charset="UTF-8"> 使用的编码格式
9 display：none 和 visibility：hidden区别？
display：none 在dom中不占空间。
visibility：hidden 还存在dom结构中，只是不可见。
10 重绘和重排
重排一定引起重绘，重绘不一定引起重排
重绘：不影响页面布局，比如更改颜色。
重排：布局的改变导致重新构建。
11 为什么要初始化css样式？
因为浏览器的兼容问题，不同浏览器对有些标签的默认值不同，如果不初始化css，会导致不同浏览器页面间的显示差异。
12 移动端适配1px问题
移动端的1px在有些机型上看上去比较粗，虽然写着1px，但是看上去可能是2px
解决方案：
//伪类+transform: 设置元素的border:none; 然后利用:before 或者 :after重做border，并用transform的scale缩小一半，原先的元素相对定位，新做的border绝对定位
li{
position: relative;
border:none;
}
li:after{
content: '';
position: absolute;
left: 0;
bottom: 0;
background: #cccccc;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
13 居中为什么要使用transform？ 为什么不使用marginLeft/Top？
transform 属于合成属性，不会引起整个页面的回流重绘，节省性能消耗，但是占用内存会大些 top/left属于布局属性，会引起页面layout回流和repaint重绘。
14 介绍css3中position:sticky
在之前项目，遇到导航栏滚动，滚到到窗口顶部悬停；移动端，安卓手机和iphone会有不同效果，当时解决兼容性，用到了position:sticky
具体案例：可以看我之前博客--导航栏滚动：https://www.cnblogs.com/Super-scarlett/p/10000067.html
安卓手机使用fixed就可以实现滚到到窗口顶部悬停。但是苹果手机不起作用。解决方案：
.postplayIOS {
position: sticky;
position: -webkit-sticky;
left: 0;
top: 0;
}
.postplayAndroid {
position: fixed;
left: 0;
top: 0;
}
15 上下固定，中间滚动布局如何实现
方案一：
html, body {
height: 100%;
}
.top, .bottom {
height: 100px;
}
.center {
height: calc(100% - 200px);
overflow: auto;
}
方案二：flex布局
html, body {
padding: 0;
margin: 0;
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.top, .bottom {
height: 100px;
background-color: red;
}
.center {
background-color: blue;
flex: 1;
overflow: auto;
}
16 css实现border渐变
.box{
width: 100px;
height: 100px;
border:10px solid #ddd;
border-image: -webkit-linear-gradient(#ddd,#000) 30 30;
border-image: -moz-linear-gradient(#ddd,#000) 30 30;
border-image: linear-gradient(#ddd,#000) 30 30;
}
17 纯css实现一个高宽比为1：3的盒子 列举几种方式
方法1：使用一个隐藏的图片
//div容器如果不给定高度，它的高度会随着容器内部的元素变化而撑大 //找一张宽高为1:3的图片，给图片设置宽度100%；高度auto，不管我们的父容器如何变化，内部的img宽度都是100%，图片是会严格按照比例i自动缩放的，相应的，我们内部的子容器的盖度也就会按照比例缩放了
//如果你觉得增加img标签多发了http请求，也可以采用base64图片编码帮你解决这个问题，适合不太大的图片，这样可以省掉http请求。
.container{ width: 100% } img{ width: 100%; height: auto; } <div class='container'> <img src="1.png" alt="" /> </div>
方法2: 使用vmin单位
这个单位也是css3的新单位，我们将父容器的高度和宽度定义为1:3的vmin，这样父容器的高度和宽度就是1:3，这个时候，子容器的宽高值设为百分比，不管父容器大小如何变，子容器的高度和宽度比都是不会变的。
单位说明:
vw: 相对于视窗的宽度
vh: 相对于视窗的高度
vmin: 相对于视口的宽度或高度中较小的那个被均分为100单位的vmin
vmax: 相对于视口的宽度或高度中较大的那个被均分为100单位的vmax
#container{ width: 300vmin; height: 100vmin; }
.attr { width: 100%; height: 100%; background-color: red;}
方法3：使用cale计算
cale()是css3的新特性，它的值可以是一个表达式，这里我们关心的是：calc中的百分比也是按照父容器的百分比算的
.attr{ width:100%; height: calc(30%);}
方法4：padding-bottom边距实现
这里方法非常巧妙，由于padding-bottom的属性值百分比是按照父容器的宽度来计算的，所以这里我们设置容器宽度为父容器的100%；padding-bottom也为30%；
.attr { width: 100%; height: 0; padding-bottom: 30%; }
18 css实现一个旋转的圆
<div id=”pointer” ></div>
#{
height:100px;
width:100px;
border-radius: 50%; //圆角设成一半，就变成圆形了
display:inline-block;
background:url("img/pointer.jpg"); //用背景图片来代替img标记
}
#pointer{
animation: rotate 60s linear 0s infinite normal; //添加animation属性，设置动画的一些属性
}
@keyframes rotate{//由@keyframes来实现动画效果
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
19 BFC、IFC、FFC
BFC布局将自己与外部隔离开，内外部的布局不会相互影响。 如何触发BFC? 1、float不为none 2、overflow不为visible 3、display的值为table-cell、tabble-caption、inline-block、flex 4、position值为fixed/absolute IFC：行内元素参与的布局。 FFC:自适应的渲染规则，比如display：flex。
20 css3有哪些新特性
1.CSS3的选择器
1）E:last-child 匹配父元素的最后一个子元素E。
2）E:nth-child(n)匹配父元素的第n个子元素E。
3）E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。
2. 圆角
border-radius: 15px;
3.阴影（Shadow）
.class1{
text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5);
}
4.CSS3 的渐变效果
linear 表示线性渐变，从左到右，由蓝色（#2A8BBE）到红色（#FE280E）的渐变。
background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));
5.Transition 对象变换时的过渡效果
- transition-property 对象参与过渡的属性
- transition-duration 过渡的持续时间
- transition-timing-function 过渡的类型
- transition-delay 延迟过渡的时间
transition:border-color .5s ease-in .1s, background-color .5s ease-in .1s, color .5s ease-in .1s;
21 CSS3新增伪类有哪些？
p:last-of-type 选择其父元素的最后的一个P元素
p:last-child 选择其父元素的最后子元素(一定是P才行)
p:first-of-type 选择其父元素的首个P元素
p:first-child 选择其父元素的首个p元素(一定是p才行)
p:only-child 选择其父元素的只有一个元素(而且这个元素只能是p元素，不能有其他元素)
p:only-of-type 选择其父元素的只有一个p元素(不能有第二个P元素，其他元素可以有)
选第N个
p:nth-child(n) 选择其父元素的第N个 刚好是p的元素
p:nth-last-child(n) 从最后一个子元素开始计数
p:nth-of-type(n) 选择其父元素的n个元素
p:nth-last-of-type(n) 从最后一个子元素开始计数
22 介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？
标准css盒子模型：
盒子大小 = content + border + padding + margin
盒子的宽 = content的宽
盒子的高 = content的高
低版本IE的盒子模型（怪异盒子模型）：
盒子大小 = (content + border + padding) + margin
盒子的宽 = content的宽 + 左右border + 左右padding
盒子的高 = content的高 + 上下border + 左右padding
23 display:inline-block 什么时候不会显示间隙？
元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为8px。
解决的方案：
父元素设置font-size:0;子元素单独设置font-size。
24 行内元素float:left后是否变为块级元素？
是的，对行内元素设置float:left后, 对行内元素设置width，height起作用
25 在网页中的应该使用奇数还是偶数的字体？为什么呢？
偶数的字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。
26 ::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用
单冒号 ：伪类。:hover, :active
双冒号：伪元素。
- 伪元素在CSS1中已存在，当时语法是用 : 表示，如 :before 和 :after
- 在CSS3中修订，伪元素用 :: 表示，如 ::before 和 ::after，以此区分伪元素和伪类
::before 是 CSS3 中写伪元素的新语法； :after 是 CSS1 中存在的、兼容IE的老语法
27 如果需要手动写动画，你认为最小时间间隔是多久，为什么？
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。
28 base64的原理及优缺点
1. 优点
（1）base64格式的图片是文本格式，占用内存小，转换后的大小比例大概为1/3，降低了资源服务器的消耗；
（2）网页中使用base64格式的图片时，不用再请求服务器调用图片资源，减少了服务器访问次数。
2. 缺点
（1）base64格式的文本内容较多，存储在数据库中增大了数据库服务器的压力；
（2）网页加载图片虽然不用访问服务器了，但因为base64格式的内容太多，所以加载网页的速度会降低，可能会影响用户的体验。
（3）base64无法缓存，要缓存只能缓存包含base64的文件，比如js或者css，这比直接缓存图片要差很多，而且一般HTML改动比较频繁，所以等同于得不到缓存效益。
<img src="data:image/jpeg;base64,/9j/4AAQS……"/>
因为base64的使用缺点，所以一般图片小于10kb的时候，我们才会选择使用base64图片，比如一些表情图片，太大的图片转换成base64得不偿失。当然，极端情况极端考虑。
30 流体布局、圣杯布局、双飞翼布局
都是为了实现一个：两侧宽度固定，中间宽度自适应的三栏布局
流体布局：
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
.left {
float: left;
width: 100px;
height: 200px;
background: red;
}
.right {
float: right;
width: 200px;
height: 200px;
background: blue;
}
.main {
margin-left: 120px;
margin-right: 220px;
height: 200px;
background: green;
}
圣杯布局和双飞翼布局，虽然两者的实现方法略有差异，不过都遵循了以下要点：
- 两侧宽度固定，中间宽度自适应
- 中间部分在DOM结构上优先，以便先行渲染
- 允许三列中的任意一列成为最高列
- 只需要使用一个额外的
<div>标签
圣杯布局：
<div id="container"> <div id="center" class="column"></div> <div id="left" class="column"></div> <div id="right" class="column"></div> </div> <div id="footer"></div>
注意：主体部分是由container包裹的center,left,right三列，其中center定义在最前面。
body {
min-width: 550px;
}
#container {
padding-left: 200px;
padding-right: 150px;
}
#container .column {
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px;
margin-left: -100%;
position: relative;
right: 200px;
}
#right {
width: 150px;
margin-right: -150px;
}
#footer {
clear: both;
}
注意：页面的最小宽度：要想保证该布局效果正常显示，由于两侧都具有固定的宽度，所以需要给定页面一个最小的宽度，但这并不只是简单的200+150=350px。回想之前left使用了position: relative，所以就意味着在center开始的区域，还存在着一个left的宽度。所以页面的最小宽度应该设置为200+150+200=550px
双飞翼布局：
<div id="container" class="column">
<div id="center"></div>
</div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
<div id="footer"></div>
注意：双飞翼布局的DOM结构与圣杯布局的区别是用container仅包裹住center，另外将.column类从center移至container上。
body {
min-width: 500px;
}
#container {
width: 100%;
}
.column {
float: left;
}
#center {
margin-left: 200px;
margin-right: 150px;
}
#left {
width: 200px;
margin-left: -100%;
}
#right {
width: 150px;
margin-left: -150px;
}
#footer {
clear: both;
}
通过对圣杯布局和双飞翼布局的介绍可以看出，圣杯布局在DOM结构上显得更加直观和自然，且在日常开发过程中，更容易形成这样的DOM结构（通常<aside>和<article>/<section>一起被嵌套在<main>中）；而双飞翼布局在实现上由于不需要使用定位，所以更加简洁，且允许的页面最小宽度通常比圣杯布局更小。
其实通过思考不难发现，两者在代码实现上都额外引入了一个<div>标签，其目的都是为了既能保证中间栏产生浮动（浮动后还必须显式设置宽度），又能限制自身宽度为两侧栏留出空间。
从这个角度出发，如果去掉额外添加的<div>标签，能否完成相同的布局呢？答案是肯定的，不过这需要在兼容性上做出牺牲，即流体布局。
使用flex：
<div id="container"> <div id="center"></div> <div id="left"></div> <div id="right"></div> </div>
#container {
display: flex;
}
#center {
flex: 1;
}
#left {
flex: 0 0 200px;
order: -1;
}
#right {
flex: 0 0 150px;
}
具体可参考：https://www.jianshu.com/p/81ef7e7094e8
31 stylus/sass/less区别
均具有“变量”、“混合”、“嵌套”、“继承”、“颜⾊混合”五⼤基本特性
Scss 和 less 语法较为严谨， less要求⼀定要使⽤⼤括号“{}”， Scss 和 Stylus 可以通过缩进表示层次与嵌套关系
Scss ⽆全局变量的概念， less和 Stylus 有类似于其它语⾔的作⽤域概念
Sass 是基于 Ruby 语⾔的，⽽ less和 Stylus 可以基于 NodeJS NPM 下载相应库后 进⾏编译；
32 postcss的作用
css预处理器Sass，增加了变量，嵌套，混合，逻辑处理等功能，让代码复用性更强。Css 预处理器的代码是无法直接运行于浏览器的，我们还需要进行编译解析成为 Css 文件。这个过程中，我们就可以添加很多的构建环节，比如代码的检查，压缩，排序等等。
于是诞生了 Css 后处理器--- Postcss
Postcss 是一个使用js插件来转换样式的工具，Postcss 的插件会检查你的css。
其中最常用的插件莫过于 autoprefixer 这个插件了，这个插件会添加 vendor 浏览器的前缀，让我们不需要为了兼容而不断的写-webkit-这样无聊的代码，丢掉了历史包袱。
我们在构建项目的时候，通过webpack会把css文件的内容传送给postcss-loader， postcss-loader会解析postcss.config中的插件，传输给 Postcss，Postcss 会解析传入的css，将其转换为一个AST，然后通过各种不同的插件来对这个AST进行操作，最终序列化新的 css，最后将结果返回到 postcss-loader，进行 webpack 下一个 loader 的操作。
postcss.config.js：
module.exports = {
plugins: [
require('autoprefixer')
]
}
webpack.config.js:
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
entry: './src/js/index.js',
output: {
filename:'bundle.js',
path:path.resolve(__dirname,'dist')
},
module: {
rules:[
{
test: /\.css$/,
use:
[{
loader: MiniCssExtractPlugin.loader
},
'css-loader', 'postcss-loader' ]
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'main.css'
})
]
}
总结一下，Postcss 不是css预处理器的替代品，虽然可以替代。 其次，Postcss 是一个插件工具，丰富的插件生态意味着能够覆盖绝大多数的场景和业务。 最后，Postcss 优化了整个web开发流程，丢掉了历史包袱，强化了css的健壮性。
标签：flex,面试题,--,元素,width,宽度,border,CSS,left 来源： https://www.cnblogs.com/Super-scarlett/p/15856611.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。