zoukankan      html  css  js  c++  java
  • 在区域中填充内容

    在区域中填充内容

    页面制作过程回顾

    0. 得到设计图

    1. 划分页面区域

    HTML:结构元素

    CSS:块盒

    2. 填充区域中的内容

    HTML:文字、图片和多媒体元素等

    CSS:行盒

    图片和多媒体

    图片:img元素:

    src属性:图片路径

    alt属性:图片无法显示时使用的替代文本

    title属性:鼠标悬停时显示的文字

    视频:video元素:

    src属性:视频路径

    controls属性:【布尔属性】指定后,会显示播放控件

    XXX="XXX" 这种写法的属性叫做布尔属性

    布尔属性只有两种状态,指定和未指定

    布尔属性可以只书写属性名即可

    autoplay:【布尔属性】指定后,视频在页面上显示后会立即进入播放状态

    音频:audio元素

    src属性:音频路径

    controls属性:【布尔属性】指定后,会显示播放控件

    autoplay:【布尔属性】指定后,音频在页面上显示后会立即进入播放状态

    figurefigcaption来表示一个图片和多媒体单元

    可替换元素和非可替换元素

    可替换元素:元素的显示内容,由其属性决定,比如imgvideoaudio

    非可替换元素:元素的显示内容,由元素内容决定,绝大部分元素都是非可替换元素

    嵌入式元素

    概述

    嵌入页面

    使用iframe元素可以在页面中嵌入其他页面

    嵌入flash程序

    使用objectembed元素,可以在页面中嵌入外部资源,

    通常嵌入的是flash程序

    行盒

    行盒概述

    什么是行盒

    display属性为inline(默认值)的元素

    有哪些常见的行盒

    大部分文字元素:spanabbremistrongb

    图片和多媒体:imgvideoaudio

    理解行盒的含义

    页面的具体内容(文字、图片、多媒体)都会生成行盒

    文字:必须放置到行盒内,否则会生成匿名行盒

    图片和多媒体:默认会生成行盒,通常不要对它们的盒子类型进行改动

    页面区域中包含内容,所以块盒包含行盒

    块盒内放置行盒

    行盒内不要放置块盒

    行盒的显著特征

    行盒可被折断,因为内容可被折断换行

    可通过word-break属性设置截断位置

    同一个包含块中,连续的多个行盒水平依次排列

    空白折叠的规则仅适用于行盒内部和行盒之间

    行盒与行盒之间的距离可使用水平方向上的marginpadding进行设置

    行盒的尺寸

    行盒-可替换元素:图片和多媒体

    与块盒完全一致

    对于图片和视频,仅设置宽高中的一个时,另一个会自动按比例适应

    对于图片和视频,如果同时设置宽高,可通过object-fit属性设置适应方式

    object-fit

    含义:内容尺寸如何适应,仅用于可替换元素

    不可继承

    默认值:fill

    取值

    fill:无视宽高比例缩放,充满设置的尺寸

    contain:保持宽高比例缩放,并且保证不超出内容盒

    cover:保持宽高比例缩放,充满设置的尺寸,某些部分会被隐藏

    none:不进行任何缩放

    行盒-非可替换元素:文字类元素

    widthheight无效

    垂直方向上的marginborderpadding不占据布局空间

    可使用line-height设置一行的文字高度

    line-height属性

    含义:行高

    可继承

    默认值:normal

    取值

    normal:使用浏览器默认行高

    20px:固定值,20个像素的行高

    2em:相对值,按当前元素的字体大小计算,计算后被子元素继承

    200%:同2em

    2【推荐】:按当前元素的字体大小计算,计算前的值被子元素继承

    line-height属性可用于单行文字垂直居中

    行盒的位置

    行盒的定位体系必定的常规流

    浮动和绝对定位的盒子会自动变成块盒

    行盒在包含块中,避开浮动和常规流盒子

    包含行盒的块盒,可使用text-align调整行盒在它内部的对齐方式

    行盒之间的对齐方式,可使用vertical-align调整【了解】

    每一个行盒以及包含行盒的元素,会在其内部创建多根参考线

    行盒默认使用基线对齐【vertical-align:baseline】:将自己的基线与包含块的基线对齐

    可调整vertical-align属性值,选择其他对齐方式

    通常情况下

    可使用vertical-align调整图片和其前后文字的对齐方式

    可使用vertical-align消除行盒与外部块盒底部的空隙

    行块盒

    什么是行块盒

    display属性值为inline-block的元素生成的盒子

    行块盒在某些方面表现的像行盒,某些方面表现的像块盒

    与行盒的区别

    行块盒内部可以放块盒,行盒不行

    行块盒的所有盒模型尺寸都是有效的,而行盒不是

    行盒垂直方向上的marginborderpadding的尺寸不占据空间

    行盒不能设置宽高

    行块盒通常用于宽度自动的水平居中

  • 相关阅读:
    [模板] 循环数组的最大子段和
    [最短路][几何][牛客] [国庆集训派对1]-L-New Game
    [洛谷] P1866 编号
    1115 Counting Nodes in a BST (30 分)
    1106 Lowest Price in Supply Chain (25 分)
    1094 The Largest Generation (25 分)
    1090 Highest Price in Supply Chain (25 分)
    树的遍历
    1086 Tree Traversals Again (25 分)
    1079 Total Sales of Supply Chain (25 分 树
  • 原文地址:https://www.cnblogs.com/zai1/p/10995661.html
Copyright © 2011-2022 走看看