css部分基础知识回顾（一）

css盒子模型

css和模型有两种，第一种是标准盒子模型（content-box），另一种是怪异盒子模型（IE,border-box）。标准盒子模型的盒子宽度width = contentWidth + paddingLeft + paddingRight + borderLeft + borderRgitht + marginLeft + marginRight，height = contentHeight + paddingTop + paddingBottom + borderTop + borderBottom + marginTop + marginBottom；怪异盒子模型的盒子宽度width = contentWdith + marginLeft + marginRight，height = contentHeight + marginTop + marginBottom，而其中contentWidth包含了内容宽度 + padding + border。

link标签和@import标签的区别

link：是html中的标签，跟随html的加载而加载；
@import：是css中提供的一种引入css的一种方式，最后加载，一般会等待页面加载完成后再加载；
link和@import优先级，主要看引入的位置，后边覆盖前边的。

垂直居中的方法

垂直居中的方法很多，这里例举三种常用的。

/* flex布局模式： */
.parent {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;  /* 主轴居中显示 */
  align-items: center;  /* 交叉轴居中显示 */
}

/* position + transform */
.parent {
  width: 1000px;
  height: 1000px;
  position: relative;
}
.child {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* position + margin */
.parent {
  width: 1000px;
  height: 1000px;
  position: relative;
}
.child {
  position: absolute;
  width: 100px;
  height: 100px;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

opacity=0，visibility=hidden，display:none的区别

opacity=0：在界面上不显示，但是会占住自己所在的位置，如果有点击事件，当点击该区域时也会触发事件。
visibility=hidden：在界面上不显示，但是会占住自己所在的位置，不会触发点击事件。
display:none：在界面上不显示，而且不会占位，也不会触发事件。

清除浮动

因为在使用float属性的时候，父元素不会被撑开，很容易造成样式错乱，所以很多时候都需要清除浮动，清除浮动的方法主要介绍两种常用的。

<!-- 在浮动的的元素最后添加div clear:both的方式 -->
<div class="parent">
  <div style="float:left">a</div>
  <div style="float:left">b</div>
  <div style="clear:both"></div>
</div>
<!-- 这样父级div.parent的高度就能撑开 -->
<!-- 还有另外一种写法，使用伪元素清除浮动 -->
<style>
.parent::after {
  content: "";
  clear: both;
  height: 0;
  display: block;  /*需要设置块级元素才可以*/
}
</style>
<div class="parent">
  <div style="float:left">a</div>
  <div style="float:left">b</div>
</div>

<!-- 使用BFC布局清除浮动 -->
<style>
.parent {
  overflow: hidden;
}
</style>
<div class="parent">
  <div style="float:left">a</div>
  <div style="float:left">b</div>
</div>
<!-- BFC模式可以独立开辟一个空间，其空间内的样式不会影响外部样式，
而且浮动的元素也会计算高度 -->

css伪类和伪元素

伪类：顾名思义，是一个类，就像.parent .child一样（只是写法不一样），为其设置样式，那么该元素就会显示特定的样式。如a:hover表示鼠标移动上a标签的时候需要显示的样式，类似的还有:active :visited :last-child :nth-child(n)等。
伪元素：顾名思义，是一个元素，只是该元素不在文档树种。如：::before ::after等。div::after { content: 'abc'; }会在div后边生成abc字符串，但是并不在文档树中，此方法还可以用来清除浮动。

inline block inline-block 的区别

• inline：inline元素不会独占一行，设置width height无效，垂直方向margin padding无效。
• block：block元素会独占一行，默认自动铺满父元素宽度，就算设置宽度，也是独占一行，设置margin padding生效。
• inline-block：拥有可以设置的block属性，同时拥有inline的不会独占一行属性。