标签：面试题 布局 ary 元素 设置 兼容性问题 margin left
11.如何让一个盒子水平垂直居中
1、 如何让一个盒子水平垂直居中
①定位：（常用方法,推荐）
position:absolute;
position:relative;
left:值;
top:值;
②display:table-cell;
③外边距：margin-left:值;
margin-top:值;
④margin:auto;（不兼容低版本的IE浏览器）
⑤弹性盒模型：display:flex;
justify-content:conter;
align-itens:center;
⑥用transform的属性translate平移，不仅能实现绝对居中同样的效果，也支持联合可变高度方式使用。
使用top:50%; left:50%;时，是以盒子的左上角为原点定位，是左上角的原点居中，但是元素本身并不居中。
transform：translate(-50%，-50%):分别向左向上移动自身长宽的50%，使其位于中心。
transform: translate(-50%,-50%)导致的像素模糊问题解决办法：
/** 这 0.5px加或者减都可以 */
transform: translat(calc(-50% + 0.5 px), calc(-50% + 0.5 px))；
⑦用calc计算
12.左右固定中间自适应 三栏布局（圣杯、双飞翼、弹性盒子…）
圣杯布局：
缺点：当面板的main部分比两边的子面板宽度小的时候，布局就会乱掉。
双飞翼布局:
与圣杯布局很像，也是全部往左浮动，但是在内容div里再嵌套一个div，设置子div的margin为左右div预留位置，左右div只设置margin负值即可实现。
相似点：
1.给main设置width: 100%，占满窗口，从而自适应。
2.为了形成在一行三栏布局，给三个方块都加上浮动float: left;（注意清除浮动，因为浮动会导致父元素高度塌陷）
3.利用负margin-left把三个方块拉到一行，margin-left负多少就是往左移动多少，左边需要相对父元素的-100%，移到父元素的最左边，右边只需要移动本身宽度的负值，即可在最右边。
区别：
1.双飞翼布局给主面板添加了一个父标签用来通过margin给子面板腾出空间。
2.圣杯采用的是padding，而双飞翼采用的margin，解决了圣杯布局的问题。
3.双飞翼布局不用设置相对布局，以及对应的left和right值。
flex布局
思路：顺着主轴依次放3列，内容在最前，通过order控制显示顺序，通过flex-grow让中间占据全部剩余空间，通过flex-basis设置左、右div的宽度。
缺点：兼容性。
13.静态布局、自适应布局、流式布局、响应式布局、弹性布局（rem、em）
静态布局（Static Layout）
即传统Web设计，对于PC设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；
对于移动设备，单独设计一个布局，使用不同的域名如wap.或m.。
自适应布局（Adaptive Layout）
自适应布局（Adaptive）的特点是分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生改变，但在每个布局中，页面元素不随窗口大小的调整发生变化。
你可以把自适应布局看作是静态布局的一个系列。
流式布局（Liquid Layout）
流式布局（Liquid）的特点（也叫"Fluid") 是页面元素的宽度按照屏幕进行适配调整，主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。
响应式布局（Responsive Layout）
分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。
可以把响应式布局看作是流式布局和自适应布局设计理念的融合
弹性布局（rem/em布局）
包裹文字的各元素的尺寸采用em/rem做单位，可以使包裹文字的元素随着文字的缩放而缩放；而页面的主要划分区域的尺寸仍使用百分数或px做单位。
css 中的 px 是css设置自己大小，元素长宽的单位
浏览器中em和px关系是 **16px** = **1em**
rem是根据根节点，也就是html默认字体大小来设置大小的。所以改变了html根
节点字体大小，em的默认值也会改变。向上面html设置为12px，那么**1rem=12px**了
rem不是子节点继承父节点大小，而是所有的节点都继承html节点，所有当html节点设置成10px时候，所有整个页面1rem就等于10px了
1.静态布局：
**布局特点：**宽高固定
2.自适应布局：
**布局特点：**不同分辨率下，页面元素位置变化，大小不变
**实现方法:**针对不同分辨率创建对应的样式表，使用 @media 媒体查询给不同尺寸的设备切换不同的样式
**缺点：**IE8及以下不支持媒体查询；只能兼容主流分辨率
3.流式布局（百分比布局）:
**布局特点：**不同的分辨率下显示相同的排版；高度固定，宽度自适应
**实现方法:**网页中主要区域的尺寸使用百分比；
**缺点：**大屏幕上元素被拉长，但是文字，高度还是固定大小，不协调
经典流式布局：左侧固定，右侧自适应；两侧固定，中间自适应
4.弹性布局（rem/em布局）：
**布局特点：**页面元素宽度，高度，字体大小会跟着屏幕大小缩放
**实现方法:**使用js监听当前屏幕大小，设置html的字体大小
**缺点：**IE678不兼容；需要计算；
5.响应式布局：一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本
**布局特点：**每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变，响应式设计的目标是确保一个页面在所有终端上（各种尺寸的PC、手机、手表等等）都能显示出令人满意的效果
**实现方法：**媒体查询(css3中的Media Query)+流式布局
媒介查询：通过不同的媒介类型和条件定义样式表规则，媒介查询让CSS可以更精确作用于不同的媒介类型和同一媒介的不同条件。
**优点：**适应pc和移动端
1.面对不同分辨率设备灵活性强
2.能够快捷解决多设备显示适应问题
**缺点：**要匹配足够多的屏幕大小，工作量大，设计也需要多个版本
1.会出现隐藏无用的元素
2.加载时间加长
14.说一下在IE（IE6）中常见的几个兼容性问题
一、头文档所引起的怪异盒模型问题
产生条件：不设置文档声明，页面就会陷入怪异盒模型解析模式
解决方法：加入文档声明
二、IE6下双边距BUG
产生条件：在IE6下，块元素有浮动有横向的margin，横向的margin值
会被放大成两倍浮动方向与margin方向一致时，该方向会出现双倍边距
解决方法：display:inline
三、图片间隙问题
产生条件：给父容器设置宽度后，图片会在原来基础上把父元素撑大3-5px
解决方法：1.给父元素添加font-size：0；
2.给图片添加display：block；
四、li的间距问题
产生条件：IE6浏览器 li标签设置宽高，且li里面的元素发生了浮动
解决方法：1. li不设置宽高；
2. li内部的标签不进行浮动
五、块状元素默认高度问题
产生条件：部分块状元素会有默认高度（一般为16px-18px之间）
解决方法： 1.给元素添加overflow:hidden;
2.font-size：0；
六、表单行高不一致
产生条件：一行中的文本输入框和按钮不在同一高度
解决办法：给表单元素添加float：left；并去掉默认边框border：0；
七、图片元素img下高度超出,出现多余空白
解决方法：1.设置img为display:block;
2.父级设置overflow:hidden;
八、左浮元素margin-bottom失效
解决方法：1.显示设置高度
2.父标签设置_padding-bottom代替子标签的margin-bottom
3.再放个标签让父标签浮动，子标签margin- bottom，即(margin-bottom与float不同时 作用于一个标签)
九、position下的left，bottom错位
解决方法：为父级(relative层)设置宽高或添加*zoom:1
十、子级中有设置position，则父级overflow失效
解决方法：为父级设置position:relative
十一、块元素中有文字及右浮动的行元素，行元素换行
解决方法：将行元素置于块元素内的文字前
十二、透明rgba与opacity
产生条件：IE6不支持此两种透明的设置方法
解决方法：使用IE6当中的滤镜filter替代掉，
如：opacity:0.6;filter:alpha(opacity=60)异盒模型问题
15.清空数组的方法
1.splice
var ary = [1,2,3,4];
ary.splice(0,ary.length);
console.log(ary); // 输出 []，空数组，即被清空了
2.length赋值为0
var ary = [1,2,3,4];
ary.length = 0;
console.log(ary); // 输出 []，空数组，即被清空了
3.赋值为[]
var ary = [1,2,3,4];
ary = []; // 赋值为一个空数组以达到清空原数组
标签：面试题,布局,ary,元素,设置,兼容性问题,margin,left 来源： https://blog.csdn.net/m0_51907938/article/details/111331503
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。