change log: 2018-11-28 本文主要汇总开发中前端布局，遇到的小问题以及对小问题的研究;

change log: 2020-10-14 针对这2天前端开发，重新整理了一下css布局：主要介绍：大小(box模型)、位置(display、position、float、flex)的控制，重点是postion 与 flex

box模型

• 基本属性

​ width,heigh,padding,border,margin的关系如下图所示：

​
对于框模型已经较为熟悉了，但有一点height与width属性都是内容部分的属性，而不是整个元素的属性。元素的宽度 = width + 2padding + 2border + 2*margin

• 父子元素尺寸关系

  若父元素与子元素都设置了尺寸，则各自按照自己的设置进行。

  height展现了一种自下向上的尺寸影响路线：子元素设置的height,会决定父元素的height；父元素的height不会影响子元素的height。

  width展示了从上而下的影响路线：父元素设置的width，决定子元素的width；子元素的width设置不会影响父元素的width。

  • 100%的设置尺寸问题

    子元素继承父元素的width是content，子元素尺寸100%的设置时，不能再设置padding、border、magin等宽度，否则就会超出限制

    .parent{
        height: 300px;
        width: 300px;
        border: 1px solid red;
    }
    
    .child{
        height: 100%;
        width: 100%;
        border: 50px solid green;
    }
    

    这样的child元素的尺寸会超出父元素parent，因为child元素的尺寸已经是100%父元素的内容了，父元素没有设置border，而子元素增加border的宽度。

  • 左右居中的一种实现：
    .center-me { margin: 0 auto; }

    注意：这样是左右居中的实现方式。

display

display属性决定element如何展现，每一种HTML element都有默认的display属性。绝大多数的值是block与inline。

• block

  block的element总是从一个新行开始，并尽可能多的占用可用的width.

  默认的block element包括：

  • div
  • h1 - h6
  • p
  • form
  • header
  • footer
  • section

• inline

  inline是行内元素，不会另起一新行，只占用它需要的width。

  默认inline element包括：

  • span
  • a
  • img

• none

  通常是javascript在不删除、重建元素条件下，控制elements的显隐。

  display: none; 的元素展示时，page就像没有该元素一样，隐藏的元素不占用空间。

position

需要先明白文档流，文档流是自上而下分成一行行, 并在每行中按从左至右的顺序排放元素的方式。

postition是对元素位置的控制，它会影响文档流的排列方式。通过它设置控制位置的类型,包括: static、relative、absolute、fixed、sticky5种类型，影响：top、right、bottom、left等属性的设置。

static

遵循正常的文档流对象，对象占用文档空间，该定位方式下，top、right、bottom、left、z-index等属性是无效的。

staic是默认的定位方式，也就是不设置postion情况下，top、right、bottom、left、z-index等值是无效的。

relative

relative是相对于元素原来的位置定位，且原来的位置仍然存在。

position: relative;
top: 20px;
left: 30px;

absolute

absolute是针对父元素的位置进行定位，原来的位置不存在了。

position: absolute;
top: 20px;
left: 30px

注意：这个父元素不能是fixed，如果absolute定位的元素，没有相对的父元素，它相对与document body进行定位，当滚动式跟随滚动。

​ absoulte是根据祖先类的border进行的定位

fixed

fixed是相对视窗进行定位，当元素滚动式，它的位置不会发生变化。

参展：app bar

示例

sticky

sticky的定位比较特别，正常情况下，它在文档流中的位置正常，当滚动到一定位置时，它变成fixed的，就像黏在窗口的制定位置上。

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}

示例

属性相关

• 如果同时设置top、bottom，该听谁的？
  如果top和bottom一同存在的话，那么只有top生效。
  如果left和right一同存在的话，那么只有left生效。

• z-index属性

  z-index，又称为对象的层叠顺序，它用一个整数来定义堆叠的层次，整数值越大，则被层叠在越上面，当然这是指同级元素间的堆叠，如果两个对象的此属性具有同样的值，那么将依据它们在HTML文档中流的顺序层叠，写在后面的将会覆盖前面的。需要注意的是，父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下。

float

float属性制定一个elements如何浮动。例如：让图片浮动到文字的右侧。

它的值包括： left、right、none、inherit（从父元素继承）。

img {
    float: right
}

示例

flex

flex(弹性)是display的一种方式，它更加方便的改变了文档流，尤其是当父组件container控制子组件的的排列的时候。

参考

基本

• 轴

  flex布局最基本的概念是轴，行轴称为main axis，列轴称为cross axis。

  应用flex布局的元素，其子元素的布局方式收flex属性的影响。

• 使用

  .box {
    display: -webkit-flex; /* Safari */
    display: flex;
  }
  

flex-direction

控制子元素的排列方向

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

默认排列方向是row

flex-wrap

控制子元素换行的方式

.box{
    display: flex;
    flex-wrap: nowrap | wrap | wrap-reverse
}

wrap:

wap-reverse:

默认是nowrap，nowrap超出不显示。

justify-content

控制在主轴上的对齐方式

.box {
    justify-content: flex-start | flex-end | center | space-between | space-aroud
}

align-items

控制子元素在cross axis上的对齐方式

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}