页面布局

• 手段
  • CSS盒模型
    • float、position、display等css盒模型样式
    • 细致控制
    • 复杂
  • Flex布局
    • 对子元素进行统一布局设置
    • 简单
• 经验总结
  • 弹性布局
    • 对于表格或者整个页面的宽度分配，有时想尽量做到弹性的动态适应大小屏，既能按比例分配列宽，又想保证一些列的最小宽度，又不想在大小屏的极限情况下有的列过宽或过窄。
    • 此时要考虑好自己至少要保证好看的最小屏和最大屏（分辨率），并要优先考虑最常见的屏幕（分辨率）。
    • 对于页面布局，可以使用bootstrap的栅格系统进行大致的按比例分配（只能分成12份，不能更细了？）。
    • 对于表格的列宽，可以设置width和min-width（有时无效？）；并且width可以设置成百分比？
    • 对于表格的列宽，还要兼顾考虑bootstrap的栅格系统，比如在屏幕分辨率很小时，可能根据bootstrap的栅格系统配置，表格会变成单独的一行，那么宽度也就够用了，不用再继续收缩设置宽度了。
    • 可以使用CSS响应式布局和@media媒体查询，来针对不同的屏幕（分辨率）范围来进行不同的定制，可以动态计算列宽（有点麻烦），也可以就大致的对几个范围进行区别的固定设置就行。
• 定位
  • CSS position(定位)属性
  • 涉及position、top、left、right、bottom等属性设置。
  • 必须上层某一级父元素的明确设置了position，子元素的top、left等定位设置才是基于它的？否则都是基于最上层整个浏览器document的？
• 标准文档流
  • https://www.jianshu.com/p/b4d2c1dfd6e5
  • 标准文档流有以下现象：空白折叠现象；高矮不齐,底边对齐；自动换行，一行不满，换行写。
  • 因此标准文档流里面的限制很多，如果想要实现既要并排，又要设置宽高，此刻就要脱离标准流。
  • 想让元素重叠（后者脱离文档流）的话，可以让后者float或者给后者设置position为absolute和top。
  • 三种脱离文档流的方式
    • 浮动
    • 绝对定位
    • 相对定位
• 元素类型/display
  • 块级元素（block）
    • 独占一行，被视为独立的一块
    • 能设置宽高度，如果不设置宽度，则默认会变为父亲的100%
    • 所有的容器级标签都是块级元素。常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。
  • 行内元素（inline）
    • 与其他行内元素并排，前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。
    • 不能设置宽高度，默认就是文字的宽度
    • 所有的文本级标签，都是行内元素，除p外，p在HTML是文本级，但是在CSS中是个块级元素。常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。
  • block元素可以包含block元素和inline元素；但inline元素只能包含inline元素。要注意的是这个是个大概的说法，每个特定的元素能包含的元素也是特定的，所以具体到个别元素上，这条规律是不适用的。比如 P 元素，只能包含inline元素，而不能包含block元素。
  • display
    • 块级元素和行内元素可以通过display样式进行转换
    • display:block
      • block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
      • block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
      • block元素可以设置margin和padding属性。
    • display:inline
      • inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
      • inline元素设置width,height属性无效。
      • inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果（因为会影响并排？）。
    • display:inline-block
      • 自身是inline，子元素是block。简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性（不占整行）。
    • 其他取值
• 元素的高度与宽度
  • 父子元素都是内联元素时（如span、a），width（和height）的宽度是auto，即宽度是由其内容撑起来的，故为auto。
  • 父子元素都是块级元素时（如默认display样式的div），子元素的宽度默认为父元素的100%，父元素的高度由子元素决定，而子元素的高度又是内容其撑起来的。
    • 实际上，当我们给子元素添加padding和margin时，可以发现宽度width是父元素的宽度减去子元素的margin值和padding值
  • 子元素使用了float时
    • 当一个元素只包含浮动元素的时候，它会出现高度折叠，即子元素无法填充父元素，可以使用clear: both;或者overflow: hidden;等方式来解决。
• 注意
  • 貌似div的position设置成absolute后，再出现滚动条的话，滚动条比较难显示出来并同时div的宽度合适，貌似滚动条的宽度就不算在div中，导致浏览器中滚动条就显示一条缝，如果修改div的width为100%，虽然可以显示完整的滚动条，但div的宽度和位置貌似就会偏移
  • 有的时候需要点特殊手段。。。
    • 多嵌套几层div来达到目的
      • 比如，table的box-shadow阴影效果在edge上无效，那么就要外面套一层div，然后在div上设置box-shadow阴影效果；然后如果业务上还需要把布局平分为两列且有间隔，每列里面有一个table，这时如果使用了bootstrap的栅格布局，那么两列之间的间距只能使用padding来实现而不能使用margin，但同时box-shadow阴影效果是在边框上的，那么会导致阴影效果和table之间有空白，那么就要在这个div外面再套一层div，外层div有padding，内层div有阴影效果。
