CSS知识点大全

什么是CSS

CSS(Cascading Style Sheets) 层叠样式表 是用于修饰文档的（可以是标记语言HTML ，也可以是XML或者svn）的语言，可以将文档以优雅的新方式呈现给用户。

CSS声明（CSS declarations）
    key = value 键值对的形式
    backgronud-color: red;

选择器

1.标签选择器 
    div {
        声明块
    }
2.类选择器
    <div class="one">...</div>
    .one {
        ...
    }
3.id选择器
    <div id="one">..</div>
    #one {
        ...
    }
4.普遍选择器
    * {
        ...
    }

5.层次选择器
    后代选择器
    子代选择器
    相邻同胞选择器
    一般同胞选择器
6.多选择器
    多个选择器并列使用  使用,(逗号)分割
7.组合选择器
    多个选择器组合使用。  div.one 表示class为one的div元素。
8.属性选择器
    [atter] 选择具有atter属性的元素，无论该属性的值是什么
    [atter=val]  选择具有atter属性，并且atter的值为val的元素
    [atter~=val] 选择具有atter属性，并且atter的值之一为val的元素
    [atter^=val] 选择具有atter属性，并且atter值的开头为val的元素
    [atter$=val] 选择具有atter属性，并且atter值的结尾为val的元素
    [atter*=val] 选择具有atter属性，并且atter值包含val的元素。
9.伪类选择器
    表示子元素的
        :only-child
        :first-child
        :last-child
        :nth-child(n)
        :first-of-type
    元素状态有关的
        :link   未被访问的状态
        :visition   被访问过的状态
        :hover  鼠标悬停状态
        :active 鼠标按下未弹起状态
10.伪元素选择器
    ::before    在元素内容之前插入块元素
    ::after     在元素内容之后插入块元素
    ::first-letter 
    ::first-line

CSS 注释

/**/  注释不能嵌套

CSS如何作用到HTML

1.内部样式表
    <div style="color:red ...">
2.内联样式表
    <style>
        选择器 {
            ...
        }
    </style>
3.外部样式表
    link标签引入
        <link rel="stylesheet" href="style.css">

    @import url（）;方式引入

    link标签引入css和@import方式引入的区别：
        1.所属范围不同
            link标签属于html 除了可以引入CSS文件 还可以定义Rss等其他事务，@import属于Css范畴，只能导入css文件
        2.加载顺序不同
            link标签在加载HTML之前会先加载CSS文件 因此显示出的页面就是带有样式的效果
            @import在加载完HTML之后再装载css文件 因此如果网页大的时候会先显示无样式的页面 ，然后再出现网页的样式。
        3.兼容问题
            link是XHTML标签，无兼容问题，而@import是再css2.1版本提出的，低版本的浏览器不支持

级联

级联表明CSS规则的顺序问题 在所有选择器中某个选择器定义是否能够胜出（优先级）取决于三个元素：
    importance （重要性）  Specificity（特性值） Source order（源码顺序）
    importance（重要性）
        !import声明： 优先级最高，不计入特性值，因为它会改变级联的工作方式，所以一般不建议使用（会使调试变得困难）
    Specificity （特性值）
        声明在style属性中   1000     <div style="...."></div>
        id选择器            100
        类选择器、属性选择器、伪类选择器  10
        元素选择器、伪元素选择器          1
    Source order（源码顺序）
        如果特性值相同的情况下 ，按照就近原则 ，哪个靠下就选择哪个样式。

关于继承

css中有些规则将会默认被子元素继承，有些则不会。
    可被继承的属性：
        font:组合字体
        font-family：字体系列
        font-weight：字体粗细
        font-size：字体大小
        font-style：字体风格
        text-index：文本缩进
        text-align：文本水平对齐
        line-height：行高
        color：文本颜色
        visibility：元素可见性  （所有元素可以继承）
        cursor：光标属性  （所有元素可以继承）
    内联元素可以继承的属性
        字体系列属性
        除了text-index text-align之外的文本系列属性
    块级元素可以继承的属性
        text-index text-align

    不能继承的属性
        display: 规定元素生成的盒子的类型
        text-decoration：规定添加到文本的装饰
        text-shadow：文本阴影效果
        white-space：空白符的处理
        盒子模型的属性：width height margin padding border
        背景属性：background
        定位属性：float clear position top right bottom left min-width min-height max-width max-height overflow clip z-index

