盒子模型与flex模型

Posted 2020-09-29 轩悦

一、盒子模型

           

         注意：两个相邻元素的margin值是重叠在一起的，取当中最大的那个值。

        水平方向auto， margin:0 auto;会居中    但是margin-left:auto;，元素会到最右边

       标准盒子模型中：盒子的总宽度 ＝ 左右margin + 左右border + 左右padding + width 

       IE盒子模型中：盒子总宽度 ＝ 左右margin + width

二、CSS3弹性盒模型（Flex模型）
       

      

    伸缩容器默认存在两条轴: 水平的主轴(main axis) 和垂直的侧轴(cross axis)

　    　[注意]主轴方向不一定是水平的，它主要取决于justify-content属性

　 主轴起点叫main start，主轴终点叫main end；侧轴起点叫cross start，侧轴终点叫cross end

　 伸缩项目默认沿主轴排列。单个伸缩项目占据的主轴空间叫main size ，占据的侧轴空间叫cross size

　    　[注意]伸缩项目的main size和cross size主要由宽度或高度决定

 

伸缩容器

　　以下6个属性作用在伸缩容器上

　　伸缩流方向 flex-direction： row[默认] | row-reverse | column | column-reverse

　　伸缩流换行 flex-wrap ： nowrap[默认] | wrap | wrap-reverse

　　伸缩流(包括方向与换行) flex-flow： <flex-direction> | <flex-wrap> 

  [默认值] flex-flow: row nowrap

　　主轴对齐 justify-content：  flex-start[默认] | center | flex-end | space-between | space-around

　　侧轴对齐 align-items ： flex-start | center | flex-end | baseline | stretch[默认]

　　堆栈伸缩行 align-content：  flex-start | center | flex-end | space-between | space-around | stretch[默认]