企业做网站需要提供什么资料,学校网站建设如何分类,网站的设计与应用论文,宁波自己建网站文章目录 参考环境文档流概念三大显示模式 内联元素概念常见的内联元素宽高由内容决定 块级元素概念常见的块级元素宽度受容器影响#xff0c;高度受内容影响 内联块级元素概念常见的内联块级元素折中方案 设置元素的显示模式display 属性内联元素与块级元素的切换为什么要通过… 文章目录 参考环境文档流概念三大显示模式 内联元素概念常见的内联元素宽高由内容决定 块级元素概念常见的块级元素宽度受容器影响高度受内容影响 内联块级元素概念常见的内联块级元素折中方案 设置元素的显示模式display 属性内联元素与块级元素的切换为什么要通过 display 来修改元素的显示模式 参考
项目描述搜索引擎Bing、GoogleAI 大模型文心一言、通义千问、讯飞星火认知大模型、ChatGPTMDNMDN Web DocsW3School在线教程
环境
项目描述Chrome118.0.5993.88正式版本 64 位操作系统Windows 10专业版
文档流
概念
文档流是指网页上元素的 默认布局顺序。想象你有一本书这本书中的内容是 从上到下从左到右 顺序阅读的。同样的HTML文档的元素默认也是从上到下块级元素会垂直排列内联元素会水平排列。 在不使用 CSS 的情况下浏览器会 按照文档流的规则来摆放元素。当我们使用CSS 中的 float、position、flexbox、grid 等属性时元素可能会 脱离标准的文档流形成一个新的布局方式。但为了理解这些高级布局技巧首先要掌握基本的文档流概念。 三大显示模式
在 CSS 中显示模式 指的是 HTML 元素在文档流中 如何被渲染和布局的一种特性不同的显示模式决定了元素如何占据空间以及与其他元素相互交互的方式。CSS 中存在 三种十分常见的显示模式即块级元素内联元素内联块级元素。
内联元素
概念
想象你正在读 一本书你的目光滑过每一个字母、每一个词连续不断。内联元素就像这些字词它们排成一行直到遇到 边界页面边缘才会换行。内联元素之间没有自动的换行它们的 宽高由内容决定并不接受我们设置的宽高值。 常见的内联元素
内联元素可以嵌套在块级元素中或者与其他内联元素一起使用每个元素都有其特定的语义和样式可以根据需要自由组合以创建所需的网页内容。
内联元素功能描述a创建超链接用于导航到其他页面或资源。span常用于对内联元素进行分组便于通过 CSS 设置样式或用于放置文本。img用于插入图像。br起换行作用。sub用于标记需要作为下标的文本通常用于化学式和数学公式。sup用于标记需要作为上标的文本通常用于指数和脚注。
宽高由内容决定
在 CSS 中内联元素的宽度和高度通常由其包含的内容决定这是因为内联元素的主要特点是在文本中水平排列不会独占一行并且 只占据其包含的内容所需的空间。这种自动适应内容的行为使内联元素在 包围文本等内容 时非常灵活。元素会随着内容的变化而自动调整大小而 不需要手动指定固定的宽度和高度这 在处理不同长度的文本或可变内容时非常有用。 举个栗子
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title宽高由内容决定/title
/head
body!-- 由于使用内联元素包裹文本故多个内联元素将显示在一行中仅在当前行已满才发生换行。--a hrefhttps://baike.baidu.com/item/%E4%B9%9F%E6%98%AF%E5%BE%AE%E4%BA%91/3056682《也是微云》/aspan也是微云/spanspan也是微云过后月光明。/spanspan只不见去年得游伴/spanspan也没有当日的心情。/span!-- 尝试通过行内元素设置元素的宽高由于行内元素无法设置宽高故 style 属性中的与宽高相关的 CSS 样式将不会生效--span stylewidth: 100px;height: 100px;background-color: dodgerblue;不愿勾起相思/spanspan不敢出门看月。/spanspan偏偏月进窗来/spanspan害我相思一夜。/span/body
/html执行效果
在浏览器中访问上述 HTML 文档将得到如下类似内容 块级元素
概念
想象一个 书柜每一个格子代表一个块级元素。每一个格子独立占据空间从左到右从上到下。块级元素通 常用于构建页面的主体结构它们会 自动填满当然你也可以显示设置此类元素的宽度它们所在的 容器宽度父元素宽度而 高度则由内容或设定的样式所决定。 常见的块级元素
块级元素功能div常用于元素的分组便于布局控制及样式设置。p用于文本段落。h1~6用于创建标题数字越小级别越高。section表示文档中的一个区域或部分有语义化的作用。article表示文档中的独立内容通常是文章或新闻等。header用于定义文档或区域的页眉通常包含标题和导航。footer用于定义文档或区域的页脚通常包含版权信息等。nav用于包含导航链接通常位于页眉或页脚中。aside用于定义侧边栏内容通常与主要内容分开显示。
宽度受容器影响高度受内容影响
块级元素通常会 自动扩展以填充其容器的可用宽度。如果你 不显式地设置块级元素的宽度它将占据其容器的全部可用宽度。这意味着块级元素的宽度受到其父容器的宽度限制。如果你将块级元素放入一个较窄的容器它的宽度将 收缩以适应容器而如果放入一个更宽的容器它的宽度将 扩展以填满容器。 块级元素的高度 通常由其内部内容的高度决定。这意味着块级元素的高度将根据其包含的文本、其他元素、内边距和边框等内容的高度来 自动调整。如果没有显式设置高度块级元素的高度将根据内容动态调整。 举个栗子
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title宽度受容器影响高度受内容影响/title
/head
body!-- 位于最外侧的容器 --div idcontainer stylewidth: 120px;!-- 包裹实际内容的 div 标签 --divdiva hrefhttps://baike.baidu.com/item/%E4%B9%9F%E6%98%AF%E5%BE%AE%E4%BA%91/3056682《也是微云》/a/div也是微云也是微云过后月光明。只不见去年得游伴也没有当日的心情。不愿勾起相思不敢出门看月。偏偏月进窗来害我相思一夜。/div/div/body
/html执行效果 内联块级元素
概念
内联块级元素 既有块级元素的特点允许你设置宽和高同时也 有内联元素的特性它们并排显示并在必要时换行。因此内联块级元素为我们提供了一种灵活的布局方式兼具块级和内联元素的优点。
常见的内联块级元素
元素功能描述img用于在网页中嵌入图片button创建一个点击按钮
折中方案
内联块级元素是内联元素与块级元素之间的一种 折中方案该元素既允许同内联元素一般 并排显示在必要时换行还允许为这些元素 设置样式以规定其宽高。
举个栗子
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title这种方案--内联块级元素/title
/head
body!-- 并排显示 --buttonH/buttonbuttone/buttonbuttonl/buttonbuttonl/buttonbuttono/buttonbutton /buttonbuttonW/buttonbuttono/buttonbuttonr/buttonbuttonl/buttonbuttond/button!-- 必要时换行 --div stylewidth: 120px;buttonH/buttonbuttone/buttonbuttonl/buttonbuttonl/buttonbuttono/buttonbutton /buttonbuttonW/buttonbuttono/buttonbuttonr/buttonbuttonl/buttonbuttond/button/div!-- 可设置宽高 --button stylewidth: 30px;height:50px;H/buttonbuttone/buttonbuttonl/buttonbuttonl/buttonbuttono/buttonbutton /buttonbutton stylewidth: 30px;height:50px;W/buttonbuttono/buttonbuttonr/buttonbuttonl/buttonbuttond/button/body
/html执行效果 设置元素的显示模式
display 属性
在 CSS 中display 属性用于 控制 HTML 元素在页面中的显示方式可以使元素以不同的方式进行显示。
display 的常用属性值
属性值描述示例元素block元素将以块级元素的方式呈现通常占据父容器的整个宽度独占一行。div, p, h1inline元素以内联元素的方式呈现不会强制换行仅占据其内容所需的宽度。span, a, stronginline-block元素以内联元素的方式呈现但允许设置宽度、高度、内外边距等。通常用于创建水平排列的块级元素例如 导航菜单项。none元素将于页面中消失不占据页面空间。常用于通过 JavaScript 来控制元素的显示与隐藏。
内联元素与块级元素的切换
通过为 HTML 元素设置 display 属性将能够控制 HTML 元素的显示模式如 将内联元素以块级元素的显示方式进行渲染。对此请参考如下示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title宽高由内容决定/title!-- 通过 style 标签将带有 block ID 属性的元素以块级元素的显示方式进行渲染--style#block {display: block;width: 200px;height: 50px;background-color: salmon;}/style/head
bodya idblock hrefhttps://baike.baidu.com/item/%E4%B9%9F%E6%98%AF%E5%BE%AE%E4%BA%91/3056682《也是微云》/aspan也是微云/spanspan也是微云过后月光明。/spanspan只不见去年得游伴/spanspan也没有当日的心情。/spanspan stylewidth: 100px;height: 100px;background-color: dodgerblue;不愿勾起相思/spanspan idblock不敢出门看月。/spanspan idblock偏偏月进窗来/spanspan idblock害我相思一夜。/span/body
/html执行效果
通过为 span 标签设置 display: block; 样式即使是内联元素也具有了块级元素的特性。 为什么要通过 display 来修改元素的显示模式
在 CSS 中虽然你可以通过使用具有特定显示模式的元素来达成目标但 display 属性提供了更大的 灵活性 与 可维护性。
优点描述简化样式控制使用 display 属性可以轻松地在同一个元素上切换不同的显示模式而 不必创建多个具有不同显示模式的元素。使元素符合语义要求HTML 应该关注文档的结构和语义而不应过多地关注样式和布局。通过使用 display 属性可以确保 HTML 保持语义上的清晰因为元素的 显示方式可以在样式表中进行控制而不是通过元素来实现样式。