css提供了三个特殊值来处理继承问题
    1.inherit 继承父元素的样式
    2.initial 不继承，浏览器的默认样式
    3.unset 不设定 ，表现该规则本来的特性，如果该规则具有继承属性则继承，否则不继承。

文本样式

color ：指定字体颜色
font-family：指定文字字体 
font-style：取值 normal（默认值）按照正常字体显示
                italic 斜体字体样式
                oblique 倾斜字体样式（模拟倾斜）
font-weight：设置字体粗细 normal 正常  bold 加粗  100-900数值表示  400正常  700加粗
text-transform： 设置或取消字体改变
            取值 none  防止任何改变
                 uppercase  将文本转换为大写
                 lowercase  将文本转换为小写
                 capitalize 将所有单词第一个字母转换为大写
                 full-width：转换为类似于一个等宽字体
text-decoration：设置或取消文本修饰
            取值 none   取消所有文本修饰
                 underline 为文本添加下划线
                 overline  为文本添加上划线
                 line-through 为文本添加删除线
text-shadows：设置或取消文本阴影
            语法：text-shadow：h-shadow v-shadow blur color；
            取值：none 取消所有阴影
                  h-shadow 必需 水平阴影位置  允许负值
                  v-shadow 必需 垂直阴影位置  允许负值
                  blur     可选 模糊的距离
                  color    可选 阴影的颜色
font-size：指定文字大小

列表样式

list-style-type：设置列表项标志类型
            取值：none 无标志
                  disc 
                  circle
                  square
                  decimal
                  lower-roman
                  upper-roman
                  decimal-leading-zero
list-style-position：设置列表标志出现的位置
            取值：  outside  列表项标志出现在主块框的外部
                    inside  列表项出现在主块框的内部
list-style-image：设置自定义列表项标志
            取值：  url（）  指定图标位置
list-sttyle:列表样式速记写法
            取值： type image position
line-height：设置列表行高
            取值：绝对单位  相对单位

超链接的默认样式
    cursor：调整光标悬浮到链接上的时候光标的形状
    outline：调整环绕链接的框
    text-decoration：自定义设置列表项标志
    text-align：文本对齐方式

盒子

盒子的属性：
    width height  设置盒子的宽高  默认为盒子内容的高度
    padding 内边距
    border 盒子的边框 默认为0
    margin 盒子的外边距  ----> 相邻元素的边框会合并

## 默认盒子模型
    使用 box-sizing属性可以改变盒子的模型
        取值：  content-box 为默认盒子模型
                border-box 边框盒子模型

