11月18日笔记

伪类选择器

（1）:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.

n 可以是数字、关键词或公式。

奇:2n+1     偶:2n-1

1. :nth-child选择器，该选择器选取父元素的第 N 个子元素，与类型无关。

字体样式

1.font-family:字体名称

2.font-size: 字体大小

3.Font-style:定义字体风格

normal	默认值。浏览器显示一个标准的字体样式。
italic	浏览器会显示一个斜体的字体样式。
oblique	浏览器会显示一个倾斜的字体样式。
inherit	规定应该从父元素继承字体样式。

1. font-weight:设置文本粗细

normal	默认值。定义标准的字符。
bold	定义粗体字符。
bolder	定义更粗的字符。
lighter	定义更细的字符。
100 200 300 400 500 600 700 800 900	定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
inherit	规定应该从父元素继承字体的粗细。

有顺序性（粗细，是否倾斜，字号，字体名称）

font: 800 italic 12px “微软雅黑”

文本样式

1. Text-indent:定义一个块元素首行文本内容之前的缩进量。如：text-indent:2em；
2. line-hight:行高（可让单行文本垂直居中）
3. Text-align:文本行间的对齐方式(center（居中） justify（自适应）)
4. Word-spacing:设置标签，单词之间的空格长度
5. Margin:0 auto（让标签水平居中）
6. 文本装饰

Text-decoration:设置添加文本修饰

默认值为none, 定义标准的文本。

underline为定义文本下的一条线。

overline为定义文本上的一条线。

line-through为定义穿过文本下的一条线，一般用于商品折扣价

文本颜色

color: brown;

    color: #232;（16进制颜色）

color:rgb(red, green, blue);（三原色）

background-color:rgba(24, 211, 24,.2);（最后一个数在0~1之间，可调透明度）

文本方向

Direction

ltr:默认属性。可设置文本和其他元素的默认方向是从左到右。

rtl:可设置文本和其他元素的默认方向是从右到左。

列表样式

list-style 简写属性在一个声明中设置所有的列表属性。

list-style-type	设置列表项标记的类型。
list-style-position	设置在何处放置列表项标记。
list-style-image	使用图像来替换列表项的标记。

List-style-type:设置列表样式

none	无标记。
disc	默认。标记是实心圆。
circle	标记是空心圆。
square	标记是实心方块。
decimal	标记是数字。

背景

background-image 属性为元素设置背景图像。

元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。

默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。

提示：请设置一种可用的背景颜色，这样的话，假如背景图像不可用，页面也可获得良好的视觉效果。

background-repeat 属性设置是否及如何重复背景图像。

默认地，背景图像在水平和垂直方向上重复。

repeat	默认。背景图像将在垂直方向和水平方向重复。
repeat-x	背景图像将在水平方向重复。
repeat-y	背景图像将在垂直方向重复。
no-repeat	背景图像将仅显示一次。

background-position 属性设置背景图像的起始位置。

top left top center top right center left center center center right bottom left bottom center bottom right	如果您仅规定了一个关键词，那么第二个值将是"center"。 默认值：0% 0%。
x% y%	第一个值是水平位置，第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如果您仅规定了一个值，另一个值将是 50%。
xpos ypos	第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。 如果您仅规定了一个值，另一个值将是50%。 您可以混合使用 % 和 position 值。

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

scroll	默认值。背景图像会随着页面其余部分的滚动而移动。
fixed	当页面的其余部分滚动时，背景图像不会移动。
inherit	规定应该从父元素继承 background-attachment 属性的设置

元素的类型

块级元素（div,h,li,ol,dl）

1. 默认情况下，总是从新行上开始，即独占一行
   （2）可以对它设置宽,高和内外边距，默认是它容器（父级元素）的100%
   （3）可以容纳其他块级元素和行内元素（内联元素）

内联元素（a、span、em、 br、strong、i）

是指在开发中它会与它的兄弟元素在同一行中从左往右依次排序，不会单独占一行的元素。 它的宽高以及到顶部和底部的边距都不可以进行设置。

内联块级元素（img/input）

可与其他元素在一行，可设置宽高，和内外边距。

display 属性规定元素应该生成的框的类型。

none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行联块级元素。（CSS2.1 新增的值）
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。

边框

border 属性允许指定元素边框的样式、宽度和颜色。

border-style 属性指定要显示的边框类型。

dotted - 定义点线边框    dashed - 定义虚线边框

solid - 定义实线边框     double - 定义双边框

border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。

按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。

文本域

resize 属性规定是否可由用户调整元素的尺寸。

none	用户无法调整元素的尺寸。
both	用户可调整元素的高度和宽度。
horizontal	用户可调整元素的宽度。
vertical	用户可调整元素的高度。

鼠标样式

cursor 属性规定要显示的光标的类型（形状）。

default	默认光标（通常是一个箭头）
auto	默认。浏览器设置的光标。
crosshair	光标呈现为十字线。
pointer	光标呈现为指示链接的指针（一只手）

相对定位：该元素相对于自己原有位置，偏移一定距离。相对的是自己。

绝对定位：该元素相对于其父元素，偏移一定距离。相对的是父元素，重点是这个父元素也需要是设置了position属性。从最近的父元素开始找，直到找到body位置为止。

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

auto	默认。堆叠顺序与父元素相等。
number	设置元素的堆叠顺序。
inherit	规定应该从父元素继承 z-index 属性的值。

固定定位：position:fixed

相对于浏览器窗口进行定位

粘性定位：

 .posi{position: sticky;

            top: 20px;

            background-color: aqua;

        }

显示与隐藏

display 属性规定元素应该生成的框的类型。

none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符

opacity 属性设置元素的不透明级别。

value	规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。
inherit	应该从父元素继承 opacity 属性的值。