文档流与元素显示方式信息安全技术应用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《前端技术开发》