web前端开发第六天课程

1.标准流（文档流）：默认排布规则

2.浮动（float）

基本使用与布局

/* 特点：顶对齐；具备行内块显示模式特点；父级宽度不够，子级自动换行；浮动的盒子会脱离标准流 */
.one{float:left;}
.two{lfoat:right:}

产品区域布局

清除浮动：子级浮动，父级没有高度，子级无法撑开父级高度，影响布局效果

1. 额外标签法

• 在父元素内容的最后添加一个块级元素，设置CSS属性 clear：both

.clearfix{ clear：both;}

2. 单伪元素法

.clearfix::after{ cotent:"";display:block;clear:both;}

3. 双伪元素法

.clearfix::before, .clearfix::after { cotent:""; display:table; } .clearfix::after{ clear:both;}

4. overflow
   父元素添加CSS属性 overflow：hidden

3.flex布局

组成

设置方式：父元素设置display:flex，子元素可以自动挤压或拉伸（在一行显示）
组成部分：

• 弹性容器
• 弹性盒子
• 主轴：默认在水平方向
• 侧轴或交叉轴：默认在垂直方向

主轴对齐方式

justify-content:flex-start(左对齐);/flex-end(右对齐);/center;/space-between;/space-around;/space-evenly;

侧轴对齐方式

align-items(控制所有的):stretch;(弹性盒子在侧轴没有尺寸才能拉伸)/center;/flex-start(上对齐);/flex-end(下对齐);
align-self:center;

修改主轴方向

flex-direction:column;(主轴为垂直方向)

弹性伸缩比：设置主轴方向尺寸

flex:整数数字;表示占用父级剩余尺寸的份数

弹性换行

flex-wrap:wrap;

行对齐方式(对单行弹性盒子不生效)

align-content:flex-start;/flex-end;/center;/space-between;/space-around;/space-evenly;