基本信息
文件名称:Web前端开发技术项目教程(HTML5 CSS3 JavaScript)(微课版) 课件 7.1.2知识点1:文档流与元素显示方式.pptx
文件大小:13.06 MB
总页数:15 页
更新时间:2025-05-28
总字数:约1.45千字
文档摘要

文档流与元素显示方式信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》

前端技术开发知识储备文档流1块级元素与行内元素2调整元素大小3元素显示方式4

01文档流前端技术开发

文档流前端技术开发01文档流的概念文档流又称标准文档流,是网页文档中可显示元素所占用的位置以及排列的方式。按照网页代码出现的位置从上到下,从左到右进行显示,这也是浏览器解析网页文档默认的显示方式。上下排列左右排列

02块级元素与行内元素前端技术开发

块级元素前端技术开发02什么是块级元素块级元素自占一行,在元素前后带有换行符,块级元素之间是上下显示。默认情况下,宽度与父元素同宽,高度根据内容而定,没有内容,高度为0。它们一般做为容器、盒子使用。常见块级元素:p、h1~h6、div(层)。

行内元素前端技术开发02什么是行内元素行内元素在一行内从左往右依次排列。默认情况下,宽度和高度都根据内容自动计算而定,width属性和height属性不起作用。常见行内元素:span、a。

03调整元素大小前端技术开发

调整元素大小前端技术开发03设置元素宽度的语法:设置元素高度的语法:width:百分比|长度height:百分比|长度CSS中调整块级元素的大小,包括宽度和高度。说明:HTML中表示长度的单位,常用的有:像素(px),em(相对于当前字体尺寸的单位),rem等。百分比表示与该元素的父元素为参考。

h1,a{ width:200px; height:100px;}调整元素大小03设置标题和超链接的大小块级元素和行内元素设置大小块级元素(h1)按照width和height属性调整大小。行内元素(a)超链接元素设置大小不起作用,仍然是自适应大小。

04元素显示方式前端技术开发

元素显示方式前端技术开发04display属性设置元素显示方式。在实际网页排版布局中,可以遵循网页元素默认的显示方式,也可以使用display属性改变元素的显示方式。属性值描述none元素不显示。block块级元素。inline行内元素。inline-block行内块级元素。inline-table外面是“内联盒子”,里面是“table盒子”。table块级表格。table-row表格行。table-cell表格单元格。list-item为元素内容生成一个块型盒,随后再生成一个列表型的行内盒。flex弹性盒子display属性取值

元素显示方式前端技术开发04设置超链接元素的显示方式:独占一行,可设置大小一行显示多个,可设置大小a{display:block;width:100px;height:50px;}a{display:inline-block;}将超链接设置为按块级元素显示将超链接设置为行内块级元素显示

总结前端技术开发网页元素默认的显示方式,默认样式。不同的元素显示方式和默认样式不同。比如:块级元素:独占一行。上下排列。可以设置大小。行内元素:一行可显示多个。左右排列。无法控制大小。文档流的概念01display属性的使用方式和取值。它可以控制元素以块级或行内元素的显示方式显示。元素显示方式02

感谢观看信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》