HTML与CSS基础教程：边距、背景与盒模型解析

需积分: 3 78 浏览量更新于2024-11-01 收藏 382KB PDF 举报

"网页html&css学习笔记整理" 在网页开发中，HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）是两个至关重要的技术。HTML负责网页的内容结构，而CSS则负责网页的样式和布局。下面我们将深入探讨HTML的基础组成以及CSS的运用。 HTML基础： HTML由一系列的标签组成，这些标签定义了网页的不同部分，如标题（`<h1>`至`<h6>`）、段落（`<p>`）、链接（`<a>`）、图像（`<img>`）、列表（`<ul>`和`<ol>`）等。这些元素通过嵌套来构建网页的层次结构。例如，一个简单的网页可能包含一个`<body>`标签，其中包含一个`<header>`、一个`<main>`内容区域和一个`<footer>`。 CSS边缘控制： CSS提供了对元素边距的控制，包括`margin`、`padding`、`border`以及`background`属性。`margin`用于设置元素与周围元素的距离，可以分别设置上（`top`）、下（`bottom`）、左（`left`）和右（`right`）四个方向的边距。例如，`margin: 0 auto;`可以让元素水平居中。`padding`则是元素内容与边框之间的距离，同样可分别设定。`border`允许设置边框宽度、样式和颜色，如`border: 1px solid black;`。 CSS背景：背景属性包括`background-color`、`background-image`、`background-repeat`、`background-position`和`background-attachment`。`background-color`设置元素的背景色，`background-image`设置背景图片。`background-repeat`控制图片是否平铺，可以是`repeat`（水平和垂直平铺）、`repeat-x`（只水平平铺）、`repeat-y`（只垂直平铺）或`no-repeat`（不平铺）。`background-position`用来定位背景图片的位置，可以使用百分比或具体像素值。`background-attachment`决定背景图片是否随页面滚动，`scroll`是默认值，`fixed`则使背景固定在视口。盒模型：在CSS中，盒模型描述了元素占用空间的方式，包括内容区（content）、内边距（padding）、边框（border）和外边距（margin）。`Div`容器类通常用CSS进行布局，通过设置`position`属性来调整元素的定位方式，如`absolute`（绝对定位，相对于最近非static祖先元素定位）、`relative`（相对定位，相对于元素本身原始位置）、`static`（默认，按正常文档流排列）和`fixed`（固定定位，相对于浏览器视口定位）。通过这些基本概念和属性，开发者可以创建出丰富多样的网页布局和样式。理解并熟练掌握HTML和CSS，对于网页设计和开发至关重要。在实际应用中，还应考虑响应式设计、浏览器兼容性以及性能优化等问题，以确保网页在各种设备和环境中都能良好显示。

网页

html&css

学习

笔记整理

amarginbott omtoprightleft

arg

margin

：，则可用＝＝＝若

＝样式：边距













bott ominm

topinm

rightinm

leftinm

css

注：任何元素都可以有背景色或背景图片，不只是 body 和 div 元素。

Background：背景色——background-color

背景图片——background-image

背景图片重复——background-repeat

背景图片位置——background-position

背景图片依附——background-attachment

注：多个写在一起时，用空格隔开而不是逗号

如：background：＃9FC url(jimmy.jpg) repeat-x center right fixed

背景色 background-color：#9FC(=#99FFCC) rgb(255,255,225) rgb(10%,10%,20%)

背景图片 background-image:url(jimmy.jpg) 注：url 内的地址不需要引号“jimmy.jpg” X

背景图片重复 background-repeat:repeat repeat-x repeat-y no-repeat

背景图片位置 background-position:center right (=50%(x 轴) 100％（y 轴）)

注：这里的百分数以元素内容占据的空间为标准（有些以视口为单位）

背景图片依附 background-attachment: (只能用于 body 中) scroll（默认） fixed

（fixed：用于固定于视口，不随窗口滚动）

盒模型：填充（padding）、边距（margin）、边框（border）、背景（background）

边框（border）在填充（padding）和边距（margin）之间，且填充（padding）的

颜色是本类元素的背景（background）

Div 容器类：

Css 属性：position：绝对（absolute）、相对（relative）、静态（static 默认）、固定（fixed）

注：当使用 position 后，同时增加了属性：left、right、top、bottom

absolute（绝对）：元素从文档流中移出即：该 div 内容不参与正常文档的排版，随意放置

位置

relative（相对）：不把元素从文档流中移出保留其正常文档流的位置，且以该位置为偏移标

准

static（静态）：默认

fixed（固定）：与背景中的 background-attachment 属性效果一样

下载后可阅读完整内容，剩余6页未读，立即下载

仍在奔跑的男人

粉丝: 2
资源: 4

HTML与CSS基础教程：边距、背景与盒模型解析

HTML&CSS 设计与构建网站_PDF电子书下载 带书签目录 完整版

学成在线静态网页html&css

Head first HTML&CSS;.pdf

HTML&CSS学习：构建网页结构与美化

2020寒假前端小白HTML&CSS学习实战与心得

CodeAcademy HTML&CSS学习笔记：基础与样式指南

PC端HTML&CSS学习笔记详解：从基础到实战应用

html&css&网页设计维护入门

html&&xml&&css ppt

Web设计与前端开发秘籍：HTML & CSS 设计与构建网站 [HTML & CSS: Design and Build Websites]

最新资源

HTML&CSS 设计与构建网站_PDF电子书下载带书签目录完整版