今天完成的事情：任务四

明天计划的事情：布局任务五

遇到的问题：background-image用法，查过很多资料，都是在css中background-image：url(\d:images\1.png),（）中是路径，但是不知道为什么，图片都打不开，我上传代码和图片之后也是一样，这是个很大的问题（ps:按理说应该没有问题，一是资料，二有很多人用这种方法，至于打不开也真的不知道了）

收获如下：

浮动：浮动就是浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

1）表单边框设置

取消浏览器自带边框、内边距：

input{border: none ;box-shadow: none ;outline:none;}

input{border:none;padding:0px;}

2)去掉input点击后的边框

input{outline:none;}

3）缩小图片

学到一个放大缩小图片的方法

img

{

transform:scale (0.8);

}

就是把图片缩小为原始的0.8倍大小

flex box布局：

flex box是flexible box的缩写，意为“弹性布局”，是在css3引入的新的布局模式。其主要思想是给予容器控制内部元素高度和宽度的能力。

在webkit内核的浏览器中使用时，必须加上-webkit-前缀；（display：-webkit-flex;）

基本概念：

采用flex布局的元素，称为flex容器（flex container），其所有的直接子元素都自动成为一个flex项（flex item）；

容器默认存在两根轴，水平的主轴（main axis）和垂直的交叉轴（cross axis）；

主轴开始的位置，即主轴与边框的交叉点叫做main start，结束位置叫做main end；交叉轴开始的位置叫做cross start，结束位置叫做cross end；

flex项默认按主轴排列，其在主轴方向上占据的宽度叫做main size，在交叉轴方向上占据的宽度叫做cross size；

注意：在设为flex布局后，flex容器子元素的float、clear和vertical-align属性将失效；

想要创建一个flex容器，只需要在一个元素上添加display：flex；或display：inline-flex；属性即可；默认情况下，这个元素的所有直接子元素都从左到右依次排列在一行中。如果flex项的宽度总和大于flex容器的宽度，则flex项将按比例缩小，直到它们适应flex容器的宽度。

flex和inline-flex：

flex：将容器作为弹性伸缩盒使用；

inline-flex：将容器作为内联块级弹性伸缩盒使用；

flex类似于block属性，在页面中会独占一行，后面的元素（不论是块级元素还是内联元素）会在下一行排列；

inline-flex类似于inline-block属性，在页面中不会独占一行，后面的元素是内联元素时会同处一行，这是flex与inline-flex属性唯一的区别，其它都相同；

以下六个属性设置在容器上：

1.flex-direction：设置主轴的方向（flex项的排列方向）；它有四个值：row | row-reverse | column | column-reverse；

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

row-reverse：主轴为水平方向，起点在右端，向左排列；

column：主轴为垂直方向，起点在上端，向下排列；

column-reverse：主轴为垂直方向，起点在下端，向上排列（只有flex容器内会发生变化，容器外不变）；

2.flex-wrap：默认情况下，flex项排列在一条线上（即主轴上），flex-wrap决定当排列不下时是否换行以及换行的方式，值：nowrap | wrap |wrap-reverse；

nowrap：默认值，按比例缩小flex项，不换行；

wrap：在占满flex容器宽度后换行，且第一行在上方；

wrap-reverse：在占满flex容器宽度后换行，且第一行在最下方；

3.flex-flow：flex-direction和flex-wrap的简写形式，默认值为flex-flow：row nowrap；

4.justify-content：定义了flex项在主轴上的对齐方式，值：flex-start | flex-end | center | space-between | space-around；具体对齐方式与轴的方向有关，下面假设主轴从左到右；

flex-start：默认值，左对齐；

flex-end：右对齐；

center：居中；（flex项移动到flex容器的中间）

space-between：两端对齐，flex项之间的间隔都相等；

space-around：每个flex项两边的间隔相等。所以，flex项之间的间隔比flex项与边框的间隔大一倍；

5.align-items：定义项目在交叉轴上如何对齐，值：flex-start | flex-end | center | baseline | stretch；具体的对齐方式与交叉轴的方向有关，假设交叉轴从上到下；

stretch：默认值，如果项目未设置高度或设为auto，将占满整个容器的高度（上图的”123“是没有设置高度的，浏览器默认了stretch属性）；

