前端面试之CSS篇整理

盒模型，box-sizing

盒模型组成：content+padding+border+margin ;
在标准盒模型中，css中给元素设置的width和height就是content宽高
在怪异盒模型下:css中给元素设置的width和height=content宽/高+padding+border

box-sizing可以决定盒模型

属性值	盒模型
box-sizing:content	W3C
box-sizing: border-box;	怪异

CSS3新特性，伪类，伪元素，锚伪类

1. 伪类和伪元素的区别：
   两者的区别在于，有没有生成抽象的元素；

2. 伪类的例子–锚伪类，即a标签的伪类，来表达它的不同的状态，并没有生成什么元素

   a:link 表示未访问的链接

   a:visited 表示已访问的链接

   a:hover 鼠标移动到链接上的情况

   a:active 表示选定的链接

3. 伪元素的例子：会生成虚拟的元素，并能给这个元素设置内容和样式
   :first-line :first-letter :after :before

css隐藏一个元素的方法

将 opacity 设为 0、将 visibility 设为 hidden、将 display 设为 none 或者将 position 设为 absolute 然后将位置设到不可见区域；或者宽高设为0等等很多方法

如何实现水平垂直居中

    1.使用定位
    ```
    .parent{
        position:relative;
    }
    .child{
        position:absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 50%;
        transform: translateX(-50%);
    }

    ```

 2. 使用css3的flex


```
.parent{
    display:flex;
    justify-content:center;
    align-items:center;

}
```

3. 将子元素转为'inline-block',利用父元素可以设置行内元素水品那个居中的'text-align:center'来进行水平居中；在html中再创造出一个与子元素同级的行内元素，利用'vertical-align:center'进行垂直居中

    html:


```

        
        
hello

```
css

```
.parent{
          width: 300px;
          height: 400px;
          text-align: center;
          border: 1px solid #000;
        }
        .child{
          display: inline-block;
          vertical-align: middle;
        }
        .parent span{
          width: 0;
          height: 100%;
          vertical-align: middle;
          display: inline-block;
        }
```

说说position，display

display属性值：none、inline、block、inline-block
position属性的值：static、relative、absolute、fixed

浮动元素引起的问题和解决办法？绝对定位和相对定位，元素浮动后的display值

浮动元素引起的问题：由于元素浮动后脱离了文档流，会造成父元素的塌陷，也会影响该元素后面元素的结构位置

如何解决?只要触发了BFC，制造出隔离的空间，就能解决浮动造成的影响
详情请看我的这篇博文
浅谈BFC—CSS的低调大佬

元素浮动后，就算他是内联元素，实质上的他的dispaly性质已经办成block了，就是像块级元素一样能设置宽高等属性

相对定位：将一个元素从它在普通流所处的位置上进行移动，并且这种移动不会影响周围元素的位置，它们还是处于在普通流中所处的位置。

绝对定位：position: absolute；脱离了普通流，也就是说不会影响到周围任何元素的位置（就像是直接忽略掉它所占据的空间）。使用绝对定位的元素的位置相对于最近的已定位的祖先元素，如果没有已定位的祖先元素，那么它的位置相对于最初的包含块。

link和@import引入css的区别

除了写法上面的区别之外，最大的区别在于link会和dom结构一同加载渲染，而@import只能能dom结构加载完成以后才能渲染页面

解释一下css3的flexbox，以及适用场景

该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。这种布局方式在条目尺寸未知或动态时也能工作。

比如元素居中，仅需要在父级元素css中声明display:flex;justify-content:center;align-items:center;即可

实现项与项之间的均匀分布：

.flex-container { display: flex; justify-content: space-around; }

等等

grid布局

假如有这样的页面布局：两边固定宽度，中间自适应的三栏式布局，
使用grid布局就能很方便的实现了

.parent {
        width: 100%;
        display: grid;
        grid-template-rows: 200px;    /*行的高度*/
        grid-template-columns: 300px  auto 300px;   /*列的宽度*/
    }

因为存在兼容性问题 chrome都要57以上的才支持，所以并没有常用

实现两栏布局有哪些方法？

1.利用float和margin结合：
2.使用grid布局
3.利用 position:absolute 配合 margin 实现
4.利用 display: flex 实现

css dpi

dpi:就是每英寸的像素数

你知道attribute和property的区别么

property 和 attribute中文翻译意思非常相近，
但是property是DOM中的属性，是JavaScript里的对象；在面向对象的思想中，封装的类中用来表示对象状态的成员就是property；

attribute是HTML标签上的特性，在标签语言面向对象编程时候，他的对象状态成员property,=被包装成为attribute，但并不是所有attribute都是property。
例如checkbox的checked的状态，在标签内它的状态值可以决定选中的状态；而在js中的checked可作为property对象，用true或false来决定状态

流式布局如何实现，响应式布局如何实现

流式布局：按照百分比来适配浏览器网页，有很大的缺陷：不同的屏幕下面，元素宽高是不一样的，但是问题、图片依旧是以px为单位不会变的，看起来会有不协调的情况
响应式布局：根据css3的媒体查询技术，media query 是响应式设计的核心，他能和浏览器进行提前的沟通，给到浏览器适合的布局

移动端布局方案

使用用rem布局.：rem是css的单位，是根据根元素即html元素的的字体的font-size的值来等比计算的。

padding百分比是相对于父级宽度还是自身的宽度

margin,padding的百分比是相对与父元素的宽度来进行计算