## 盒子背景样式-background
    background-color    设置背景颜色
            取值：  关键字
                    #十六进制数
                    rgb
                    rgba
                    hsl
                    hsla
    background-image    设置背景图片
            取值：  none 无背景图
                    url（） 背景图片位置路径
    background-clip     设置背景的覆盖范围
            取值：  border-box 背景位于边框以内
                    padding-box 背景位于内边距以内
                    content-box 背景位于内容区
    background-origin   设定背景的起始位置
            取值;   border-box 背景图片从边框的外边缘开始绘制
                    padding-box 背景图片从内边距的外边缘开始绘制
                    content-box 背景图片绘制在内容区
    background-position 设置背景图片的初始位置
            取值：  关键字   坐标
    background-repeat   设置背景图片的重复方式
            取值：  repeat  重复 切割背景图片
                    space   空白分割背景图片 不切割
                    round   将背景图片压缩/拉伸 适应整个背景范围 不切割
                    no-repeat 不重复
    background-attachment   设置背景图片的固定点
            取值：  fixed   背景固定在视口上
                    scroll  背景固定在自身元素上
                    local   背景固定在自身元素的内容上
    background-size     设置背景的大小
            取值：  cover   背景铺满整个屏幕 （尽量不使用大图覆盖小范围）
    background          背景设置的速记写法
            取值： attachment clip color image position repeat

    ## 边框盒子样式
        border-width    为元素指定边框的宽度
            取值：  关键字 thin medium thick
                    单位 px em
        border-style    为元素指定边框的样式
            取值:   none   不设置
                    hidden  隐藏
                    dotted  显示一系列的点
                    dashed  显示一系列的小线段
                    solid   显示一条单一的实心直线
                    double  显示两条实心直线
                    groove  边框雕刻效果（与ridge相反）
                    ridge   与groove相反
                    inset   嵌入式边界框（与outset相反）
                    outset  突出的边界框
        border-color    为元素指定边框颜色
            取值：  关键字
                    十六进制
                    rgb 
                    rgba
                    hsl
                    hsla
        border-radius   为元素指定圆角边框的半径
            取值：  绝对值 px mm cm
                    相对值 em rem
        border-image    为元素设置边框背景
            border-image-source     用于加载作为边框的图片
            border-image-slice      用于切割边框图片
            border-image-repeat     用于设置边框图片重复方式
        border          边框相关属性的速记写法

## 表格样式 table
    table-layout    指定显示表格的盒子 行 列的算法
            取值：  auto 默认值  table 和 cell的宽度取决于包含在其中的内容
                    fixed   table 的宽度以及列的宽度取决于表格的第一行各列设置的宽度
    border-collapse 指定表格的边框是合并还是分开
            取值：  separate    （默认值） 分开模式 表示相邻的两个格子都有独立边框
                    collapse     合并模式，表示相邻的两个格子共享边框
    caption-side    指定caption坐落在表格的那个位置上
            取值：  top     标题位于表格的上方
                    bottom  标题位于表格的下方

布局

1.默认文档流（Nomal layout flow）
    默认文档流就是对页面布局不加任何的修饰 元素自动的布局方式
    特点：
        元素在页面中的显示顺序与元素在代码中出现的顺序一致
        块级元素独占一行空间 宽度默认父级盒子的100% 高度由其内容决定
        行内元素与其他元素共享一行空间，宽高由其内容决定。

2.浮动布局（float）
    浮动布局的主要用法是让块级元素在一行显示（列级布局），或者让文字在图片周围显示
    float取值：
        left    让左浮动元素
        right   向右浮动元素
        none    默认值 不浮动
        inherit 浮动方式继承父元素
    
    清除浮动（clear）
        1.伪元素清除浮动
        .clearfix:after {
            content："";
            display：block；
            clear；both；
            overflow：hidden；
        }
        2.给浮动元素和非浮动元素之间添加块级元素。
        3.父元素添加overflow：hidden； （不推荐）

3.定位布局（position）
    取值：
        static  静态定位 ：是所有元素的默认定位方式，就是将元素定位在默认文档流中。
        relative 相对定位  对于相对属性 它不会脱离默认文档流 会保留原有的位置，可以通过top bottom left right 属性来确定元素的最终位置，相对于元素本来的位置进行移动。
        absolute 绝对定位  绝对定位的元素会脱离默认文档流，漂浮在原有位置的上方， 不保留原有的位置  默认情况下的包含块是html，如果父元素中有定位元素，那么包含块就是拥有定位的元素。  两个有绝对定位的元素叠加在一起的时候，可以使用z-index属性来改变他们出现的顺序（z-index的取值为number，值越大越靠上）
        fixed 固定定位  固定定位和绝对定位相似 但是他们的包含块不同 固定定位的元素是相对于浏览器的视口，同样可以使用top bottom left right属性来进行最终位置的调整 并且不会随着滚动条的滚动而滚动

        sticky 粘性定位 ，相当于relative和fixed的结合 ，可以通过top right bottom left属性来进行设置距离   

