web前端第三天

1.伪类选择器：

         用来描述一个元素的特殊状态，比如第一个元素、某个元素的子元素要点击的元素

        静态伪类：只能用于超链接的样式

                :link 超链接点击之前

                :visited 链接被访问之后

                

        动态伪类:针对所有标签都适用的样式

                :hover “悬停”鼠标放在标签上的时候

                :active “激活”鼠标点击标签，但是不松手时

                

        结构伪类选择器：        

        :frist-child：选择标签的第一个元素

        :last-child：选择标签的最后一个元素

        :nth-child()：选择括号中所写的第几个元素

        

2.伪元素选择器：

        ::before 表示元素的开始插入内容

        ::after 表示元素的最后插入内容

        before和after必须结合content使用

        

        ::input: :placeholder 表单提示词

        

        ::selection 选中时

        

3.文本相关样式

        text-indent: 2em 文本缩进2个单位长度

        text -aling：文本水平对齐方式 center（水平居中）

        overflow：元素溢出时所需的行为，即当元素的内容大于块级格式化上下文时

        visible：内容不能被裁减并且可能渲染到盒子的外面

        hidden：内容将被裁剪以适应边距

        auto：内容自适应边距，如果内容溢出，则提供滚动条

        line-height：设置行高

        

        text-decoration：设置文本上的装饰性线条的外观

        none，line-through，overline

4.元素显示模式转换

        行内元素无法设置宽、高

        display：none 隐藏元素，脱离文本流

        display：inline 转换为行内元素

        display：block 转换为块元素

        display：inline-block 转换为行内块元素

5.背景

        background-color：背景颜色

        background-image：url() 背景图片 ()中写图片地址

        background-repeat：设置是否及如何重复背景图像  no-repeat 不重复

        background-attachment：设置背景是否固定或者随着页面滚动

        scroll：背景图片随着页面的滚动而滚动（默认）

        fixed：背景图片不随着页面滚动

        local：背景图片随着元素内容滚动

        简写：background：fixed url() no-repeat;

6.边框

        border-rdius：边框弧度

        border-width：边框宽度

        border-style：边框样式  solid（实线）

        border-color：边框颜色

        简写：border：1px solid black

7.合并相邻边框

        border-collapse：collapse；

8.阴影

        盒子阴影：box-shadow：20px（x偏移量）20px（y偏移量）10px（阴影模糊半径）10px（阴影扩散半径）black（阴影颜色）

        文字阴影：text-shadow：5px 5px red

9.轮廓线

        outline：none

        outline-style：auto；

10.防拖拽

        resize：none 防止文本拖拽

        vvertical-aling 改变与文字的对齐方式

        

11.隐藏元素

        display：none  脱离文本流，原来位置不再保留

        visibility：hidden  元素隐藏，位置保留

        opacity：不透明度

12.绝对定位

        position：absolute：绝对定位，不保留原来位置

        position：relative：相对定位

        子绝父相  如果父亲都没有相对定位，则相对于浏览器进行定位

        

13.固定定位

        相对于可视区域进行定位

        position：fixed；

        

14.粘性定位

        能够形成动态固定的效果

        position：sticky；（必须添加top、left、right、bottom其中一个才有效）