css样式 属性选择器 定位

css样式表

css指的是层叠样式表（Cascading Style Sheets）也称级联样式表，用于定义网页的样式。

        规则集由选择器和声明块组成：

        选择器：指向你需要设置样式的HTML元素

        声明块：包含一条或多条用分号分隔的声明

基本选择器 （id选择器优先级>类>元素>通用）

        元素选择器又称标签选择器（p div...）

        id选择器：根据元素的属性来选择特定的HTML元素（唯一， 不能以数字开头）

        类选择器：有特定的class属性

        通用选择器：（*）选择页面上的所有HTML元素

        分组选择器：选取所有具有相同样式定义的HTML元素（如需分组用逗号隔开）

组合选择附

        后代选择器（以空格 分隔）用以选取某元素的后代元素

        子元素选择器（以大于号> 分隔）只能选择作为某元素直接/一级子元素的元素

        相邻兄弟选择器（以加号 + 分隔）可选择紧接在另一元素后的元素，且两者有相同父元素

        后续兄弟选择器（以波浪线 ~ 分隔）选取指定元素之后的所有相邻兄弟元素

属性选择器（可设置带有特定属性或属性值）

[attribute]选择器

        用于选取带有指定属性的元素。(解析:在这个实例中，选择器选取所有带有target属性的<a>元素。)

[attribute="value"]选择器

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

        [解析]  在这个实例中,选择器选取所有带有target=". _blank"属性的<a>元素。

设置表单样式

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

 position属性

position属性规定应用于元索的定位方法的类型。

有五个不同的位置值:

●static

●relative

●fixed

●absolute

●sticky

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

 position: static;

        HTML元素默认情况下的定位方式为static (静态)。

        静态定位的元素不受top. bottom、 left 和right属性的影响。

        position: static; 的元索不会以任何特殊方式定位;它始终根据页面的正常流进行定位。

 position: relative;

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

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

 position: fixed;

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

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

 position: absolute;

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

position: sticky;

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

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