4.伸缩盒布局（flexbox）
    display：flex；
        当前元素就会变成伸缩盒并且所有子元素自动成为父元素的一个成员项（item） 
        子元素会有浮动的效果
    给父元素设置：
        flex-direction：row（列布局） / column（行布局）
        flex-wrap：wrap； 自动换行
    ---->简写
        flex-flow：row wrap；
        align-items（在y轴上的位置）   
                取值：stretch （默认值）将盒子在y轴上进行拉伸，直至适应整个伸缩盒子容器
                    center   盒子在y轴中心显示
                    flex-start  在伸缩盒子开始位置显示   盒子顶部
                    flex-end      在伸缩盒子结束位置显示  盒子底部
        justify-content （在x轴上的位置）
                取值：flex-start（默认值）在主轴的开始显示
                      flex-end   在主轴的结束位置显示
                      center     在主轴的中心显示
                      space-around  填充空白自适应在主轴中心显示
                      space-between 填充空白自适应在主轴中心显示，但是首尾两个元素距离容器没有空白。
    给子元素设置：
        flex：number； 
        <div>
            <p></p>
            <p></p>
            <p></p>
        </div>
        <!-- 1.将父盒子div设置为伸缩盒 -->
        div {
            display:flex;
        }
        <!-- 3个子元素p各占一份--> 将父盒子平分给3个子元素p -->
        p {
            flex:1;
        }
        <!-- 第二个子元素p占两份--->相当于将父盒子div平分为四分第一、第三个子元素p各占一份 第二个子元素p占两份。 -->
        p:nth-child(2) {
            flxe:2;
        }


如何让子元素在父元素中水平垂直居中
    1.子元素为行内元素
        text-align：center；
        line-height：height；
    2.子元素为块级元素
        给父元素设置：
            display：flex； <!--设置伸缩盒-->
            justify-content:center; <!--水平居中-->
            align-items:center;        <!--垂直居中-->
        给父元素设置 display:flex;
                给子元素直接设置：margin：auto；
        给父级元素设置定位属性，子元素设置绝对定位
                将子元素的top：50%； left：50%；
                再配合使用margin-top：-height/2； margin-left：-width/2；

动画 (animations)

animations是css3中的一个模块 ，使用 @keyframes 定义如何随着时间的移动改变css的属性值，可以通过指定持续时间 ，重复次数，如何重复来控制关键帧的行为。
1.设置动画轨迹
    @keyframes move {
        from{
            //设定元素的开始样式
        }
        to{
            //设定元素的结束样式
        }
    }

    @keyframes move {
        0%{
            //设定开始样式
        }
        50%{}
        60%{}
        100%{
            //设定结束样式
        }
    }
2.应用动画
    div {
        animation-name:move;  绑定@keyframes中定义的名字
    }
    animation-duration：；  设置动画完成一次循环所需的时间 默认值为0s。
    animation-iteration-count    设置动画重复的次数 默认值为1，不能为负数    infinite表示无限循环
    animation-delay         设置动画延迟时间 默认值为0s
    animation-direction     设置动画方向
        取值：normal    默认值 正常播放
              reverse   播放帧的顺序反转，播放的起点为帧的结束
              alternate 交替反转播放
              alternate-reverse     交替反转播放 第一次播放时需要反转播放帧。
    animation-fill-mode     设置填充模式
        取值：  none    默认值
                forwards    保留执行期间遇到的最后一个关键帧所设置的计算值
                backwards   保留执行期间所遇到的第一个关键帧所设置的计算值
    animation-timing-function   设置动画的速度曲线
        取值:   ease    默认值
                ease-in 先慢后快
                ease-out    先快后慢
                ease-in-out 先慢后快再慢
                linear  线性增长（匀速）
                steps（num） 设置多少步完成一次循环

## Transitions
    css transitions提供了更改css属性时控制动画速度的方法。
    取值 ： delay   设置何时开始
            duration    设置持续时间
            timing-funtion  设置动画速度
    语法：
        div {
            transitions:<property> <duration> <timing-function> <delay>;
        }
        property:指定过度属性  （transitions-property）  取值all可以设置选择所有属性
        duration：指定过度时长 （transitions-duration）