前端面试题答案整理之CSS

• 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？

  css盒子模型由4部分构成，margin、border、padding、content。标准盒子模型和IE盒子模型的主要区别是在于width的计算，标准盒子模型中，width = content的宽度，IE盒子模型中width包括content、padding、border。

• CSS选择符有哪些？哪些属性可以继承？
  ID选择器、类选择器、标签选择器、属性选择器、后代选择器等。优先级：ID > 类 = 伪类 = 属性 > 元素 = 伪元素。内联样式优先级比ID高，！important优先级最高。
  可继承的属性：visibility. cursor
• CSS3新增伪类有那些？
  之前整理过h5、css3新增的一些属性。
• 如何居中div？如何居中div中的内容？
  居中div

//适用于宽高已知的元素。
.item{
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}
<div class="item"></div>

//利用flex布局，不限制宽高
.parent{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 500px;
    width: 500px;
    background:red;
}
.item{
    width: 100px;
    height: 100px;
    border: 1px solid #000;
}
<div class="parent">
    <div class="item"></div>
</div>

//
.item{
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}
<div class="item"></div>

居中div中的内容

//缺点是如果div宽度设置不够，内容会自动换行超出容器。只有当div的宽度足够容纳文字时，才会达到想要的效果，适用于单行文字居中。
.item{
    width: 200px;
    height: 100px;
    border: 1px solid #000;
    line-height: 100px; //行高与div等高，实现垂直居中
    text-align: center; //实现水平居中
}
<div class="item">垂直水平我都居中了。</div>

//利用table布局。适用于多行居中。
.parent{
    display: table;
}
.item{
    display: table-cell;
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    text-align: center;
    vertical-align: middle;
}
<div class="parent">
    <div class="item">垂直水平我都居中了。</div>
 </div>

• 用纯CSS创建一个三角形的原理是什么？
• 满屏 品 字布局 ?非满屏品字布局？三列布局，左右定宽，中间自适应？

<div class="content">

    <div class="top">p1</div>

    <div class="left">p2</div>

    <div class="right">p3</div>

</div>
//满屏品字布局
*{
    margin: 0;
    padding: 0;
}
.top{
    width: 100%;
    height: 100px;
    background: pink;
}
.left,.right{
    float: left;
    width: 50%;
    height: 100px;
    background: yellow;
}
.right{
    background:blue;
}
 //非满屏品字布局
 *{
    margin: 0;
    padding: 0;
}
.top{
    width: 100px;
    height: 100px;
    margin: 0 auto;
    background: pink;
}
.left,.right{
    float: left;
    width: 100px;
    height: 100px;
}
.left{
    margin-left: 50%;
    background:red;
}
.right{
    background:blue;
    margin-left: -200px;
}
//三列布局，左右定宽中间自适应。本文采用的方法注意center放在最后面一个div
<div class="content">
    <div class="left">p1</div>
    <div class="right">p3</div>
    <div class="center">p2</div>
</div>
*{
    margin: 0;
    padding: 0;
}

.center{
    width: auto;
    background:pink;
    height: 100%;
    margin-left: 150px;
    margin-right: 200px;
}
.left{
    background: #E79F6D;
    width:150px;
    float:left;
}
.right{
    background: #77BBDD;
    width:200px;
    float:right;
}

//三列布局，利用flex布局
<div class="content">
    <div class="left">p1</div>
    <div class="center">p2</div>
    <div class="right">p3</div> 
</div>
*{
     margin: 0;
     padding: 0;
     height: 100%
 }
 .content{
  display: flex;
}
.left,.right{
  width: 120px;
  height: 100%;
  background: green;
}
.center{
  height: 100%;
  background: pink;
  width: 100%;
}

• 常见兼容性问题？

  1.不同浏览器的标签默认的margin和padding不同：*{margin：0；padding：0}
  2.块级元素float后，又存在margin-left/right时，IE6中显示margin比设置的大：只要在float的标签样式中加入 display:inline;将其转化为行内属性即可
  3.设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度：设置overflow：hidden或者是将line-height设置为更小的高度。
  4.图片默认有间距：使用float属性为img布局。

• li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

  li标签之间的空白间隔是由于换行符导致的。所以最简单的办法是写li标签的时候不换行，但是不美观。

• CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？
  当在表格元素中使用时，设置visibility：collapse可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 “hidden”。

• position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？
  1.首先看display、position、float之间的关系。
  display：none，则positon/float不起作用。
  display不为none，看position是否是absolute/fixed，如果是的话，float不起作用，display按照block/table展示；如果不是的话，再看float的值，如果float为none，display同设置值。如果float不是none或者元素为根元素的时候，调整diaplay的值。
  2.再看margin-collapse：两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠。浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠
• 对BFC规范(块级格式化上下文：block formatting context)的理解？
  * BFC主要有这样3个特性：*
  1.属于不同BFC的元素不会发生margin-collapse
  2.BFC相当于一个隔离的盒子，不影响外部元素的布局，外部元素也不会影响内部盒子的布局。
  3.块级格式化上下文不会重叠浮动元素，
  触发BFC的条件：
  1.float不为none
  2.position为absolute/fixed的元素
  3.display为table/table-cell/table-caption/inline-block
  4.overflow不为visible
• 清除浮动的方式
  1.在浮动元素末尾添加一个空的标签，设置 clear:both
  2.父元素设置overflow：hidden/auto
  3.利用after伪元素：这里我们使用::after。添加一个类clear，在需要清除浮动时，只需要给父元素追加clear类即可

.clear::after { 
     content:""; 
     display:table; 
     clear:both;
}

• ::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。
  双冒号表示伪元素，单冒号表示伪类。
  ：:before将会在内容之前“添加”一个元素，而:：after将会在内容后“添加”一个元素。在它们之中添加内容我们可以使用content属性

• 如果需要手动写动画，你认为最小时间间隔是多久，为什么？
  **多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms
  **

• 有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。

<div class="content">
    <div class="top"></div>
    <div class="bottom"></div>
</div>
//绝对布局
*{
    margin: 0;
    padding: 0;
}
.content{
    width: auto;
    height: 200px;//演示方便，所以设置了一个高度
    border: 5px solid #000;
    position: relative;
}
.top{
    height: 100px;
    background: red;
}
.bottom{
    position: absolute;
    top: 100px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    background: green;
}
//flex
    .content{
        display: flex;
        flex-flow: column wrap;
        border: 1px solid blue;
      }
      .top{
        height: 100px;
        background: red;
      }
      .bottom{
        background: green;
      }

• 什么是Cookie 隔离？（或者说：请求资源的时候不要让它带cookie怎么做）
  因为cookie有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据
• style标签写在body后与body前有什么区别？
  写在body后面会重新渲染