行盒子和嵌套元素
Posted boring333
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了行盒子和嵌套元素相关的知识，希望对你有一定的参考价值。
图片：img元素
src 属性：图片路径 alt 属性：图片无法显示时使用的替代文字 title （全局属性）：鼠标悬停时显示的文字 全局属性：所有元素通用的属性 title 、 lang （该元素内使用的是什么自然语言）
视频：video元素
src 属性：视频路径 （推荐mp4） controls 属性：【布尔属性】指定后，会显示播放精简 autoplay ：【布尔属性】指定后，视频在页面显示后立即进入播放状态 muted ：静音 某些新浏览器强制提升用户体验 自动播放时 需设置该属性 loop ：【布尔属性】指定后，视频将循环播放
音频：audio元素
src 属性：音频路径 （推荐mp3） controls 属性：【布尔属性】指定后，会显示播放精简 autoplay ：【布尔属性】指定后，视频在页面显示后立即进入播放状态 muted ：静音 某些新浏览器强制提升用户体验 自动播放时 需设置该属性 loop ：【布尔属性】指定后，视频将循环播放
用figure和figcaption来表示一个图片和多媒体单元
嵌入式元素
概述：嵌入式元素用于向页面中嵌入外部资源 img area map 向网页嵌入图片资源 video 向网页嵌入视频资源 audio 向网页嵌入音频资源 embed object 向网页嵌入flash程序 data 相当于路径 type 嵌入资源是什么类型 MIME格式 iframe 向网页嵌入图另一个页面 frameset 嵌入页面 废弃
行盒
行盒概述
什么是行盒： display 属性为 inline （默认值）的元素 有哪些常见的行盒 大部分文字元素：span、abbr、em、i、strong、b、 图片和多媒体：img、video、audio
理解行盒的含义： 页面的具体内容（文字、图片、多媒体）都会生成行盒 文字：必须放到行盒内，否则会生成匿名行盒 图片和多媒体：默认会生成行盒，通常不要对他们的盒子类型进行改动
页面区域中包含内容，所以块盒包含行盒 块盒内放置行盒 行盒内不要放置块盒 块级元素可以包含行级元素，而行级元素不可以包含块级元素，a元素除外旧标 准 新标准完全抛弃此规则，新–标题中不要包含段落，段落中不要包含区域或标 题
行盒的显著特征
行盒可被折断，因为内容可以被折断换行 可通过 word-break 属性设置折断 同一个包含块中，连续的多个行盒水平依次排列
空白折叠的规则仅适用于行盒内部和行盒之间 行盒与行盒之间的距离可使用水平方向上的margin和padding进行设置
行盒的尺寸
行盒可替换元素：图片和多媒体
与块盒完全一致 对图片和视频，仅设置宽高中的一个时，另一个会自动按比例适应 对于图片和视频，如果同时设置宽高，可通过 object-fit 属性设置适应方式 object-fit 不可继承 含义：内容尺寸如何适应，仅用于可替换元素 默认值 fill ：无视宽高比例缩放，充满设置的尺寸 取值： contain ：保持宽高比例缩放，并且保证不超出内容盒 cover ：保持宽高比例缩放，充满设置的尺寸，某些部分会被隐藏 none ：不进行任何缩放
非可替换元素：文字类元素
width和height无效（宽高取决于内容大小） 垂直方向上的margin、border、padding不占据布局空间 可使用 line-height 设置一行的文字高度 line-height 属性 含义：行高 可继承 默认值： normal ：使用浏览器默认行高 取值： 20px，固定值，20个像素的行高 2em：相对值，按当前元素的字体大小计算，计算后被元素 继承 200%：同2em 2【推荐】：按当前元素的字体大小计算，计算前的值被子 元素继承
line-height 属性可用于单行文字垂直居中
行盒的位置
行盒的定位体系必定的常规流 浮动和绝对定位的盒子自动变为块盒 行盒在包含块中，避开浮动和常规流盒子 包含行盒的块盒，可使用 text-align 调整行盒在它内部的对齐方式 行盒之间的对齐方式，可使用 vertical-align 调整【了解】 每一个行盒以及包含行盒的元素，会在其内部创建多根参考线 行盒默认使用极限对齐 vertical-align：baseline ：将自己的极限与包含块的基线 对齐 通常情况下
可使用 vertical-align 调整推按和其前后文字的对齐方式 可使用 vertical-align 消除行盒与外部块盒底部的空隙
行块盒
什么是行块盒 display 属性值为 inline-block 元素生成的盒子 行块盒在某些方面表现的像行盒，某些方面表现的像块盒 与行盒的区别 行块盒内部可以放块盒，行盒不行 行块盒的所有盒模型尺寸都是有效的，而行盒不行 行盒垂直方向上margin、border、padding的尺寸不占据空间 行高不能设置宽高
行块盒通常用于宽高自动的水平居中
行盒常见开发场景
1. 多个盒子在一行排列，谨慎使用行盒，因为行盒之间有空白折叠 2. 单行文字垂直居中，可设置行高为包含块的高度 3. 给某一个区域统一设置行高时，若要满足不同的字体大小，建议设置无单位的行高，同常直 接给body元素设置即可 4. display：block；float：left； 可简化为 float：left ，因为浮动和绝对定位元素 自动为块盒 5. 当需要调整行盒之间的垂直对齐方式时，可以通过 vertical-align 设置 6. 图片底部出现白边，图片设置为块盒或调整图片的 vertical-align 属性 7. 某个元素宽度适应内容，同时需要一些垂直方向上的尺寸，同时需要居中，可以考虑将该元 素设置为行块盒，设置父元素的 text-align:center
块级格式化上下文
Block Formatting Context 简称 BFC IFC Inline Formatting Context
他是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局
常规流块盒在水平方向上，必须撑满包含块 常规流块盒在包含块的垂直方向上依次摆放 常规流块盒若外边距无缝相邻，则进行外边距合并 常规流块盒的自动高度和摆放位置，无视浮动元素
BFC 渲染区域 这个区域由某个html元素创建，以下元素会在其内部创建BFC区域：
根元素 意味着 <html> 元素常见的BFC区域，覆盖了网页中所有的元素 浮动和绝对定位元素 overflow 不等于 visible 的块盒
弹性盒 表格 display：table
不同的BFC区域，他们进行渲染时互不干扰 创建BFC的元素，隔绝了它内部和外部的联系，内部的渲染不会影响到外部 具体规则：
创建BFC的元素，它的高度需要计算浮动元素（解决浮动高度坍塌） 创建BFC元素，它的边框盒不会与浮动元素重叠 创建BFC的元素，不会和它的子元素进行外边距合并
页面制作过程回顾
0. 得到设计图
1. 划分页面区域
HTML：结构元素
CSS：块盒
2. 填充区域中的内容
HTML：文字、图片和多媒体元素等
CSS：行盒
图片和多媒体
图片：img元素
src属性：图片路径
alt属性：图片无法显示时使用的替代文本
title属性：鼠标悬停时显示的文字
视频：video元素
src属性：视频路径
controls属性：【布尔属性】指定后，会显示播放控件
XXX="XXX" 这种写法的属性叫做布尔属性
布尔属性只有两种状态，指定和未指定
布尔属性可以只书写属性名即可
autoplay：【布尔属性】指定后，视频在页面上显示后会立即进入播放状态
音频：audio元素
src属性：音频路径
controls属性：【布尔属性】指定后，会显示播放控件
autoplay：【布尔属性】指定后，音频在页面上显示后会立即进入播放状态
用figure和figcaption来表示一个图片和多媒体单元
可替换元素和非可替换元素
可替换元素：元素的显示内容，由其属性决定，比如img、video、audio
非可替换元素：元素的显示内容，由元素内容决定，绝大部分元素都是非可替换元素
嵌入式元素
概述
嵌入页面
使用iframe元素可以在页面中嵌入其他页面
嵌入flash程序
使用object或embed元素，可以在页面中嵌入外部资源，
通常嵌入的是flash程序
以上是关于行盒子和嵌套元素的主要内容，如果未能解决你的问题，请参考以下文章