Longstick的学习周记——常考CSS知识

---

前言

这周的话，逐渐好了起来，虽然没有多好，但是还是好了一点。
至少至少我把驾照拿到了。 面试的话还是一般，这次竟然折在了CSS上，我晕倒。
复习一下吧，太久没写真的全部忘光光。

---

面试常考CSS

其实以前也没有认真学过css，都是边写边查，这样想想，确实基础不扎实，效率也很低。
所以还是简单总结一下几个常用的。

display

display属性规定元素应该生成的框的类型，通常来说多个盒的摆放位置与其相关。

这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。

其中的几个常用属性：

• none
• block
• inline
• inline-block
• flex

还有一些我没怎么用过的table、table-cell、list-item这些之后有机会再继续了解一下吧。

none

此元素将不会显示，这个没啥好说的。

block

css中的盒子模型是非常重要的一个理念，css的工作原理就是从盒子模型出发的。使用了block属性之后，此元素将显示为块级元素，元素前后带有换行符。

块级元素的特点：

• 总是以一个块的形式表现，占领一整行，若干同级块元素会从上而下的一次排列（使用了float除外）
• 可以设置高、宽、内外边距等参数
• 当width缺省时，它的宽度是容器的100%，除非设定固定宽度。（行由高度撑开）
• 常见块级元素：p / div / h1 / li 等

inline

此元素会被显示为内联元素，元素前后没有换行符。
显然，display : inline的作用即可以将一个块级元素转换成行内元素，那么这个块级元素将不能再设置宽和高以及上下方向的margin和padding。

行内元素的特点：

• 它不会单独占据一整行，而是只占领自身的宽度和高度所在的空间。若干同级行内元素会从左到右（即某个行内元素可以和其他行内元素共处一行），从上到下依次排列。
• 行内元素不可以设置高度、宽度，其高度一般由其字体的大小来决定，其宽度由内容的长度控制。（宽度撑开）
• 行内一般不可以包含块级元素

inline-block

结合了行内元素与块级元素的优点，既可以设置宽高、内外边距，又可以和其他的行内元素并排。通俗的话来说，就是不独占一行的块级元素。

inline-block的特点可以总结为“外部看来是流， 但是自身确实是一个块”。

flex

弹性布局，为盒状模型提供了最大的灵活性。设为了flex布局之后，子元素的float、clear、vertical-align等属性将失效。

fle新布局可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

flex的常用属性：

1. flex-direction 容器内元素的排列方向。

2. flex-wrap 容器内元素的换行。

3. justify-content 元素在主轴上的排列。常用水平居中排列。

4. align-items 元素在主轴当前行的横轴方向上的对齐。可以用来垂直居中。
   

5. align-content 在弹性容器内的元素没有占用交叉轴上所有可用空间时对齐容器内的各项（垂直）

position

position属性规定了元素的定位类型。

这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

position的值有：

• static
• absolute
• fixed
• relative
• inherit

static

该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top、right、bottom、left 属性无效。

大概就是定死布局。

absolute

生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过left、top、bottom、right来规定。

fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过left、top、bottom、right来规定。

relative

生成相对定位的元素，相对于其正常位置进行定位。
该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。

position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。

通过父元素relative、子元素absolute来进行对齐是我发现在项目中很常用的方法

inherit

规定从父元素继承position的值。

---

水平垂直居中

水平垂直居中，项目中遇到很多，面试也很爱问，但是总是答不出来很完整的答案。

最简单的水平居中，内联元素在父元素上设置text-align:center；如果是块元素，对其设置margin:auto，但是一说到垂直居中，会楞。

方法一：margin：auto法

div{
      width: 300px;
      height: 300px;
      position: relative;
      border: 1px solid #465468;
 }
 img{
      position: absolute;
      margin: auto;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
 }

方法二：负margin法

.container{
      width: 500px;
      height: 400px;
      border: 2px solid #379;
      position: relative;
 }
 .inner{
      width: 480px;
      height: 380px;
      background-color: #746;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -190px; /*height的一半*/
      margin-left: -240px; /*width的一半*/
 }

方法三：table-cell法

div{
	width: 260px;
	height: 230px;
	border: 3px solid #555;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
img{
	vertical-align: middle;
}

方法四：flex法

.container{
      width: 300px;
      height: 200px;
      border: 3px solid #546461;
      display: -webkit-flex;
      display: flex;
      -webkit-align-items: center;
      align-items: center;
      -webkit-justify-content: center;
      justify-content: center;
 }
 .inner{
      border: 3px solid #458761;
      padding: 20px;
 }

参考：

理解与应用css中的display属性
css display:flex 属性
CSS水平垂直居中的几种方法