css样式布局方式

1.浮动布局

使用float属性设置

取值有：none，left，right

如果要消除这种影响（消除浮动）通过clear属性

none:默认 允许两边都可以浮动

left：不允许左边的浮动

right：不允许右边的浮动

both：不允许两侧有浮动

 2.定位布局

属性：position ------ 设置对象的定位方式

static ----- 静态定位（没有设置位置）默认

absolute ------- 绝对定位 ：将对象从文档流中分离出来，设置left top right bottom这四个方向去设 置相较于父级对象的相对定位，如果不存在这样的父级对象，那么父级是body

relative ------ 相对定位：对象不从文档流中分离出来，设置left top right bottom这四个方向去设置 相较于自身的相对定位

3.其他属性

3.1 overflow属性

可添加以下属性值

3.2 zoom 属性（设置或者检索对象的缩放比例）

可以添加两个属性

normal : 默认值 显示的是对象的实际尺寸

number: 百分比|无符号的浮点数 浮点数为1.0相当于100%相当于取值为normal

 4.弹性盒子

弹性盒子是由弹性容器（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，它是对齐的弹性线

4.1 flex-direction属性

可以添加以下值：

row	左对齐（横向的从左到右排列），默认
row-reverse	反向的横向排列（右对齐），从后往前排，最后一项排在最前面
column	纵向排列
column-reverse	反向纵向排列

         

4.2 flex-wrap（用来设置是否换行）

nowrap	默认值，规定弹性元素不会换行
wrap	弹性元素在需要的时候会换行
	会换行，但是是反方向

 4.3 flex-flow

4.4 align-items（设置的弹性容器中元素在侧轴(纵轴）的对齐方式）

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

 

 

 4.5 justify-content（设置的弹性容器中元素在主轴（横轴）的对齐方式）

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

4.6 align-content（修改了flex-flow 的行为，类似于align-items，它是对齐的弹性线）

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