了解css的布局

  • 一、w3c css盒子模型概念 (W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分)

cssbox.jpg

  • 二、IE盒子模型(包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。
    )

cssbox_Ie.jpg


  • css 例如:一个盒子模型如下：margin:20px,border:10px,padding:10px;width:200px;height:50px; 如果用w3c盒子模型解释，那么这个盒子模型占用的 宽度为：20*2+10*2+10*2+200=280px; 高度：20*2+10*2+20*2+50=130px; 盒子的实际宽度大小为:10*2+10*2+200=240px; 实际高度：10*2+10*2+50=90px; 用ie的盒子模型解释 ： 盒子在网页中占据的大小为20*2+200=240px; 高：20*2+50=90px; 盒子的实际大小为：宽度:200px, 高度:50px;

了解flexbox布局
在学习FlexBox之前首先要清楚一个概念“宽和高”。一个组件的高度和宽度决定了它在屏幕上的尺寸，也就是大小。
flexbox-guide-1.jpg
据伸缩项目排列方式不同，主轴和侧轴方向也有所变化

flexbox-guide-7.jpg

基本上，伸缩项目是沿着主轴（main axis），从主轴起点（main-start）到主轴终点（main-end）或者沿着侧轴（cross axis），从侧轴起点（cross-start）到侧轴终点（cross-end）排列。
主轴（main axis）：伸缩容器的主轴，伸缩项目主要沿着这条轴进行排列布局。小心，它不一定是水平的；这主要取决于“justify-content”属性（详细见下文）。
主轴起点（main-start）和主轴终点（main-end）：伸缩项目放置在伸缩容器内从主轴起点（main-start）向主轴终点（main-start）方向。
主轴尺寸（main size）：伸缩项目在主轴方向的宽度或高度就是主轴的尺寸。伸缩项目主要的大小属性要么是宽度，要么是高度属性，由哪一个对着主轴方向决定。
侧轴（cross axis）：垂直于主轴称为侧轴。它的方向主要取决于主轴方向。
侧轴起点（cross-start）和侧轴终点（cross-end）：伸缩行的配置从容器的侧轴起点边开始，往侧轴终点边结束。
侧轴尺寸（cross size）：伸缩项目的在侧轴方向的宽度或高度就是项目的侧轴长度，伸缩项目的侧轴长度属性是「width」或「height」属性，由哪一个对着侧轴方向决定。

传统的响应式布局解决方案

百分比
rem

Flexbox

image.png
可以给父容器的display属性设置为flex或者inline-flex来定义。这样你就可以使用flex:1和flex-deraction:row || column 属性来创建一个网格
属性：

  1. align-items enum('flex-start', 'flex-end', 'center', 'stretch')
  2. align-self enum('auto', 'flex-start', 'flex-end', 'center', 'stretch')
  3. border-bottom-width 数值型
  4. border-left-width 数值型
  5. border-right-width 数值型
  6. border-top-width 数值型
  7. border-width 数值型
  8. bottom 数值型
  9. flex 数值型
  10. flex-direction enum('row', 'column')
  11. flex-wrap enum('wrap', 'nowrap')
  12. height 数值型
  13. justify-content enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around')
  14. left 数值型
  15. margin 数值型
  16. margin-bottom 数值型
  17. margin-horizontal 数值型
  18. margin-left 数值型
  19. margin-right 数值型
  20. margin-top 数值型
  21. margin-vertical 数值型
  22. padding 数值型
  23. padding-bottom 数值型
  24. padding-horizontal 数值型
  25. padding-left 数值型
  26. padding-right 数值型
  27. padding-top 数值型
  28. padding-vertical 数值型
  29. position enum('absolute', 'relative','static','fixed','stricky')
  30. right 数值型
  31. top 数值型
  32. width 数值型

Grid(网格) 布局

可以给父容器的display属性设置为grid或者inline-grid来定义一个网格。这样你就可以使用grid-template-columns和grid-template-rows属性来创建一个网格

定义网格的关键代码：

  1. .wrapper { 
  2.     display: grid; 
  3.     grid-template-columns: 100px 10px 100px 10px 100px; 
  4.     grid-template-rows: auto 10px auto; 
  5.     }
  1. class 命名技巧
  2.     CSS Modules 的命名规范是从 BEM 扩展而来。BEM 把样式名分为 3 个级别，分别是：
  3.     Block：对应模块名，如 Dialog
  4.     Element：对应模块中的节点名 Confirm Button
  5.     Modifier：对应节点相关的状态，如 disabled、highlight

image.png
关注公众号 code本缘