关于javascript:css面试题

盒模型

常见的盒模型有w3c盒模型（又名规范盒模型）box-sizing:content-box和IE盒模型（又名怪异盒模型）box-sizing:border-box。
规范盒子模型：宽度=内容的宽度（content）+ border + padding + margin
低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin

css3 新个性

常问：

word-wrap 文字换行
text-overflow 超过指定容器的边界时如何显示
text-decoration 文字渲染
text-shadow文字暗影
gradient突变成果
transition过渡成果 transition-duration：过渡的持续时间
transform拉伸，压缩，旋转，偏移等变换
animation动画
audio音频
vadio视频
RGBA和透明度

css3 边框

border-radius 圆角
box-shadow 盒子暗影
border-image 边框图片

css3 背景

background-image 背景图片
background-size 背景大小
background-origin 背景图像的地位区域
background-clip 背景剪裁属性是从指定地位开始绘制

css选择器及优先级

!important
内联款式
ID选择器
类选择器属性选择器伪类选择器
元素选择器关系选择器伪元素选择器
通配选择器
1，class选择符：10，id选择符：100，内联款式权值最大，为1000

!important申明的款式优先级最高，如果抵触再进行计算。
如果优先级雷同，则抉择最初呈现的款式。
继承失去的款式的优先级最低。
CSS选择器有哪些？哪些属性能够继承？

id选择器(#myid)、
类选择器(.myclassname)、
标签选择器(div, h1, p)、
相邻选择器(h1 + p)
子选择器（ul > li）、
后辈选择器（li a）、
通配符选择器（*）、
属性选择器（a[rel=”external”]）、
伪类选择器（a:hover, li:nth-child）

可继承的属性：

font-size,
font-family,
color

不可继承的款式：

border,
padding,
margin,
width,
height

BFC

BFC是块级格式化上下文。

计算BFC高度时，浮动元素也会参加计算、
在BFC这个元素垂直方向的边距会产生重叠
BFC的区域不会与浮动元素的box重叠
BFC在页面上是一个独立的容器，其里外的元素不会相互影响
BFC利用:
避免margin重叠
革除外部浮动
自适应两栏布局
避免字体盘绕

BFC的生成条件：

根元素
float值不为none
overflow的值不为visible
display的值为inline-block,table-cell,table-caption
position的值为absolute，fixed

弹性盒

display:flex;align-items:center;justify-conter:center;

图片整合技术的劣势

缩小对服务器的申请次数
缩小图片体积，进步加载速度
元素垂直程度居中
不须要晓得宽和高

position：absolute；top:0；left:0；right:0；bottom:0;margin:auto;

须要晓得宽和高

position:absolute;top:50%;left:50%;margin-top:+/-50%(本身高度的50%)；margin-left:+/-50%;

元素程度居中

margin:0 auto;

css定位形式

position：static;//默认定位position：relative;//绝对定位 （参照物是本身,不脱离文档流）position:absolute;//相对定位 （参照物是父元素，遵循就近准则，寻找父元素及其爷爷元素中设置 position:relative 属性进行定位，脱离文档流；如果都不设置定位属性，就以根元素<html>进行定位。）position:fixed;//固定定位 （参照物是可视区窗口，脱离文档流）绝对于浏览器窗口进行定位。position:sticky;//

display：none和visibility：hidden区别？

display：none指的是元素齐全不排列进去，不占据空间，波及到了DOM构造，故产生重排和重绘
visibility：hidden指的是元素不可见但存在，保留空间，不影响构造，故只产生重绘，但不可触发绑定事件

rem和em的区别

总而言之，就是浏览器把谁转化成“px”
rem 根据的是html的font-size值。1rem=16px
em 根据的是父元素的font-size值。

革除浮动

办法一:clear:both

clear:both;

办法二:万能革除浮动

    .clean{        content:'.';        height:0;        display:block;        clear:both;        overflow:hiddden;        visibility:hidden;    }

display 有哪些值？阐明他们的作用?

inline默认。此元素会被显示为内联元素，元素前后没有换行符。

block此元素将显示为块级元素，此元素前后会带有换行符。

none此元素不会被显示（暗藏）。

inline-block行内块元素。（CSS2.1 新增的值）

list-item此元素会作为列表显示。

table此元素会作为块级表格来显示（相似table），表格前后带有换行符

为什么要初始化 CSS 款式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会呈现浏览器之间的页面显示差别。

浏览器内核

Trident IE浏览器
Gecko Firefox浏览器
Webkit Chrome Safari
Blink Chrome Opera

挪动端1像素问题

一般来说，在pc端浏览器中，设施像素比dpr等于1,1个css像素就等于1个物理像素；然而在retina屏幕中，dpr广泛是2或者3 ，1个css像素不在等于一个物理像素，因而在理论设计稿中粗不少。

伪元素+scale

.box{    width:100%;    height:1px;    margin:20px 0;    position:relative;}.box::after{    content:'';    position:absolute;    bottom:0;    width:100%;    height:1px;    transform:scaleY(0.5);    transform-origin:0 0;    background:red;}<div class="box"><div>

border-image

div{    border-width:1px 0px;    -webkit-border-image:url(xxx.png) 2 0 stretch;    border-image:url(xxx.png) 2 0 stretch;}

做挪动端开发有没有遇到不兼容的问题?如何解决？(https://yq.aliyun.com/articles/587092)

1.应用背景图来代替img标签

   background:url(../images/icon/all.png) no-repeat center center;   -webkit-background-size:50px 50px;   background-size: 50px 50px;   display:inline-block;    width:100%;    height:50px

避免手机中网页放大和放大
设置meta标签中的viewport;

 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

浮动子元素撑开父元素盒子高度
解决办法如下：
1.父元素设置为 overflow: hidden;
2.父元素设置为 display: inline-block;等
如何解决挪动端滚动条卡顿问题？
安卓或者ios
-webkit-overflow-scrolling: auto; / 当手指从触摸屏上移开，滚动会立刻进行 */
-webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开，会放弃一段时间的滚动，持续滚动的速度和继续的工夫和滚动手势的强烈水平成正比。同时也会创立一个新的堆栈上下文。

link 与 @import 的区别

a.从属关系区别
@import是 CSS 提供的语法规定，只有导入样式表的作用；link是HTML提供的标签，不仅能够加载 CSS 文件，还能够定义 RSS、rel 连贯属性等
b.加载程序区别
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载结束后被加载。
c.兼容性区别
@import是 CSS2.1 才有的语法，故只可在 IE5+ 能力辨认；link标签作为 HTML 元素，不存在兼容性问题。
d.DOM可控性区别
能够通过 JS 操作 DOM ，插入link标签来扭转款式；因为DOM办法是基于文档的，无奈应用@import的形式插入款式。

常见的布局形式

圣杯布局

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;}

<div id="container">    <div id="center" class="column">center</div>    <div id="left" class="column">left</div>    <div id="right" class="column">right</div></div>

双飞翼布局

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;}

<div id="container" class="column">    <div id="center">center</div></div><div id="left" class="column">left</div><div id="right" class="column">right</div>

盒模型