HTML

CSS

• cascading style sheet 层叠样式表

• link引入CSS样式

  • 为了确保样式正确加载并应用到页面上，必须在 <link> 标签中包含 rel="stylesheet" 属性。

  • href 是一个 HTML 属性，表示 "Hypertext Reference"，即超文本引用。在 HTML 中，它通常用于 <a>（锚点）、<link>（链接）等元素，用来指定要跳转的目标或者要引用的外部资源。

  • 小贴士：Type 不加也不会有问题，因为它可以根据 href 超文本引用的后缀名，来决定当前的 type 是什么

CSS权重

!importantInfinity
行间样式                   1000
id                        100
class|属性|伪类             10
标签|伪元素                  1
通配符                       0

Selector

Parent-Child Selector

从浏览器的内核角度来说，浏览器解析 CSS 选择器时，选择器的匹配是从 右向左 进行的。跟 css 的渲染原理有关

1. 直接子元素选择器 (Direct Child Selector) (>)
2. 后代选择器 (Descendant Selector) (空格)
3. 相邻兄弟选择器 (Adjacent Sibling Selector) (+)
4. 通用兄弟选择器 (General Sibling Selector) (~)

通用兄弟选择器选择器的特点：

1. 选择所有在.box元素之后的span元素
2. 这些span必须和.box是同级（即有相同的父元素）
3. 元素之间可以有其他元素间隔（与+选择器不同，+只选择紧邻的下一个元素）

Classification(Inline/block)

1. 行级元素（Inline Elements）:
   • 特点：内容决定元素所占位置，不可以通过CSS改变宽高。假设他们都是一个文本
   • 常见例子：<span>, <strong>, <em>, <a>, <del>。
2. 块级元素（Block Elements）:
   • 特点：独占一行，可以通过CSS改变宽高。
   • 常见例子：<div>, <p>, <ul>, <li>, <ol>, <form>, <address>。
3. 行级块元素（Inline-block Elements）:
   • 特点：内容决定大小，可以通过CSS改变宽高。
   • 常见例子：<img>, <button>, <input>, <label>, <span>（可通过 display: inline-block 设置）

文本类元素

凡是带有 inline，也就是文本的，它都是文本类元素，都会带有文本类元素的特点

• 文本类元素是指那些具有 inline 或 inline-block 显示属性的元素。它们的行为类似于文本，具有按内容决定大小、在同一行内显示、受文本属性影响等特点。
• 举例如此

盒子模型

小技巧

凡是带有inline 的元素，都有文字特性—— 图片之间有一条勾，我们是直接把这个对应的回车键给去掉来处理的

先定义功能，后选配功能

在开发初期，重点是先实现功能，确保功能能正常工作。就是你可以把你写好的一个功能抽取出来，封装到一个文件里面去，以便于后面你的同事去开发。

* {
    padding: 0;               /* 清除所有元素的内边距 */
    margin: 0;                /* 清除所有元素的外边距 */
    text-decoration: none;    /* 去除所有文本的下划线（例如链接的下划线） */
    list-style: none;         /* 去除所有列表元素的默认样式（如项目符号） */
}

position

1.absolute
	脱离原来位置进行定位
	最近的有定位的父级进行定位，如果没有那么相对于文档进行定位
2.relative
	保留原来位置进行定位
	相对自己原来的位置(出生的地方)进行定位；加了不加，对自己没影响（所以一般放在父级里面）
3.fixed
	一直保持自己在页面的某个位置

保留原来位置进行定位
	---》 非常不好，会影响到其他元素的布局？？？ 
    	---》 使用自己的父级作为基础底

作业：画一个五环，必须要在页面的居中，保持一直居中

两栏布局

这个布局的关键是得把右边给让出来，使用 margin right

margin 塌陷——bfc 来解决

浮动元素

• 浮动元素产生了浮动流；所有产生了浮动流的元素，块级元素看不到他们。
• 产生了BFC的元素和文本类属性(inline)的元素以及文本都能看到浮动元素
  • （Block Formatting Context，块级格式化上下文）是CSS中的一个概念，它决定了元素如何对其内容进行布局，以及与其他元素的关系和相互作用。BFC是一个独立的渲染区域，内部的元素布局不会影响到外部元素。

这里使用伪元素解决上面的问题

伪元素——》 行级结构

.wrapper::after{
    content: "";
    clear:both;
    display:block;
}

position:abolute; float:left/right;

打内部把元素转换成inline-block;

溢出容器，要要打点展示

单行溢出的解决办法

一般来说，单行都是这一种固定的写法，就连百度都是这样做的

overflow: hidden；（文字长度超出块儿的范围，则隐藏超出的内容）
white-space: nowrap；（设置文字在一行显示，不能换行）
text-overflow: ellipsis；（规定当文本溢出时，显示省略符号来代表被修剪的文本）

例子：

多行只做截段，不做打点

overflow:hidden;     把其他多余的字给隐藏掉就好了，行级元素内容决定元素所占位置

隐藏文字并显示背景图片

• text-indent: 200px; white-space: nowrap; overflow: hidden;：这些样式可能用于隐藏文字，但被注释掉了。

• padding 解决

  • 如果容器高度是100px，设置padding-top: 100px;，这样文字会被推到容器底部下面100px的位置，超出容器范围。

  • 再结合overflow: hidden;，文字就不会显示出来。

  • 这种方法的优点是简单，而且在CSS不加载时，内容仍然可读。