跳至主要內容
盒子模型

CSS的盒子模型是网页布局的基础概念,用来描述一个HTML元素在页面中占用的空间。每个元素都可以被看作是一个矩形的盒子,盒子模型定义了元素的内容区域以及围绕它的边距边框内边距。理解盒子模型对于准确控制元素的布局至关重要。

盒子模型的组成

一个标准的盒子模型包含以下几个部分:

  • 内容区域(Content):元素的实际内容,如文本、图片、表单元素等。它的尺寸由 widthheight属性决定。
  • 内边距(Padding):内容区域与边框之间的空间,用来控制内容与边框的距离。内边距不会影响元素的外部尺寸,但会增加元素的总尺寸。
  • 边框(Border):内边距与外边距之间的边框区域。边框可以设置颜色、样式和宽度。
  • 外边距(Margin):元素与其他元素之间的距离。外边距用于控制元素的间隔,它不会影响元素的内部布局,但会影响页面的整体布局。

岁杪二四...大约 2 分钟前端学习笔记
选择器

全局选择器

可以与任何元素匹配,优先级最低,一般做样式初始化

*{
      margin: 0;
      padding: 0;
}

岁杪二四...大约 7 分钟前端学习笔记
块元素与行内元素(内联元素)

内联元素和块级元素的区别

块级元素 内联元素
块元素会在页面中独占一行(自上向下垂直排列) 行元素不会独占页面中的一行,只占自身的大小
可以设置width,height属性 行内元素设置width,height属性无效
一般块级元素可以包含行内元素和其他块级元素 一般内联元素不包含块级元素

岁杪二四...大约 3 分钟前端学习笔记
CSS

CSS(Cascading Style Sheets)层叠样式表,又叫级联样式表,简称样式表

CSS用于HTML文档中元素样式的定义,使用CSS的唯一目的就是让网页具有美观一致的页面

语法

CSS规则由两个主要的部分构成:选择器,以及一条或者多条的声明(样式)

  • 选择器:通常是需要改变样式的HTML元素
  • 声明:由一个属性和一个组成

属性(property)是希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。


岁杪二四...大约 2 分钟前端学习笔记
HTML简介及骨架

HTML5是用来描述网页的一种语言,被称为超文本标记语言。 HTML是一种标记语言,标记语言是一套标记标签。标签是由尖括号包围的关键字,例如:<html> 标签有两种表现形式:

  • 双标签,例如:<html></html>
  • 单标签,例如:<img>

DOCTYPE 声明

DOCTYPE是 document type的缩写。<!DOCTYPE html>是H5的声明位于文档的最前面,处于标签之前。 它是网页的必备组成部分,避免浏览器的怪异模式。


岁杪二四...大约 2 分钟前端学习笔记