正常流布局

布局决定了元素的排列方式。如果让浏览器按照默认方式排列,这叫做正常流(normal flow)布局。正常布局是怎么排列元素的呢?各行从上到下,行内从左到右。

那么什么情况下会开始新的一行呢?块元素会产生新行。元素分为块元素和行内元素两类。块元素独占一行,行内元素则是在行中,在前面元素的右边排列。如果一行排满了,行内元素继续从第二行开始排列。

块元素是 display 属性为 block 的元素,独占一行,可以设置高度 height 、宽度 width (默认值 100% )和内边距、外边距。行内元素是 display 值为 inline 的元素,不产生换行,高度和宽度由元素内容决定,不能设置垂直方向的内边距和外边距。

如果希望为行内元素设置高度、宽度或垂直内外边距要怎么做呢?可以使用行内块元素。行内块元素的 displayinline-block ,是一种特殊的行内元素,它像其他行内元素一样,在行内排列,同时像块元素一样可以设置高度、宽度和边距。

块元素 行内元素 行内块元素
display block inline inline-block
默认宽度 占满上级容器宽度 由内容决定 由内容决定
默认高度 由内容决定 由内容决定 由内容决定
换行 独占一行 不换行 不换行
设置宽高 有效 无效 有效
内边距 全部有效 左右有效 全部有效
外边距 全部有效 左右有效 全部有效
[表1 块元素、行内元素、行内块元素对比]

常用的HTML标签和默认显示类型如下:

显示类型 元素 元素简介
块元素 <div> 文档分区
<footer> 页脚
<form> 表单
<h1>-<h6> 1-6级标题
<header> 页眉
<li> 列表项
<nav> 导航链接
<ol> 有序列表
<p> 段落
<table> 表格
<ul> 无序列表
行内元素 <a> 超链接
<span> 行内节
<sub> 下标
<sup> 上标
行内块元素 <button> 按钮
<img> 图像
<input> 输入框
<select> 下拉菜单
<textarea> 多行文本输入
[表2 常用HTML标签和默认显示类型]
相关推荐
moxiaoran57532 小时前
uni-app萌宠案例学习笔记--页面布局和CSS样式设置
前端·css·uni-app
要加油哦~11 小时前
css | class中 ‘.‘ 和 ‘:‘ 的使用 | 如,何时用 &.is-selected{ ... } 何时用 &:hover{...}?
前端·css
空&白16 小时前
css元素的after制作斜向的删除线
前端·css
奇舞精选16 小时前
你可能不知道但非常实用的 HTML5 元素
css
Jolyne_17 小时前
grid 实现完美的水平铺满、间隔一致的自适应布局
前端·css
西洼工作室17 小时前
【解决导航栏字体图标渲染导致文本闪烁问题】采用腾讯视频的解决方案
前端·css·css3
站在风口的猪110818 小时前
《前端面试题:CSS的display属性》
前端·css·html·css3·html5
FogLetter18 小时前
从Flex布局到Transition艺术:打造让用户尖叫的前端体验
前端·css
前端康师傅18 小时前
CSS中的继承问题
前端·css
小桥风满袖18 小时前
Three.js-硬要自学系列29之专项学习透明贴图
前端·css·three.js