- 博客(16)
- 收藏
- 关注
原创 DOM:网页交互的核心
在前端开发中,DOM(Document Object Model,文档对象模型)就像是一把神奇的钥匙,开启了我们与网页内容进行动态交互的大门。
2024-11-03 17:28:55
1034
原创 JavaScript语法基础(函数,对象,常用类Array,String,Math和Date)
通过对 JavaScript 中函数、对象以及常用内置类 Array、String、Math 和 Date 的学习,我们已经初步掌握了一些在 JavaScript 编程中经常会用到的基础语法知识。
2024-10-30 21:56:15
806
原创 CSS综合练习
当使用浮动来实现多行多列布局时,与两列布局类似,同样会面临父元素高度塌陷的问题。因为浮动元素脱离了文档流,父元素无法准确计算其内部元素所占据的高度。并且在开始进行多行多列布局之前,要仔细研究需求文档和设计稿,清楚了解每一列、每一行所承载的内容类型、大致尺寸范围以及它们之间的相互关系(如间距、对齐方式等)。这有助于准确选择合适的布局方式和确定具体的属性设置。
2024-10-29 17:38:54
171
原创 CSS的两列布局、三列布局和多行多列布局
CSS 布局是网页设计中常见的一种布局方式,用于将页面内容划分为主要的列区域和行区域.container:after。
2024-10-29 17:03:02
198
原创 CSS浮动的高度塌陷问题及解决方案
当一个父元素包含了浮动的子元素时,由于浮动元素脱离了文档流,父元素会无法正确计算其内部元素所占据的高度,从而导致父元素的高度塌陷为 0(如果父元素没有其他非浮动的内容来撑开高度的话)。:可以在父元素的末尾添加一个空的div元素,并为其设置属性,来清除子元素浮动带来的影响,使父元素能够正确计算高度。但这种方法会增加额外的 HTML 标记。:afterdiv。
2024-10-29 16:52:13
284
原创 css浮动
当一个图像或其他元素设置为浮动后,周围的文本内容会自动环绕在该浮动元素的周围,就如同在排版中文字环绕图片的效果一样。CSS 浮动(Floating)是一种用于控制网页元素布局的重要属性,当一个元素被设置为浮动时,它会从正常的文档流中脱离出来,向左或向右移动,直到它的外边缘碰到包含它的父元素的内边缘或者碰到另一个浮动元素的外边缘。元素,如果不设置浮动,它们会在垂直方向上依次堆叠;浮动最常见的应用就是让多个块状元素在一行内水平排列。none:默认值,元素不进行浮动,按照正常的文档流进行排列。
2024-10-29 16:46:29
213
原创 css固定定位
在 Web 前端中,固定定位是 CSS 定位机制中的一种,它具有以下特点和应用场景:当一个元素被设置为固定定位时,它是相对于浏览器的可视窗口(viewport)来进行定位的,而不是相对于它在文档流中的原始位置或者父元素等。无论页面如何滚动,该元素始终会保持在相对于浏览器视口的固定位置上。固定定位的元素会脱离正常的文档流。这意味着它在页面布局中不再占据原本在文档流中的空间,其他未脱离文档流的元素会在布局时忽略该固定定位元素原本所占据的位置,就好像它不存在于文档流中一样。可以通过topbottomleft。
2024-10-29 16:35:06
776
原创 盒子的绝对定位
通过 `top`、`right`、`bottom` 和 `left` 属性设置位置:可以使用这些属性来指定元素距离其定位参照点的偏移量。相对于最近的已定位祖先元素:当一个元素使用绝对定位时,它会相对于最近的已定位(`position` 值不为 `static`)的祖先元素进行定位。在这个示例中,`div` 使用了绝对定位,并且它的定位参照点是最近的已定位祖先元素,即外层 `div`(设置了 `position: absolute`)。相邻的元素会忽略它的存在,按照正常的文档流进行排列。
2024-10-13 18:25:57
200
原创 盒子的相对定位
1. 相对于自身原始位置:使用相对定位的元素会相对于它在正常文档流中的原始位置进行偏移。偏移后,元素仍然占据其原始位置的空间。2.可以影响层级(z-index):当设置了 `position: relative` 后,可以为元素添加 `z-index` 属性,从而改变元素的层级顺序,控制其前后叠放关系。3. 不脱离文档流:即使元素的位置被调整,它仍然保留在文档流中,其占据的空间不变。盒子的相对定位(`position: relative`)是CSS中的一种定位方式,用于调整元素在正常文档流中的位置。
2024-10-13 18:14:56
221
原创 html文档流
2. 缺乏灵活的响应式设计:虽然现代 CSS 可以提供响应式设计的功能,但 HTML 本身的文档流在处理不同屏幕尺寸上的布局调整时并不具备足够的灵活性,需要借助媒体查询等技术。1. 布局控制有限:HTML 的文档流是从上到下、从左到右的线性布局方式,对于复杂的页面布局(如多列布局、重叠元素等)难以实现精确的控制,往往需要配合 CSS 来进行布局调整。6. 样式控制依赖外部 CSS:HTML 本身并不具备丰富的样式控制功能,复杂的布局需要通过 CSS 来实现,增加了文档的复杂度和维护成本。
2024-10-13 18:01:49
342
原创 css常用声明
属性设置字体的粗细,包含normal、bold(加粗)、bolder(更粗),lighter(更加细),100,200,300,400,500,600,700,800和900多个属性值。属性来设置字体的倾斜,参数normal为“正常”,italic为“斜体”和oblique为”倾斜“。绝对单位),pr(绝对单位),em(相对单位),%(相对单位)属性设置字体的大小,其值可以是绝对值也可以是相对值。字体类型,字体大小,字体粗细,字体倾斜。:文本块首行文本的缩进程度。:文本的水平对齐方式。
2024-10-12 17:40:57
266
原创 运用HTML5网页的结构元素进行布局的练习
学会HTML5的结构元素,就可以构建网页布局,使Web设计和开发变得更加容易,并且对数据挖掘服务更加友好。
2024-10-08 21:49:55
364
原创 html的基本骨架标签,段落换行水平线标签和文本标签
在网页中要把文字有条理地显示出来,离不开段落标记,就如同用户平常写文章一样,整个网页也可以分为若干个段落,而段落的标签就是。段落标签是 HTML 格式中特有的段落元素,在 HTMI. 格式里不需要在意文章每行的宽度,不必担心文字是不是太长而被截掉,它会根据窗口的宽度自动转到下一行。放在任意一行中的任意位置都会使该行从该位置换行,如果放在一行的末尾,则下一行开始的文字、图像、表格等仍在下一行显示,而又不会在行与行之间留下空行,即是强制文本换行。设置线段是否显示阴影。
2024-09-08 23:03:33
378
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人