HTML学习笔记：盒子模型、浮动与响应式布局

需积分: 0 162 浏览量更新于2024-08-05 收藏 79KB DOC 举报

"HTML笔记精彩精彩..." HTML，全称HyperText Markup Language，是一种用于创建网页的标准标记语言。在本笔记中，我们将探讨HTML的基础知识，包括盒子模型、文字浮动、路径、样式应用以及元素类型等。首先，盒子模型是HTML布局的基础，它包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。通过调整这些属性，我们可以控制元素的大小和位置。文字浮动(float)常用于让文本环绕图像或实现多列布局。在CSS中，`float`属性可以设置为`left`或`right`，让元素向左或向右浮动，以便与其他元素对齐。需要注意的是，浮动元素会脱离正常文档流，可能引发布局问题，此时可以使用`clear:both`来清除浮动。路径是HTML中链接和引用资源的关键。相对路径是相对于当前文件的路径，而绝对路径则是从根目录开始的完整路径。在引用样式时，我们有三种方式：外部样式表（放在`<head>`的`<style>`标签内）、内部样式（直接写在HTML元素内）和内联样式（写在元素的`style`属性中）。优先级顺序为：`!important` > 内联样式 > 外部样式（ID选择器）> 类选择器（class）> 标签选择器（后出现的优先）。 HTML中的元素可以分为块元素（如`div`）和内联元素（如`span`）。块元素占据整个宽度，可设置高度和宽度，而内联元素则只占据内容的宽度，不设置高度。为了实现某些布局效果，可以使用`float`让块元素在一行显示。但`float`会导致元素脱离文档流，为此需要使用`clear:both`来恢复正常的布局。响应式布局是现代网页设计的重要概念，它使得网站能在不同设备上呈现适应性的界面。通过使用百分比单位（特别是对于高度），我们可以创建自适应的布局。`display`属性在转换元素类型时非常有用，例如，将内联元素变为块元素（`display:block`）或行内块元素（`display:inline-block`），或者反之。 `position`属性用于定位元素，设置为`absolute`或`fixed`会让元素脱离文档流并根据其祖先元素或浏览器窗口定位，而`relative`则相对自身位置偏移。`position`属性的使用需谨慎，因为它可能导致布局复杂化。总结起来，HTML和CSS是构建网页的基石，理解盒子模型、文字浮动、路径、样式选择器、元素类型转换以及响应式布局原理对于前端开发者至关重要。通过不断学习和实践，我们可以创建出美观且功能强大的网页。

蓝胖子20

粉丝: 1
资源: 7

HTML学习笔记：盒子模型、浮动与响应式布局

Html常用标签部分笔记摘要

horrylala.github.io:一些笔记，一些想法。 迎宾公关

jasperReport笔记

web前端大作业-精彩BLOG聚合响应式网页模板-界面适配移动设备-HTML源码.zip

web前端大作业-精彩创意日志展示响应式网站模板-界面适配移动设备-HTML源码.zip

JavaScript学习笔记

three基础入门笔记1

斯坦福学习笔记 CS229

笔记本屏幕亮度调节工具

前端jquery部分很精彩

最新资源

horrylala.github.io:一些笔记，一些想法。迎宾公关