行盒子和嵌套元素

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程序

以上是关于行盒子和嵌套元素的主要内容,如果未能解决你的问题,请参考以下文章

盒子模型

网页设计css盒子模型代码

7.28 盒子模型

Web开发·期末不挂之第五章·CSS盒子模型(盒子模型各属性&行级元素和块级元素&导航栏的实现)

php中的box盒子意思

CSS盒子理论?