flex-start：flex项位于flex容器的起点。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴(纵轴）起始边界；（我的理解是：交叉轴从上到下时，flex容器的上边框紧靠flex项的上边框）；

flex-end：flex项位于flex容器的结尾。弹性盒子元素的侧轴（纵轴）结束位置的边界紧靠住该行的侧轴（纵轴）结束边界；（这次是flex容器与flex项的下边框紧靠）

center：flex项位于flex容器的中心。弹性盒子元素在该行的侧轴（纵轴）上居中放置（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）；（我的理解：交叉轴从上向下时，flex项位于flex容器交叉轴的中心，距离起始位置和结束位置的距离是相同的；而当flex项比flex容器的高度大时，会平均的向上下两个方向溢出相同的长度；）

baseline：元素位于容器的基线上。如弹性盒子元素的行内轴与侧轴为同一条，则该值与”flex-start“等效；其他情况下，该值将参与基线对齐；（没搞懂行内轴是什么东西，现在的理解就是：以处于同一行的flex项的第一行文字的基线对齐）；

6.align-content：定义了多根轴线的对齐方式。如果flex项只有一根轴线，该属性不起作用；值：flex-start | flex-end | center | space-between | space-around | stretch；（设置flex项在flex容器内的垂直排列方式，只有在设置了类似flex-direction：row；以及flex-wrap：wrap；这样的属性时align-content属性才能起效；）

stretch：默认值，flex项被拉伸以适应flex容器。各行将会展开以适应剩余的空间，如果剩余的空间是负数，该值等效于”flex-start“。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸；如果flex项有实际高度，则为每个flex项的下方增加空白，没有实际高度，则依据align-items属性的默认值拉伸flex项；

flex-start：flex项位于flex容器的开头。各行向flex容器的起始位置堆叠，第一行的侧轴（上边框）起始边界紧靠住flex容器的侧轴起始边界（上边框），之后的每一行都紧靠住上一行的下边框（未设置margin的情况下），没有设置高度时flex项不会被拉伸；

flex-end：flex项位于flex容器的结尾。各行向flex容器的结束位置堆叠，最下方的一行结束边界紧靠住flex容器的结束边界，和flex-start基本相同，只有放置位置的不同；

center：flex项位于flex容器的中心，与flex-start和flex-end相同，不同点在于放置位置的不同；

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布，；类似于justify-content的space-between属性，区别在于justify-content的是水平排列，而这个则是垂直排列；

space-around：每根轴线两侧的距离都相等。所以轴线之间的间隔比轴线与边框的间隔大一倍；（同justify-content的space-around属性，不同点在于justify-content是水平，这个是垂直排列）；

设置在flex项中的属性：

想·【

1.order：定义项目的排列顺序，数值越小，排列越靠前，默认为0；正负值都可以使用，负值越大表示越小越靠前；

2.flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有的flex项的flex-grow属性都为1，则平分剩余空间（如果有的话），如果某一个flex项的flex-grow属性为2，其它flex项都为1，则属性为2的比其它的占据的剩余空间多一倍。（即值相同，则平分；值比其它项的值高，则多占；负值无效；将某一个flex项的值调到最大，也只能占据flex容器中所有的剩余空间，无法占据其它flex项的固有空间；）

3.flex-shrink：定义了flex项的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有flex项的flex-shrink的值都为1，则空间不足时，都等比例缩小；如果其中一个flex项的flex-shrink值为0，其它项都为1，则值为0的不缩小，其它项等比例缩小；负值无效；如果值为2，则缩小2倍，值为3，则缩小三倍。。。。。

4.flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size），浏览器根据这个属性，计算主轴是否有剩余空间。默认值是auto，即flex项的本来大小。它可以设为跟width和height相同的值（比如300px），则项目将占据固定空间；flex-basis属性比width属性的优先级高，对某一个flex项同时设置具有不同值的flex-basis和width，浏览器会选择flex-basis；

5.flex：属于flex-grow、flex-shrink和flex-basis属性的简写，默认值为0 1 auto；

6.align-self：允许单个项目有与其它项目不一样的对齐方式，可覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同与stretch；值：auto | flex-start | flex-end | center | baseline | stretch；除了auto以外，其它都与align-items属性完全一致；

通过flex box布局完成任务四标题布局：

1.为作为容器的”header“设定display：flex；并使用justify-content：space-between；在设置一些内边距，就完成了标题的布局；

优点：代码少，完成起来很轻松；

缺点：无法达到验收标准中的可扩展性，去除一两个flex项之后，剩余的移动范围过大；（对flex box布局认识太浅，无法做到扩展，夭折；）