flex布局/display

justify-content

语法

justify-content: flex-start | flex-end | center | space-between | space-around

flex-start：弹性盒子元素将向行起始位置对齐。
flex-end：弹性盒子元素将向行结束位置对齐。
center：弹性盒子元素将向行中间位置对齐。
space-between：弹性盒子元素会平均地分布在行里。
space-around：弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。

 

flex-direction属性

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

 有四个值：

row（默认值）：主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。

display属性的值及它们的作用

(1) block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。

(2) none 元素不显示，并从文档中移除。

(3) inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。

(4) inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。

(5) list-item 象块类型元素一样显示，并添加样式列表标记。

(6) table 此元素会作为块级表格来显示。

(7) inherit 规定应该从父元素继承 display 属性的值。

 

 

背景颜色：background-color: rgba(0,0,0,0.333); 灰色

align-items: center;  ：将弹性 <div> 元素的所有项目的居中对齐

space-around：弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。

border-radius: 4px; 把边框样式改为圆角

 

align-items属性的值：

stretch	默认值。元素被拉伸以适应容器。 如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。	测试 »
center	元素位于容器的中心。 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。	测试 »
flex-start	元素位于容器的开头。 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。	测试 »
flex-end	元素位于容器的结尾。 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。	测试 »
baseline	元素位于容器的基线上。 如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。	测试 »
initial	设置该属性为它的默认值。请参阅 initial。	测试 »
inherit	从父元素继承该属性。请参阅 inherit。

 

 

border: none;

outline: 1px solid #ccc; 将外面黑色的边框颜色改为#ccc（灰色）

如果要设置outline属性一定要添加border: none;

 

 

querySelector：匹配指定选择器的第一个元素

 

HTML DOM querySelectorAll() 方法

 

获取文档中 class="example" 的所有元素:

 

var x = document.querySelectorAll(".example");

 

定义与用法：

 

querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素，返回 NodeList 对象。NodeList 对象表示节点的集合。可以通过索引访问，索引值从 0 开始。