CSS布局方式

目录

盒子模型

一、浮动布局  

二、弹性盒子布局

三、定位布局

---

盒子模型

学习布局前先要理解什么是盒子模型，只有理解了盒子模型，我们才能更好的进行网页布局

content	这是盒子的中兴区域，用来存放我们的内容
padding	指的是盒子的内边距，指内容到边框之间的距离
border	指的是盒子外围的边框
margin	指的是盒子的外边距——两个盒子之间的距离

 通过盒子的这些属性可以为不同的盒子定义不同的大小。

一、浮动布局  

顾名思义通过 float属性去设置浮动布局，float有以下几种取值

right	向右浮动
left	向左浮动
none	不浮动

值得注意的是如果浮动取值是 Left的话（左浮），会对后面的元素产生一定的影响，如果要消除这种影响（消除浮动）可以使用 clear 属性

在clear中还有几种常见属性

none	默认 允许两边都可以浮动
left	不允许左边的浮动
right	不允许右边的浮动
both	不允许两侧有浮动

二、弹性盒子布局

弹性盒子是由弹性容器（Flexible或者Flexbox）和弹性元素(Flex-item)组成 设置弹性容器是通过display属性进行设置，---------- display:flex或则inline-flex

注意：一个弹性容器可以包含多个弹性元素

在弹性盒子中有几种常见属性

flex- direction	指的是弹性容器中子元素的排列方式
flex-wrap	指的是弹性容器中子元素超出父容器时是否换行
flex-flow	flex- direction 和flex-wrap 的简写
align-items	设置的弹性容器中元素在侧轴(纵轴）的对齐方式
justify-content	设置的弹性容器中元素在主轴（横轴）的对齐方式
align-content	修改了flex-flow 的行为，类似于align-items，它是对齐的弹性线

1.  flex- direction

   row	默认值。作为一行，水平地显示弹性项目。
   row-reverse	等同行，但方向相反。
   column	作为列，垂直地显示弹性项目。
   column-reverse	等同列，但方向相反。

2. flex-wrap

   nowrap	默认值。规定弹性项目不会换行。
   wrap	规定弹性项目会在需要时换行。
   wrap-reverse	规定弹性项目会在需要时换行，以反方向。
   initial	将此属性设置为其默认值。参阅 initial。
   inherit	从其父元素继承此属性。参阅 inherit。

3. flex-flow

   flex-direction	可能的值： row row-reverse column column-reverse initial inherit 定义同上 默认值为 "row"。 规定弹性项目的方向。
   flex-wrap	可能的值： nowrap wrap wrap-reverse initial inherit 定义同上 默认值为 "nowrap"。 规定弹性项目是否应换行。

4. align-items

   stretch	默认。项目被拉伸以适合容器。
   center	项目位于容器的中央。
   flex-start	项目位于容器的开头。
   flex-end	项目位于容器的末端。
   baseline	项目被定位到容器的基线。

5. justify-content

   flex-start	默认值。项目位于容器的开头。
   flex-end	项目位于容器的结尾。
   center	项目位于容器中央。
   space-between	项目在行与行之间留有间隔。
   space-around	项目在行之前、行之间和行之后留有空间。

6. align-content

   stretch	默认值。行拉伸以占据剩余空间。
   center	朝着弹性容器的中央对行打包。
   flex-start	朝着弹性容器的开头对行打包。
   flex-end	朝着弹性容器的结尾对行打包。
   space-between	行均匀分布在弹性容器中。
   space-around	行均匀分布在弹性容器中，两端各占一半。

三、定位布局

通过position属性来设置对象的定位方式

position中有以下几种取值

static	静态定位（没有设置位置）默认
absolute	绝对定位 ：将对象从文档流中分离出来，设置 left top right bottom 这四个方向去设 置相较于父级对象的相对定位，如果不存在这样的父级对象，那么父级是 body
relative	相对定位：对象不从文档流中分离出来，设置 left top right bottom 这四个方向去设置 相较于自身的相对定位

相对定位主要作用：

1）微调元素

2）做绝对定位的参考，子绝父相