Liuwei

 

rem原理
rem方案的原理其实就是，将每一个不同的屏幕划分成相同的份数，让同一个元素在不同的屏幕上占据相同比例的空间。
1rem等于此页面html的font-size，rem可以理解为每份是多少px，比如说，我们的设计稿宽度为750px，我们规定将页面划分成10份，那么rem=75px
我们只需要做一件事，就是确定不同的屏幕下一份有多宽，即不同设备下1rem等于多少px

两个实际用的方法：lib-flexible，2.在postccs里使用postcss-pxtorem。
https://www.cnblogs.com/zoujiyun/p/12459951.html
那么rem计算公式为rem=width（获取的当前的屏幕的宽）/ 固定数
查询监听屏幕不同的尺寸，然后只要屏幕宽度变化，那么HTML的大小也会跟随变化

 

用纯CSS创建一个三角形的原理是什么
利用盒子的均分原理，盒子都是矩形或者正方形，从形状的中心，向4个上下左右划分4个部分。保证元素是块级元素，设置元素的边框，不需要显示的边框使用透明色transparent。
需要把元素的宽度、高度设为0。然后设置边框样式

 

CSS实现宽高等比例自适应矩形(正方形)
width: 100%; height: 0; padding-bottom: 50%;
//我们将元素的高度由padding撑开，由于padding是根据父元素宽度计算的，
//所以高度也就变成了相对父元素宽度，同时要将height设置为 0

 

实现满屏的正方形
1：width:100vw,height:100vw
2：width100vw,padding-bottom:100%;
// padding-top/bottom和margin-top/bottom都是相对于父元素的宽度来计算

 

图片比例放大缩小同比缩放
1.两个盒子，父盒子定宽高，子盒子width,height 宽高auto并设置最大宽高
2.一个盒子 background image repeat:no-repeat size:contain position:center属性设置图片，定宽高
3.一个盒子定宽高 object-fit:contain

 

水平居中
1行内元素: text-align:center
2块级元素: margin:0 auto
3绝对定位和移动: absolute + transform
4绝对定位和负边距: absolute + margin
5flex布局: flex + justify-content:center

 

垂直居中
1子元素为单行文本: line-height:height
2absolute + transform
3flex + align-items:center
4table: display:table-cell; vertical-align: middle
5利用position和top和负margin

 

什么是 BFC机制
BFC(Block Formatting Context)，块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。
触发条件 (以下任意一条)
float的值不为none
overflow的值不为visible
display的值为table-cell、tabble-caption和inline-block之一
●position的值不为static或releative中的任何一个
●在IE下, Layout,可通过zoom:1 触发
开发中的应用
阻止margin重叠
可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个 div都位于同一个 BFC 区域之中)
自适应两栏布局
可以阻止元素被浮动元素覆盖

 

什么是外边距重叠？ 重叠的结果是什么？
相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距垂直相遇时，可以结合成一个单独的外边距。
折叠结果遵循下列计算规则：
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值
两个外边距一正一负时，折叠结果是两者的相加的和
解决:
外层元素padding代替
内层元素透明边框 border:1px solid transparent;
内层元素绝对定位 postion:absolute:
外层元素 overflow:hidden;

 

请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景？
1.flex是一种弹性布局，包含flex-container和flex-item.常用的属性包括flex-direction、flex-wrap、justify-content、align-items
水平居中 justify-content:center 水平两头居中 justify-content:space-between 垂直居中 align-items:center
2.该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。
在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。

 

box-sizing:border-box;
context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽
border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽

 

position,文档流的理解
1.relative 元素的定位永远是相对于元素自身位置的，和其他元素没关系，也不会影响其他元素可通过z-index进行层次分级
2.fixed 元素的定位是相对于 window （或者 iframe）边界的，和其他元素没有关系。但是 它具有破坏性，会导致其他元素位置的变化。可通过z-index进行层次分级
3.absolute 浏览器会递归查找该元素的所有父元 素，如果找到一个设置了 position:relative/absolute/fixed 的元素，就以该元素为基准 定位，如果没找到，就以浏览器边界定位。可通过z-index进行层次分级

 

解释下什么是浮动和它的工作原理？
非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。 此时，内容会溢出到容器外面而影响布局。这种现象被称为浮动（溢出）。
工作原理：
浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象）
浮动元素碰到包含它的边框或者其他浮动元素的边框停留
浮动元素引起的问题？
父元素的高度无法被撑开，影响与父元素同级的元素
与浮动元素同级的非浮动元素会跟随其后
列举几种清除浮动的方式？
●父级div定义height
●结尾处加空div标签clear:both
●父级div定义伪类:after和zoom
●父级div定义overflow:hidden

 

width: auto 和 width: 100% 的区别
·width: 100% 会使元素box的宽度等于父元素的contentbox的宽度 ·width: auto 会时元素撑满整个父元素，margin, border, padding, content 区域会自动分配水平空间

 

页面导入样式时，使用link和@import有什么区别？
方式：link 是HTML方式， @import 是CSS方式
作用：link 属于HTML标签，除了加载CSS外，还能用于定 RSS等；@import 只能用于加载CSS
加载时间上：页面加载的时，link 会同时被加载，而 @import 引用的 CSS 会等到页面被加载完再加载
兼容：@import 只在 IE5 以上才能被识别，而 link 是HTML标签，无兼容问题

 

href和src的区别：
href标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系
src表示引用资源，表示替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分。

 

CSS优先级算法如何计算？
优先级为: !important > id > class > tag important 比 内联优先级高
行内样式 > 内部样式 > 外部样式
含外部载入样式时，后载入样式覆盖其前面的载入的样式和内部样式

 

圣杯布局的实现原理？
要求：三列布局；中间主体内容前置，且宽度自适应；两边内容定宽
好处：重要的内容放在文档流前面可以优先渲染

 

CSS 的 transition 和 animation 有何区别？
首先 transition 和 animation 都可以做动效，从语义上来理解， transition 是过渡，由 一个状态过渡到另一个状态，比如高度 100px 过渡到 200px ；而 animation 是动画，即更 专业做动效的， animation 有帧的概念，可以设置关键帧 keyframe ，一个动画可以由多个 关键帧多个状态过渡组成，另外 animation 也包含上面提到的多个属性。
animate通过@keyframes来设置动画的帧的状态，from,to 百分比。animation有几个常用属性

 

伪元素和伪类的区别和作用？
伪元素 – 在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。
它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素。例如：
p::before {content:"第一章：";}
p::after {content:"Hot!";}
p::first-line {background:red;}
p::first-letter {font-size:30px;}
伪类 – 将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。例如：
a:hover {color: #FF00FF}
p:first-child {color: red}

 

实现0.5px的细线
  transform: scaleY(.5);

 

gba() 和 opacity 的透明效果有什么不同？
opacity 作用于元素以及元素内的所有内容（包括文字）的透明度
rgba() 只作用于元素自身的颜色或其背景色，子元素不会继承透明效果

 

px和em的区别
px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px

 

左边宽度固定，右边自适应

左侧div设置成浮动：float: left，右侧div宽度会自拉升适应

对右侧:div进行绝对定位，然后再设置right=0，即可以实现宽度自适应

将左侧div进行绝对定位，然后右侧div设置margin-left: 200px

使用flex布局

 

一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度
方案1：.sub { height: calc(100%-100px); }
方案2：.container { position:relative; } .sub { position: absolute; top: 100px; bottom: 0; }
方案3：.container { display:flex; flex-direction:column; } .sub { flex:1; }

 

实现三栏布局有哪些方法,三栏布局，顾名思义就是两边固定

Flex 布局

绝对定位布局

圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。