12.8日总结

12.8日总结

CSS概念：

CSS是一种描述HTML文档样式的语言。CSS描述应该如何显示HTML元素。

什么是CSS：

CSS指的是层叠样式表(Cascading style sheets)，也称级联样式表

CSS描述了如何在屏幕、纸张或其他媒体上显示HTML元素

CSS节省了大量工作，它可以同时控制多张网页的布局

外部样式表存储在CSS文件中

为何使用CSS？

①美化页面，易于美观②页面的布局

基本选择器

1.1元素选择器

元素选择器根据元素名称来选择HTML元素。

1.2 id 选择器

id选择器根据元素的id 属性来选择特定的HTML元素。

元素的id在页面中是唯一的，id选择器用于选择一个唯一的元素(id选择器优先级要大于元素选择器)

要选择具有特定id的元素，请写一个警号（#)，后跟该元素的id 。

（id名称不能以数字开头）

1.3 类选择器

类选择器允许以一种独立于文档元素的方式来指定样式。 该选择器可以单独使用，也可以与其他元素结合使用。

(id选择器优先级要大于元素选择器)

1.4通用选择器

通用选择器(*)选择页面上的所有的HTML元素。

（元素选择器>通用选择器）

通用选择器的优先级最低

1.5分组选择器

分组选择器选取所有具有相同样式定义的HTML元素。

优点：对选择器进行分组，以最大程度地缩减代码。

如需对选择器进行分组，请用逗号来分隔每个选择器。

组合选择符

表述两个选择器之间的关系

后代选择器(以空格分隔)

子元素选择器(以大于号>分隔)

相邻兄弟选择器(以加号＋分隔)

普通兄弟选择器(以波浪号一分隔)

1.1 后代选择器（父子）

用于选取某元素的后代元素。

（后代选择器优先级>分组选择器）

选择器选取所有包含在<div>元素中的<p>元素。

1.2子元素选择器

与后代选择器相比，子元素选择器只能选择作为某元素直接/一级子元素的元素。

子元素选择器对容器有选择的 div是容器 p标签是段落、行内元素

1.3相邻兄弟选择器

相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。

1.4 后续兄弟选择器

后续兄弟选择器选取指定元素之后的所有相邻兄弟元素。

（后续兄弟选择器包含相邻兄弟选择器，后续兄弟选择器>相邻兄弟选择器）

属性选择器

5.1 【attribute】选择器

[attribute] 选择器用于选取带有指定属性的元素。

属性值设置了，class也定义了，但属性选择器中设置的css样式不显示？

“空格问题”

5.2 [attribute=“value”] 选择器

[attribute="value"] 选择器用于选取带有指定属性和值的元素。

5.3 设置表单样式

若需为不带 class 或 id 的表单设置样式，属性选择器会很有用：

input[name="nickname"] {
  width: 150px;
  margin-bottom: 10px;
  background-color: yellow;
}
input[type="button"]{
	width:120px;
	margin-left:48px;
	display:block;
}

定位

1.1 position属性

有五个不同的位置值:

static relative

fixed

absolute

sticky

元素其实是使用top、bottom、left和right属性定位的。但是，除非首先设置了position属性，否则这些属性将不起作用。根据不同的position值，它们的工作方式也不同。

1.2 position：static（静态定位）：

static（静态），不受top bottom left right 属性的影响；它始终根据页面的正常流进行定位。

1.3 position：relative（相对定位）：

position: relative;的元素相对于其正常位置进行定位。

设置相对定位的元素的 top、 right. bottom和left属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。

1.4 position：fixed（固定定位）：

position：fixed；的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。top、right、bottom和left属性用于定位此元素；

固定定位的元素不会在页面中通常应放置的位置上留出空隙。

1.5 position：absolute（绝对定位）：

position: absolute;的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位)。然而，如果绝对定位的元素没有祖先，它将使用文档主体(body)，并随页面滚动一起移动。

1.6 position：sticky（粘性定位）

position: sticky;的元素根据用户的滚动位置进行定位。

粘性无素根据滚动位置在相对(relative)和固定（fixed)之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止，然后将其"粘贴"在适当的位置。

1.7 重叠

z-index 元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。