HTML 学习三 - 网页布局

引言

HTML 学习一 - 基础: https://blog.yexca.net/archives/146
HTML 学习二 - 列表、表格与表单: https://blog.yexca.net/archives/150
HTML 学习三 - 网页布局: https://blog.yexca.net/archives/195

标准流也叫文档流，指的是标签在页面中默认的排布规则，例如：块元素独占一行，行内元素可以一行显示多个

若不按标准流布局可使用浮动或 Flex 布局

浮动

作用：使块元素水平排列，属性名 float，属性值有两个：left 和 right

加了浮动的盒子将脱离标准流

清除浮动影响

因为浮动元素会脱离标准流，如果父级没有高度，自己将无法撑开父级高度，可能导致页面布局错乱

清除浮动常用四种方法

额外标签法

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

        
      
<style>
    .clearfix {
        clear: both;
    }
</style>

<div>
    <div></div>
    <div class="clearfix"></div>
</div>

单伪元素法

原理同上

        
      
<style>
	.clearfix::after {
    	content: "";
    	display: block;
    	clear: both;
	}
</style>

<div class="clearfix">
    <div></div>
    <div></div>
</div>

双伪元素法

此方法可同时解决塌陷问题与浮动影响

        
      
<style>
	.clearfix::before, /* 解决塌陷问题 */
	.clearfix::after {
        content: "";
        display: table;
    }
    .clearfix::after { /* 解决浮动问题 */
        clear: both;
    }
</style>

<div class="clearfix">
    <div></div>
    <div></div>
</div>

overflow

在父元素添加 CSS 属性 overflow: hidden;

Flex

Felx 布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力

而且 Flex 模型不会产生浮动布局中的脱离标准流现象，布局网页更简单、更灵活

组成

Flex 有四个组成部分

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

给父元素设置 display: flex; 将变成弹性容器，子元素变为弹性盒子，可以自动挤压或拉伸

Flex 布局

描述	属性
主轴对齐方式	justify-content
侧轴对齐方式	align-items
某个弹性盒子侧轴对齐方式	align-self
修改主轴方向	flex-direction
弹性伸缩化	flex
弹性盒子换行	flex-wrap
行对齐方式	align-content

主轴对齐方式

属性名：justify-content

属性值	效果
flex-start	默认值，弹性盒子从起点开始依次排列
flex-end	弹性盒子从终点开始依次排列
center	弹性盒子沿主轴居中排列
space-between	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
space-around	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-evenly	弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

侧轴对齐方式

属性名

align-items: 当前弹性容器内所有弹性盒子的侧轴对齐方式 (给弹性容器设置)
align-self: 单独控制某个弹性盒子的侧轴对齐方式 (给弹性盒子设置)

属性值	效果
stretch	弹性盒子沿着侧轴线被拉伸至铺满容器 (弹性盒子没有设置侧轴方向尺寸则默认拉伸)
center	弹性盒子沿侧轴居中排列
flex-start	弹性盒子从起点开始依次排列
flex-end	弹性盒子从终点开始依次排列

修改主轴方向

主轴默认在水平方向，侧轴默认在垂直方向

属性名：flex-direction

属性值	效果
row	水平方向，从左向右 (默认)
column	垂直方向，从上向下
row-reverse	水平方向，从右向左
column-reverse	垂直方向，从下向上

弹性伸缩比

作用：控制弹性盒子的主轴方向的尺寸。属性名：flex，在子级 (弹性盒子) 添加

属性值：整数数字，表示占用父级剩余尺寸的份数

弹性盒子换行

弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示。属性名：flex-wrap，在父级 (弹性容器) 添加

属性值有 wrap (换行) 和 nowrap (不换行，默认)

行对齐方式

属性名：align-content

属性值与主轴对齐方式相同，只对多行弹性盒子生效