传统布局: 标准流、浮动与定位

本文介绍了HTML/CSS布局中的三种传统方式:标准流、浮动和定位。标准流中,行内元素横向排版,块级元素纵向排版,通过调整line-height可实现垂直居中。浮动特性使其脱离标准流,适用于创建瀑布流布局,但需注意清除浮动的影响,可通过额外标签、BFC或伪元素法解决。定位则提供了更精确的元素位置控制。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

传统布局三种方式

  • 标准流(盒模型)
  • 浮动
  • 定位

一、标准流
  1. 元素的划分
  2. 行内元素
  3. 块级元素

1. 元素的划分

  1. 行内元素 - inline
  2. 块级元素 - block
  3. 特殊的行内块元素 - inline-block

重点

  1. 行内元素 负责页面的 横向 排版
  2. 块级元素 负责页面的 纵向 排版
【行内元素. 特性】
  a. 不能设置宽高
  b. 默认在一行排列显示
  c. 当一行显示不下时,会自动换行显示
  d. 不能设置垂直方向的外边距
  e. 可以设置padding与水平方向的margin与border


【行内元素高度】
  a. 由字体的高度+上下padding决定
  b. 行高本身不影响行内元素的高度
  c. 多余的部分会溢出

技巧

  • 将行内元素的line-height 设置成父元素的height一样时,可以实现文本垂直居的效果, 也对行内块元素有效。
【行内元素的宽度】
  a. 由字体的宽度+左右padding决定

【行内元素的margin】
  a. 设置上下margin无效
  b. 可以溢出, 不影响父级元素

在这里插入图片描述

【块级元素】
 a. 可以设定宽高
 b. 独占一行
 c. 一般与行内元素组合使用
 d. 高度不设置时,由内容撑开
 e. 相邻的上下边距会合并,取其中最大值
 f. 当子元素设置上边距时,且紧挨着父元素上边界时, 会造成margin-top塌陷
 g. 解决: border, overflow(BFC), padding

【行内块元素】
 a. 具有行内与块级的特点
 b. 多行排列时,有换行的\n在浏览器显示时,有空格,
 c. 可以用font-size:0, 或编辑不换行。
二、浮动

特性:

  1. 会脱离标准流, 影响正常的布局
  2. 一行可以排列多个,且能设置宽高
  3. 且具有顶部对齐的特点, 可应用于 【爆布流】
    -------

清除浮动: clear:both

  1. 额外标签法: 在最后一个浮动元素插入标签
  2. BFC法: overflow:hidden; 对于溢出的部分不能展示。
  3. 伪元素法: ::after, ::before;
/*::after法*/
.clearfix::after {
	content: '';
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix{
	*zoom: 1;  /*兼容ie6、7, hack写法*/
}

/*::after, ::before*/
.clearfix::after, 
.clearfix::before {
	content: '';
	display: table;
}
.clearfix::after {
	clear: both;
}

.clearfix {
	*zoom: 1; /*兼容ie6、7*/
}
三、定位
类型说明
相对定位不脱离正常的标准流, 还占有以前的位置,相对于自己原因的位置定位。
绝对定位脱离正常的标准流, 相对于最近一级有定位属性的元素进行定位
固定定位脱离正常的标准流, 相对于body元素进行定位
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值