• flex
  • 前端布局神器display:flex
  • 30 分钟学会 Flex 布局
  • 前端布局神器，用来为盒装模型提供最大的灵活性。
  • 优势是简单！！！因为并不像float、position、display等css盒模型样式要对每个子元素一个个进行设置，而是可以对所有子元素统一进行布局，比如横竖向、收缩比例、多个子元素整体的换行排列、对齐等！！！
  • bootstrap提供的row等class其实就是给容器设置了flex属性
  • 概念
    • Flex容器
      • 实现 flex 布局需要先指定一个容器，任何一个容器都可以被指定为 flex 布局，这样容器内部的元素就可以使用 flex 来进行布局。
      • 使用display来让容器变成flex布局。display有flex和inline-flex两种取值。分别生成一个块状或行内的 flex 容器盒子。简单说来，如果你使用块元素如 div，你就可以使用 flex，而如果你使用行内元素，你可以使用 inline-flex。
      • 当时设置 flex 布局之后，子元素的 float、clear、vertical-align 的属性将会失效。
    • Flex项目(Flex item)/项目/容器成员
      • flex容器内所有子元素自动成为容器成员，成为Flex项目(Flex item)，简称“项目”。这些项目会延flex-direction属性设置的主轴方向排列（即项目的排列方向）
      • 在容器中的每个单元块被称之为 flex item，每个项目占据的主轴空间为 (main size), 占据的交叉轴的空间为 (cross size)。
    • 轴
      • 在 flex 容器中默认存在两条轴，水平主轴(main axis) 和垂直的交叉轴(cross axis)，这是默认的设置，当然你可以通过修改使垂直方向变为主轴，水平方向变为交叉轴
      • 不能先入为主认为宽度就是 main size，高度就是 cross size，这个还要取决于你主轴的方向，如果你垂直方向是主轴，那么项目的高度就是 main size。
  • 设置在容器上的属性有6种。
    • flex-direction
      • 决定主轴的方向（即项目的排列方向）
      • flex-direction: row | row-reverse | column | column-reverse;
      • 默认值：row，主轴为水平方向，起点在左端。
      • row-reverse：主轴为水平方向，起点在右端
      • column：主轴为垂直方向，起点在上沿
      • column-reverse：主轴为垂直方向，起点在下沿
    • flex-wrap
      • 定义换行情况，决定容器内项目是否可换行
      • flex-wrap: nowrap | wrap | wrap-reverse;
      • 默认值：nowrap 不换行，即当主轴尺寸固定时，当空间不足时，项目尺寸会随之调整而并不会挤到下一行。
      • wrap：项目主轴总尺寸超出容器时换行，第一行在上方
      • wrap-reverse：换行，第一行在下方
    • flex-flow
      • flex-direction和flex-wrap的简写形式
      • flex-flow: || ;
      • 默认值为: row nowrap，感觉没什么卵用，老老实实分开写就好了。这样就不用记住这个属性了。
    • justify-content
      • 定义项目在主轴上的对齐方式。
      • justify-content: flex-start | flex-end | center | space-between | space-around;
      • 默认值: flex-start 左对齐
      • flex-end：右对齐
      • center：居中
      • space-between：两端对齐，项目之间的间隔相等，即剩余空间等分成间隙。
      • space-around：每个项目两侧的间隔相等，所以项目之间的间隔比项目与边缘的间隔大一倍。
    • align-item
      • 定义在交叉轴上的对齐方式
      • 建立在主轴为水平方向时测试，即 flex-direction: row
      • align-items: flex-start | flex-end | center | baseline | stretch;
      • 默认值为 stretch 即如果项目未设置高度或者设为 auto，将占满整个容器的高度。
        • 假设容器高度设置为 100px，而项目都没有设置高度的情况下，则项目的高度也为 100px。
      • flex-start：交叉轴的起点对齐
        • 假设容器高度设置为 100px，而项目分别为 20px, 40px, 60px, 80px, 100px, 则如上图显示。
      • flex-end：交叉轴的终点对齐
      • center：交叉轴的中点对齐
      • baseline: 项目的第一行文字的基线对齐
        • 以文字的底部为主
    • align-content
      • 定义多根轴线的对齐方式。如果项目只有一根轴线，那么该属性将不起作用
        • 即多行或多列在容器中的分布，前面的属性都仅仅是单行或单列内的分布设置
        • 当你 flex-wrap 设置为 nowrap 的时候，容器仅存在一根轴线，因为项目不会换行，就不会产生多条轴线。
        • 当你 flex-wrap 设置为 wrap 的时候，容器可能会出现多条轴线，这时候你就需要去设置多条轴线之间的对齐方式了。
        • 建立在主轴为水平方向时测试，即 flex-direction: row, flex-wrap: wrap
      • align-content: flex-start | flex-end | center | space-between | space-around | stretch;
      • 默认值为 stretch
  • 有时有些元素很难定位、居中(vertical-align无效，用calc计算太麻烦)，可以考虑使用flex布局，如material的spinner组件（外层使用display: flex; flex-direction: column; align-items: center; justify-content: center;）