css干货部分

1.css的引入方式(三种):
        a.行内样式<div> <p style="color: green">我是一个段落</p>  </div>
        b.内接样式
            <style type="text/css">
                /*写我们的css代码*/
                span{ color: yellow; }
            </style>
        c.外接样式
            c.1 链接式 <link rel="stylesheet" href="./index.css">
            c.2 导入式
                <style type="text/css">
                    @import url('./index.css');
                </style>
    2.css的选择器
        a.基础选择器
            a.1 标签选择器
                可以选择所有的标签,比如div,ul,li,p等等,不管标签藏得多深,都可以找到
                    /*标签选择器p*/
                    p{
                        color: red;
                    font-size: 20px;
                    }

            a.2 id选择器(方式:#id)
                 同一个页面中id不能重复,任何的标签都可以设置id(id命名规范同函数名)
            a.3 类选择器
                a.3.1 所谓类,就是class 与id用法非常类似,任何标签都可以加类,                类还可以重复,属于归类的概念.
                a.3.2 同一个标签中可以携带多个类,用空格隔开
        b.高级选择器
            b.1 后代选择器 :使用空格表示后代选择器.顾名思义,父元素的后代(儿孙满堂)
            b.2 子代选择器 :使用>表示子代选择器.比如div>p,仅仅表示当前div元素选中的子代
            b.3 并集选择器 :多个选择器用逗号隔开.表示选中的多个标签所选中的所有元素
            b.4 交集选择器 :第一个标签必须是标签选择器,第二个必须是类选择器
                语法:div.active{}
            b.5 属性选择器 :根据标签的属性选择,选中当前的标签
                以for属性为例:
                     1 /*根据属性查找*/
                     2             [for]{
                     3                 color: red;
                     4             }
                     6  /*找到for属性的等于username的元素 字体颜色设为红色*/
                     7             [for='username']{
                     8                 color: yellow;
                     9             }
                     10  /*以....开头  ^*/
                     12             [for^='user']{
                     13                 color: #008000;
                     14             }
                     15
                     16 /*以....结尾   $*/
                     17             [for$='vvip']{
                     18                 color: red;
                     19             }
                     20
                     21 /*包含某元素的标签*/
                     22             [for*="vip"]{
                     23                 color: #00BFFF;
                     24             }
                     28 /*指定单词的属性*/
                     29             label[for~='user1']{
                     30                 color: red;
                     31             }
                     32
                     33             input[type='text']{
                     34                 background: red;
                     35             }
            b.6 伪类选择器 :伪类选择器一般用在超链接a标签中,
                        使用a标签的伪类选择器,要遵循"爱恨准则"  LoVe HAte
                    示例:
                        1               /*没有被访问的a标签的样式*/
                        2         .box ul li.item1 a:link{
                        3
                        4             color: #666;
                        5         }
                        6         /*访问过后的a标签的样式*/
                        7         .box ul li.item2 a:visited{
                        8
                        9             color: yellow;
                        10         }
                        11         /*鼠标悬停时a标签的样式*/
                        12         .box ul li.item3 a:hover{
                        13
                        14             color: green;
                        15         }
                        16         /*鼠标摁住的时候a标签的样式*/
                        17         .box ul li.item4 a:active{
                        18
                        19             color: yellowgreen;
                        20         }
            b.7 伪元素选择器
                    示例:
                        /*设置第一个首字母的样式*/
                                p:first-letter{
                                    color: red;
                                    font-size: 30px;

                                }

                        /* 在....之前 添加内容   这个属性使用不是很频繁 了解  使用此伪元素选择器一定要结合content属性*/
                                p:before{
                                    content:'alex';
                                }

                        /*在....之后 添加内容，使用非常频繁 通常与咱们后面要讲到布局 有很大的关联（清除浮动）*/
                                p:after{
                                    content:'&';
                                    color: red;
                                    font-size: 40px;
                                }
    3.css的继承性和层叠性
        a.继承性 继承特点：继承了父类的属性和方法
            继承父类的属性
                a.1 有些属性可以继承:color,font-*,text-*,line-*.主要是文本级的标签元素
                a.2 一些盒子元素属性,定位的元素(浮动,绝对定位,固定定位)不能继承
        b.层叠性 权重的标签覆盖了权重小的标签(谁的权大听谁的)
            b.1 数: id的数量 class的数量 标签的数量     (顺序不能乱)
                    权重100    权重10    权重1

            b.2 继承来的属性,谁描述的近(距离)
            b.3 权重相同时，以后来设置的属性为准
            b.4 第一个选择器没有选中内层标签，那么它是通过继承来设置的属性，那么它的权重为0。第二个选择器选中了内层标签，有权重。

                第一种现象：当权重相同时，以后来设置的属性为准，前提一定要权重相同
                #box2 .wrap3 p{
                    color: yellow;
                }
                #box1 .wrap2 p{
                    color: red;
                }
                我们会发现此时显示的是红色的。

                第二种现象： 前选择器没选中内层标签，它是通过继承来设置的属性，那么它的权重为0。    后选择器选中内层标签，有权重。
                #box1 #box2 .wrap3{
                    color: red;
                }
                #box2 .wrap3 p{
                    color: green;
                }
                我们会发现此时显示的是绿色的。

                第三种现象：如果都是继承来的属性，谁描述的近，显示谁的属性。'就近原则'

                #box1 #box2 .wrap3{
                    color: red;
                }
                 .wrap1 #box2{
                    color: green;
                }
                我们会发现此时显示的是绿色的。
            b.5 !important :权限无限大(不能随便使用)
    4.盒模型 内层到外层content padding border margin
        a.盒模型的属性:
            a.1 width:内容的宽度
            a.2 height:内容的高度
            a.3 padding:内边距,边框到内容的距离
                1.padding区域有背景色,且背景颜色和内容颜色一样。也就是说background-color这个属性将    填充所有的border以内的区域
                2.padding有四个方向,分别描述4个方向的padding
                    描述的方法有两种:
                        1、写小属性,分别设置不同方向的padding
                        padding-top: 30px;
                        padding-right: 30px;
                        padding-bottom: 30px;
                        padding-left: 30px;

                        2、写综合属性，用空格隔开

                        /*上 右 下 左*/
                        padding: 20px 30px 40px 50px ;
                        /*上 左右  下*/
                        padding: 20px 30px 40px;
                        /* 上下 左右*/
                        padding: 20px 30px;
                        /*上下左右*/
                        padding: 20px;
                3.一些标签默认有padding:
                    比如ul标签，有默认的padding-left值。
                    那么我们一般在做站的时候，是要清除页面标签中默认的padding和margin。以便于我们更好的去调整元素的位置。

                    我们现在初学可以使用通配符选择器
                    *{
                      padding:0;
                      margin:0;
                    }
                    But，这种方法效率不高。

                    所以我们要使用并集选择器来选中页面中应有的标签（不同背，因为有人已经给咱们写好了这些清除默认的样式表，reset.css）
            a.4 border:边框,就是指盒子的宽度
                边框三要素:粗细 线性样条 颜色
                    border-width: 3px;
                    border-style: solid;
                    border-color: red;
                    还可以单独对某一个方向进行设置(left,right,top,bottom)
            a.5 margin:外边框,盒子边框到附近最近盒子的距离
                margin: 20px;    /*表示四个方向的外边距离为20px*/
                margin-top: 30px;    /*表示盒子向下移动了30px*/
                margin-left: 50px;    /*表示盒子向右移动了50px*/
            a.6 计算宽高
                盒子的真实宽度=width+2*padding+2*border

        b.margin塌陷问题
            1.设置浮动后,不会出现margin塌陷问题
            2.设置浮动后,margin:0 auto;失效
                两个标准流下兄弟盒子 设置垂直方向上的margin时，以较大的为准，这种现象叫塌陷.
                没法解决，我们称为这种技巧叫“奇淫技巧”。

            margin:0 auto;表示上下外边距离为0,左右为auto的距离
                使用margin：0 auto;注意点：
                1.使用margin: 0 auto;水平居中盒子必须有width，要有明确width，文字水平居中使用text-align: center;
                2.只有标准流下的盒子 才能使用margin:0 auto;
                当一个盒子浮动了，固定定位，绝对定位(后面会讲)，margin:0 auto; 不能用了
                3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;

    5.标准文档流
        web网页制作,就是从上往下的排版,这个排版就是流(类似织毛衣)
        a.空白折叠现象    :多个空格在一起只会显示一个
        b.高矮不齐,底边对齐                                                                        :文字,图片大小不一,会让页面的元素出现高矮不齐的现象,但是浏览器中会发现底边对齐.
        c.自动换行,一行写不满,换行写

    6.行内元素和块级元素
        a.行内元素,块级元素特点
            a.1行内元素
                1 与其他行内元素并排
                2 不能设置宽高,默认宽度就是文字的宽度.
            a.2块级元素
                1 霸占一行,不能与其他任何元素并列
                2 并接受宽高的设定,默认宽度父亲的100%
        b.行内元素,块级元素区分
            标签区分
                1.文本级标签:p,span,a,b,i,u,em.
                2.容器级标签:div,h系列,li,dt,dd.
            b.1 行内元素:除了p之外,所有文本级标签,都是行内元素.p是文本标签,却是个块级元素.
            b.2 块级元素:所有容器级标签都是块级元素,外加p这个块级元素.
        c.块级元素和行内元素的相互转换(display)
            c.1 块级元素转化成行内元素,例如div 对于div设置 display:inline 即可
            c.2 行内元素转化成块级元素,例如span 对于span设置 display;block 即可

    7.脱离标准流
        a.float:浮动    (none,left,right)
            a.1 浮动元素特点:
                1.浮动的元素脱标(脱离了标准流)
                2 浮动的元素互相贴靠
                3 浮动的元素有"子围"效果
                4 浮动的元素收缩的效果(浮动元素紧凑效果)
            a.2 清除浮动:
                1.清除浮动原因:影响页面布局,使页面排版错乱
                2.清除浮动的方法:
                    .1.给父盒子设置高度    一般会常用页面中固定高度,且子元素并排.如导航栏
                    .2.clear:both     clear三值:left right both(当前元素左右两边都不允许有浮动)
                    .3.伪元素清除法     给浮动元素父盒子,也就是不浮动元素,添加clearfix的类,然后设置
                                    .clearfix:after{
                                        /*必须要写这三句话*/
                                        content: '.';
                                        clear: both;
                                        display: block;
                                    }

                                    例:/*新浪首页清除浮动伪元素方法*/
                                                  content: ".";
                                                    display: block;
                                                    height: 0;
                                                    clear: both;
                                                    visibility: hidden
                    .4.overflow:hidden
                                值                描述
                            visible    默认值。内容不会被修剪，会呈现在元素框之外。
                            hidden    内容会被修剪，并且其余内容是不可见的。
                            scroll    内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
                            auto    如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
                            inherit    规定应该从父元素继承 overflow 属性的值。

        b.绝对定位
        c.固定定位
    8.文本属性和字体属性
        a.文本属性:
            a.1 文本对齐:text-align属性规定元素中的文本的水平对齐方式.
                            属性值:none center left right justify
            a.2 文本颜色:    color属性
            a.3 文本首行缩进: text-indent属性规定元素首行所进度的距离,单位建议使用em
            a.4 text-decoration属性规定文本修饰的样式
                属性值:none(空 默认) underline(下划线) overline(定义文本上的一条线) line-through(定义穿过文本下的一条线)
                inherit(继承父元素的text-decoration属性的值)
            a.5 line-height 设定行高
        b.字体属性:
            b.1 字体大小: font-size表示设定字体大小,如果设定成inherit表示继承父元素的字体大小值.
            b.2 字体粗细: font-weight表示设置字体的粗细    属性值:none(默认值,标准粗细) bold(粗体) broder(更粗)
                   lighter(更细) 100~900(设置具体粗细,400等同于normal,而700等同于bold) inherit(继承父元素字体的粗细值)
            b.3 字体系列 font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
                        出现浏览器不支持的字体,会尝试执行下一个
            b.4 line-height行高
                针对单行文本垂直居中
                    公式:行高的高度等于盒子的高度,可以是当行文本垂直居中,注意值适用于单行文本.
                针对多行文本垂直居中
                    行高的高度不能小于字体的大小,不然上下字之间会紧挨在一起.
                    padding-top:(盒子高度-行高*行数)/2px    (同时需要将盒子的高度降低前面的值)
    9.超链接导航栏案例
            html结构
                <div class="nav">
                        <ul>
                            <li>
                                <a href="">路飞学城</a>
                            </li>
                            <li>
                                <a href="">老男孩</a>
                            </li>
                            <li>
                                <a href="">网站导航</a>
                            </li>
                            <li>
                                <a href="">网站导航</a>
                            </li>
                            <li>
                                <a href="">网站导航</a>
                            </li>
                            <li>
                                <a href="">网站导航</a>
                            </li>
                        </ul>
                    </div>

            css代码如下：
                *{
                padding: 0;
                margin: 0;
                }
                ul{
                list-style: none;
                }
                .nav{
                width: 960px;
                /*height: 40px;*/
                overflow: hidden;
                margin: 100px auto ;
                background-color: purple;
                /*设置圆角*/
                border-radius: 5px;
                }
                .nav ul li{
                float: left;
                width: 160px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                }
                .nav ul li a{
                display: block;
                width: 160px;
                height: 40px;
                color: white;
                font-size: 20px;
                text-decoration: none;
                font-family: 'Hanzipen SC';
                }
                /*a标签除外，不继承父元素的color*/

                .nav ul li a:hover{
                background-color: red;
                font-size: 22px;
                }

    10.background
        a. background-color属性表示背景颜色
        b. background-img:表示设置次元素的背景图片
        c. background-repeat:表示设置钙元素平铺的方式
                    值            描述
                repeat        默认。背景图像将在垂直方向和水平方向重复。
                repeat-x    背景图像将在水平方向重复。
                repeat-y    背景图像将在垂直方向重复。
                no-repeat    背景图像将仅显示一次。
                inherit        规定应该从父元素继承 background-repeat 属性的设置。
        d. background-position: 属性设置背景图像的起始位置。
                    这个属性设置背景原图像（由 background-image 定义）的位置

                属性值：

                    值
                        top left
                        top center
                        top right
                        center left
                        center center
                        center right
                        bottom left
                        bottom center
                        bottom right
                    描述
                        如果您仅规定了一个关键词，那么第二个值将是"center"。
                        默认值：0 0；    这两个值必须挨在一起。
        e.精灵图技术
            css精灵图(雪碧图)原理:
                只有一张大的合并图,需要显示小图标时,就需要截取大图的一小部分显示.
            css精灵图的好处:
                1.利用css sprites能减少网页的http请求,从而大大提高页面的属性
                2.css sprites能减少图片的字节
                3.解决了网页设计师在图片命名上的困扰,提高网页的制作效率.
                4.更换风光方便,只需改变一张,维护方便.
            css精灵图不足:
                1.css精灵图最大问题是内存使用
                2.拼图维护比较麻烦
                3.使css的编写变得困难
                4.css精灵图调用的图片不能被打印

            可以使用background综合属性制作通天banner，什么是通天banner呢，就是一般我们电脑的屏幕都是1439.但是设计师给我们的banner图都会比这个大，那么我们可以此属性来制作通天banner。

            background:  red  url('./images/banner.jpg')  no-repeat   center top;
            background-attach
            设置fixed之后，该属性固定背景图片不随浏览器的滚动而滚动

    10.定位:1.相对定位 2.绝对定位 3.固定定位
        1.相对定位:相当于自己原来的位置定位(参考点是原来的位置)
            现象和使用:
                1.如果当前元素仅仅设置了相对定位,那么与标准流的盒子没什么区别
                2.设置相对定位之后,才可以使用四个方向的属性:top,bottom,left,right
            特性: 1.不脱靶 2.形影分离 3.老家占坑(移动的过程也被占用)
            用途: 1.微调元素位置 2.做绝对定位的参考(父相子绝)

            position:relative(相对定位)
                a.三大特性:1.不脱靶 2.形影不离 3.老家流坑
                b.用途: 1.微调元素 2.做绝对定位的参考 3.作为"父相子绝"的参考
                c.参考点:以自己原本的本身位置做可参考点
        2.绝对定位:

            position:absolute(绝对定位)
                a.特性: 1.脱标 2.做遮盖效果,提成了层级
                b.用途: 1.父相子绝,用途很多(绝对重点)
                c.参考点:单个绝对定位,top属性描述,是以页面左上角定位
                        如果是父相子绝的,那么是以父辈元素左上角基准点

        3.position:static(固定定位)

            c.参考点:https://www.cnblogs.com/majj/p/9040408.html
        4.position:fixed

        注:
            父相子绝:父辈元素设置相对定位,子元素设置绝对定位

        5.定位优先级
            z-index压盖现象的四条规则: (四大特性,记住就能找到盒子了)
            1.z-index值表示谁压着谁,数值大的压着数值小的
            2.只有定位了的元素,才能有z-index,也就是说,不管相对定位,绝对定位,固定定位,都可以使        用z-index,而浮动元素不能使用z-index.
            3.z-index值没有单位,就是一个正整数,默认的z-index值为0,如果大家没有z-index值,谁在    上面压着别人,定位了元素,永远压住没有定位的元素.
            4.从父现象:父亲怂了,儿子再牛逼也没用