页面布局

  • 手段
    • 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;)
原文地址:https://www.cnblogs.com/wyp1988/p/11313713.html