html css3 关于CSS（详细篇）

                    Class属性值注意点

                            1、不能纯数字开头

                            2、不建议使用中文，容易乱码

                            3、如果需要符号配合，可以使用 -或者_ ，其他符号不可以

                            4、建议命名时，采用语义化命名

    3、Id选择器

            什么时候用：想要区分某个或者某个标签时，如想区分两个div

            语法：# id名字{属性：属性值；}

            注意点：ID有唯一性，有且仅有唯一，属性值只能是一个

    4、通配符

            什么时候用：想让所有标签同时改变样式的时候

            语法：* {属性：属性值；}

    5、子级选择器

            获取父级  获取子级 { }

    6、直属子级选择器

            获取父级 > 获取子级 { }

    7、群组选择器

            什么时候用：当几个元素样式一样时，可以共同调用一个声明，元素之间用逗号分隔

            语法：选择器1，选择器2，选择器3....{属性：属性值；}  如：. box , p , #a2{width : 300px ; }

    8、伪类选择器（变色龙）

            注意：href路径不为空

            link未访问

            visited已访问

            hover滑进/悬停

            active鼠标按住

CSS权重（特殊性）

        什么是权重：权重类似人的体重，是用来衡量CSS代码优先级的一个参考值，权重值越大，代表优先级越高，权重值越小，优先级越低

        表达方式：CSS中四位数字表示权重，权重的表达方式如：0，0，0，0

        权重值比较：id选择器100 > class选择器(类选择器)10 > 类型选择器(标签选择器)1 > 通配符选择器0

                    行内样式>内部样式>外部样式

                    ! important ：权重最高

        规则1：权重不同时，由高到低覆盖

        规则2：权重相同时，就近原则

                    从父级继承过来的样式，是没有权重值的，通配符的权重值都比它要高一些

层次选择器：

    1、后代选择器（包含选择器）

            语法：选择符1  选择符2  {属性：属性值；}

            说明：含义就是选择符1中包含的所有后代选择符2；

    2、子选择器

    3、相邻兄弟选择器

    4、通用兄弟选择器

属性

单一属性

background-color：背景颜色

background-image：背景图片

        background-image：url（）；背景图不占位且是平铺显示

background-repeat：背景图片的平铺

        background-repeat：no-repeat（不平铺） /  repeat（平铺，默认值）  /  repeat-x （横向平铺，水平） /  repeat-y（纵向平铺，垂直）；

background-size：背景图大小

        直接写数值  /    写百分比（占所在盒子宽高的百分比）

background-position：背景图片的定位

        bgckground-pasition：水平位置、垂直位置，可以给负值

        第一个数值是沿X轴移动，正数为图片往右移动，负数为图片往左移动。

        第二个数值是沿Y轴移动，正数为图片往下移动，负数为图片往上移动。

background-attachment：背景图片的固定

        background-attachment：scroll（滚动） /  fixed（固定，固定在浏览器窗口里面，固定之后就相对于浏览器窗口了）

background-origin：背景图原点

        属性值

            padding-box：背景图从内填充位置开始、

            border-box：背景图从边框位置开始

            content-box：背景图从内容位置开始

        前提：bgckground-attachment的属性值为fixed时，背景图原点没有任何效果

复合属性

一张图片：background：图片  是否平铺   位置/大小  固定  颜色

多张图片：background：图片  是否平铺   位置/大小  固定，图片  是否平铺   位置/大小  固定，图片  是否平铺   位置/大小  固定   颜色

 图片作为行内块元素，相对机械对齐，所以垂直之间会有一个缝隙

  解决方法是vertival-align：top   或者   转为块级

图片溢出属性：

    overflow：visible默认值，会溢出，显示溢出部分

    overflow：hidden，溢出部分隐藏

    overflow：scroll，滚动，显示滚动条

    overflow：auto，自动，内容溢出显示滚动条，内容不溢出没有滚动条

    overflow：inherit：继承父级

    可以调整单个方向：overflow-x  /   overflow-y

    剩余空间：white-space：normal默认值    /     nowrap文本不会换行，直到遇到br标签为止

（补充）

文本设置省略号：

    1、设置宽度

    2、设置文本不换行：white-space：nowrap

    3、溢出部分隐藏：overflow：hidden

    4、溢出文本显示省略号text-overflow：ellipsis；

文章链接