1. 用纯CSS创建一个三角形的原理是什么
1. 写一个我们最熟悉的 border应用 [更多资料加V：2417268862（免费)]
之前写三角形, 都是直接记住代码,没有探究原因,我也是直到有一次面试时,面试大哥让我说说css创建三角形的原理,我就......回来就赶紧翻资料.接下来我就将当时我理解的过程列举出来:
.box{
width:100px;
height:100px;
border:3px solid;
border-color:#1b93fb #1bfb24 #efad48 #ef4848;
}
效果如下：
2. 接下来,我们将border值增大
.box{
width:100px;
height:100px;
border:50px solid;
border-color:#1b93fb #1bfb24 #efad48 #ef4848;
}
效果如下：
3. 在增大border的基础下, 此时我们将盒子宽高变成0,会产生什么效果呢!
.box{
width:0px;
height:0px;
border:50px solid;
border-color:#1b93fb #1bfb24 #efad48 #ef4848;
}
效果如下：
4. 设置透明, 隐藏其中三个三角形（时间紧迫，有些符号没加上，见谅）
.box{
width:0px;
height:0px;
border:50px solid;
border-color:transparent transparent transparent #ef4848;
}
.box{
width:0px;
height:0px;
border:50px solid transparent;
border-left:50px solid #ef4848;
}
这样给面试你的人讲,讲明白应该不是问题., 重点就是要理解border的应用
2. 实现三栏布局有哪些方法, 分别描述一下
三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在开发十分常见，那么什么是三栏布局？即左右模块固定宽度，中间模块随浏览器变化自适应，想要完成的最终效果如下图所示：
下面列出四种实现方式, 在开发中可以根据实际需求选择适合自己的方法进行编码:
Flex 布局
.container{
display:flex;
justify-content: center;
height:200px;
background: #eee;
}
.left {
width:200px;
background-color: red;
height:100%;
}
.main {
background-color: yellow;
flex:1;
}
.right {
width:200px;
background-color: green;
}
</style>
<div class=container>
<div class=left></div>
<div class=main></div>
<div class=right></div>
</div>
简单实用，现在比较流行的方案，但是需要考虑浏览器的兼容性。
绝对定位布局
<style>
.container {
position: relative;
background:#eee;
height:200px;
}
.main {
height:200px;
margin:0120px;
background-color: yellow;
}
.left {
position: absolute;
width:100px;
height:200px;
left:0;
top:0;
background-color: red;
}
.right {
position: absolute;
width:100px;
height:200px;
background-color: green;
right:0;
top:0;
}
</style>
</div>
这种方案也简单实用, 并且可以将 <div class="main"></div>元素放到第一位,使得主要内容优先加载!
双飞翼布局
<style>
.content {
float: left;
width:100%;
}
.main {
height:200px;
margin-left:110px;
margin-right:220px;
background-color: yellow;
}
.left {
float: left;
height:200px;
width:100px;
margin-left:-100%;
background-color: red;
}
.right {
width:200px;
height:200px;
float: right;
margin-left:-200px;
background-color: green;
}
</style>
<div class=container>
<div class=left></div>
<div class=main></div>
<div class=right></div>
</div>
圣杯布局
<style>
.container {
margin-left:120px;
margin-right:220px;
}
.main {
float: left;
width:100%;
height:300px;
background-color: yellow;
}
.left {
float: left;
width:100px;
height:300px;
margin-left:-100%;
position: relative;
left:-120px;
background-color: blue;
}
.right {
float: left;
width:200px;
height:300px;
margin-left:-200px;
position: relative;
right:-220px;
background-color: green;
}
</style>
<div class=container>
<div class=left></div>
<div class=main></div>
<div class=right></div>
</div>
圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。
3. css3实现0.5px的细线
<style>
.line {
position: relative;
}
.line:after {
content:"";
position: absolute;
left:0;
top:0;
width:100%;
height:1px;
background-color: #000000;
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
}
</style>
<div class=line></div>
4. 开发中为什么要初始化css样式
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
5. CSS优化、提高性能的方法有哪些
尽量将样式写在单独的css文件里面，在head元素中引用 将代码写成单独的css文件有几点好处：
1. 内容和样式分离，易于管理和维护
2. 减少页面体积
3. css文件可以被缓存、重用，维护成本降低
不使用@import
避免使用复杂的选择器，层级越少越好 建议选择器的嵌套最好不要超过三层，比如：
精简页面的样式文件，去掉不用的样式
利用CSS继承减少代码量
避免！important，可以选择其他选择器
