(必考)说说盒模型。

HTML文档中的每个元素在渲染的时候都会被描绘成一个矩形盒子,而盒模型(box model)正是用来表示每个元素盒子所占用空间大小的模型。

一个盒模型由 content,padding,border 和 margin 组成。

可以使用 box-sizing 来决定元素宽度和高度的计算方式。

box-sizing 属性有两个常用的取值 content-box 和 border-box。

content-box: 宽度和高度是 content 的宽度和高度。

border-box: 宽度和高度是 content,padding,border 相加的宽度和高度。

css reset 和 normalize.css 有什么区别?

HTML标签在浏览器中都有默认的样式,不同的浏览器的默认样式之间存在差别。

CSS reset 会抛弃默认样式。

Normalize.css 是一种 CSS reset 的替代方案,在 HTML 元素的默认样式中提供更好的跨浏览器一致性。它保留有用的默认值。

(必考)如何居中?

水平居中:

内联:爸爸身上写 text-align: center;

块级:margin-left: auto; margin-right: auto;

垂直居中:

如果 .parent 的 height 不写,你只需要 padding: 10px 0; 就能将 .child 垂直居中;

如果 .parent 的 height 写死了,就很难把 .child 居中,以下是垂直居中的方法。

忠告:能不写 height 就千万别写 height。

https://github.com/mokunshao/vertical-centering

  1. table 自带功能

  2. padding 实现居中

  3. 100% 高度的 afrer before 加上 inline block

  4. div 装成 table

  5. margin-top -50%

  6. translate -50%

  7. absolute margin auto

  8. flex

选择器优先级如何确定?

选择器越具体,优先级越高。例如 #xxx 大于 .yyy

同样优先级,写在后面的覆盖前面的。

给元素添加的内联样式会覆盖外部样式表的任何样式。

!important 优先级最高。

以下选择器的优先级是递增的:

  1. 元素,伪元素

  2. 类,伪类,属性

  3. ID

BFC 是什么?

举例:

overflow: hidden; 清除浮动。(方方总是用 .clearfix 清除浮动,坚决不用 overflow: hidden; 清除浮动)

overflow: hidden; 取消父子 margin 合并。(方方用 padding-top: 1px;

如何清除浮动?

方法一:

overflow: hidden; (方方反对)

overflow: auto;

方法二:

.clearfix 清除浮动写在爸爸身上。

.clearfix::after{
    content: ''; 
    display: block; 
    clear: both;
}
.clearfix{
    content: ''; 
    display: block; 
    clear: both;
    zoom: 1; /* IE 兼容 */
}

方法三:

在父元素上加上 display: flow-root;