CSS

一 CSS介绍

CSS是指层叠样式表(Cascading Style Sheets)，样式定义如何显示HTML元素，样式通常又会存在于样式表中。
使用css的目的是控制html各种元素使网页展示美观精致

二 css引入方式

1 行内式

<p style="background-color:red">hello world</p>

2 嵌入式

<head>
    <meta charset="utf-8">
    <title>title</title>
    <style>
        div{
            background-color:red;
        }
    </style>
</head>

3 链接式

将一个.css文件引入到html文件中

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

4 外联样式表 @import url()方式导入式

@import url(other.css)

三 CSS选择器

1 基本选择器

*:  通用元素选择器，匹配任何元素 * { margin 0; padding 0;}
E:  便签选择器，匹配所有使用E标签的元素 p{color：green；}
.info和E.info: class选择器，匹配所有class属性中包含info的元素
#info和E#info: id选择器， 匹配所有id属性等于info的元素

2 组合选择器

E,F     多元素选择器(群组选择器)，同时匹配所有E元素或F元素，E和F直接用逗号分隔          div,p { color:red; }
E F     后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔                li a { font-weight:bodf; }
E > F   子元素选择器，匹配所有E元素的子元素F,与后代选择器的区别是不会选中孙子辈元素      div > p { color：green; }
E + F   毗邻选择器,匹配所有紧随E元素之后的同级元素F

3 属性选择器

E[att] 匹配所有具有att属性的E元素，不考虑他的值                           p[title]    { color:red; }
E[att=val] 匹配所有att属性等于"val"的E元素
E[att~=val] 匹配所有att属性具有多个空格分隔的值，其中一个值属于val的E元素    td[class~="name"]  {color:#f00;}
E[att^=val] 匹配属性值以指定开头的每个元素                               div[class^="test"] { background:red; }
E[att$=val] 匹配属性值以指定结尾的每个元素
E[att*=val] 匹配属性值中包含指定值的每个元素
p：before   在每个<p>元素的内容之前插入内容                              p:before{ content:"hello";color:red;}
p：after    在每个<p>元素的内容之后插入内容

嵌套注意规则

1 块及元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其他内联元素
2 块级元素不能放在p里面
3 有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1，h2,h3,h4,p,dt
4 li内可以包含div
5 块级元素与块级元素并列内联元素与内联元素并列

CSS选择权重总结

先看有没有选中,如果选中了就数数(id,class,标签的数量)谁的权重大就显示谁的属性

内联选择器权重：1000
ID选择器：100
类选择器：10
元素选择器权重：1
如果没有被选中，权重为0
如果属性都是被继承下来的权重都是0"就近原则":即谁描述的近就显示谁的属性
注意：继承来的属性的权重非常低

四 CSS伪类以及伪元素

a:link              未单击访问时的超链接样式
a:visited           单击访问后超链接样式
a:hover             鼠标悬浮其上的超链接样式
a:active            鼠标单机未释放的超链接样式
input：focus        当专注到输入框的样式
div ul li:first-child       选中li标签的第一个元素
div ul li：nth-child(3)     选中当前指定的元素 数值从1开始
div ul li：nth-child(n)     n表示选中索引从0开始 0的时候表示没有选中
div ul li：nth-child(2n)    所有偶数
div ul li：nth-child(2n-1)  所有基数

css伪元素选择器

 first-lette       用于为文本首字母设置特殊样式
 before            用于在元素内容前面插入新内容
 after             用于在元素内容后面插入新内容，在布局时可以用来清除浮动

五 CSS样式处理

1 字体样式

font-family 设置字体类型
font-size 设置字体大小
font-style 设置字体风格
font-weight 设置字体粗细
font 在一个声明中设置所有字体属性

2 文本样式

color 设置文本颜色
text-align 设置元素水平对齐方式
text-indent 设置首行文本的缩进
line-height 设置文本的行高事项单行垂直居中
text-decoration 设置文本的装饰
letter-spacing 文字与文字之间的距离
word-spacing 英文单词之间的距离

3 背景样式

background-color 设置背景颜色
background-image 设置背景图像路径
backgroup-repeat 设置背景重复方式
backgroup-position 设置背景定位

4 单位

px：绝对单位。一旦设置了值，不够网页如何编号始终如一
em：相对单位。当前某块区域的字体大小，比如给P标签设置了字体大小20px, 那么1em=20px
rem：相对单位。主要应用于移动端

六 CSS盒子模型

盒模型：在网页中基本都会显示一些方方正正的盒子，这种盒子被称为盒子模型。
重要属性：width height padding border margin
weight,height: 指的是内容宽高而不是整个盒子真实的宽高
盒子模型的计算: 如果想保证盒子的真实宽度，加width应该减少padding，减width应该加padding

1 边框 boder

border-top-style 上边框样式
border-right-style 右边框样式
border-bottom-style 下边框样式
border-left-style 左边框样式
border-style 设置四个边框样式

2 内边距padding

padding控制的是盒子内容到盒子border之间的距离，设置了padding值是额外加载原来大小之上的width+padding，如果不想给不实现大小，那么就在width减去padding方向对应的值

3 外边距margin

外边距控制的是元素与元素之间的距离，margin也有四个方向，会改变实际大小背景色不会渲染到marigin区域，但是这个区域也属于盒子一部分

margin垂直方向上会出现外边距合并
使用margin: 0 auto 水平居中盒子。使用条件：

1 必须有width,要明确width,文字水平居中使用text-align:center
2 只有标准流下的盒子才能使用margin:0 auto, 当一个盒子浮动了，固定定位或绝对定位了就无法使用margin: 0 auto
3 margin:0 auto居中盒子而不是居中文本

4 清除某些HTML元素的默认样式:

# 也可以引入rest css
body,p,ul,ol,dl,dt{
    margin:0;
    padding:0;
}
ul,ol{
    list-style:none
}
input{
    border:none;
    outline:none
}

5 圆角

border-radius: 50% 圆形

6 阴影效果

box-shadow： 0 0 15px  // 阴影效果x y 阴影模糊程度 阴影颜色

7 设置行内元素的水平垂直居中

display: table-cell;
vertical-align: middls;

8 块级元素水平居中

(1) 方式一

.box{
    width:200px;
    height：200px;
    position:relative;
    background-color:red;
}
.child{
    width：100px;
    height：100px;
    background-color:green;
    position:absolute
    margin: auto;
    left:0;
    right:0;
    top:0;
    bottom:0;
}

(2) 方式二

.box{
    width:200px;
    height：200px;
    background-color:red;
    display:table-cell;
    vertical-align: middle
    text-align:center
}

.child{
    width：100px;
    height：100px;
    background-color:green;
    display:inline-block;
    line-height:100px
}

(3) 方式三

.box{
    width:200px;
    height：200px;
    background-color:red;
    position:relative;
}

.child{
    width：100px;
    height：100px;
    background-color:green;
    position:absolute;
    top:50%
    left:50%
    margin-left:-50px
    margin-top:-50px
}

七 CSS页面浮动

文档流：可见元素在文档中显示位置

浮动产生的效果：

浮动可以使元素按指定位置排列，直到遇到父元素的边界或另一个元素的边界停止
如果父元素没有足够的空间那么第三个盒子紧贴着第二个盒子，第二个盒子紧贴第一个盒子，第一个贴着边
如果没有足够的空间那么会靠着第一个盒子，如果没有足够的空间靠着第一个盒子，自己会往边贴

浮动效果

1 浮动可以使元素脱离文档流，不占位置
2 浮动会使元素提升层级
3 浮动可以使块元素在一行内排列不设置宽高时可以使元素适应内容
4 浮动可以使行内元素支持宽高所有便签一旦设置浮动都不区分行内和块状元素

浮动产生的问题

父元素不设置高度，子元素设置浮动之后，不会撑开父元素的高度,那么此时父盒子没有高度了。如果在次父盒子下面还有一个标准流的盒子，那么就会影响页面的布局。
所以我们要解决浮动带来的页面布局错乱问题------清除浮动。

清除浮动的方法：

1 父元素设置高度是，子元素设置了浮动不会撑开父元素的高度，子元素不占位置
2 给浮动元素最后一个加一个空的块级元素，且改元素不浮动，设置clear:both
3 给最后一个盒子添加 visibility: hidden; clear:both; display: block; content:"" height:0; 官方推荐
4 给父元素添加overflow:hidden

浮动：float

left     元素向左浮动       /*左浮动 左侧为起始，从左往右依次排列*/
right    元素向右浮动       /*右浮动 右侧为起始，从左往右依次排列*/

八 CSS页面布局相关属性

1 Overflow属性

visible 默认值，内容不会被修剪,会呈现在盒子之外
hidden 内容会被修剪，并其余内容不可见
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
auto 如果内容被修剪，则浏览器会显示滚动以便查看其余内容

2 display属性

控制元素的显示和隐藏
块级元素与行内元素的转变

none 设置元素不会被显示
inline 元素会被显示为内联元素
block 元素会被显示为块级元素
inline-block 行内块元素
visibility：hidden 隐藏标签但是仍然占用位置

3 position属性

static 默认值,没有定位

relative 相对定位

特点：1 不脱标准文档流 2 形影分离 3 老家流坑用处：1微调页面信息 2 做绝对定位的参考位置
相对自身原来位置进行偏移，设置相对定位的盒子会相对它原来的位置，通过指定偏移到达新的位置
设置了相对定位的网页元素，无论是在标准流还是在浮动流中，都不会对它的父级元素和相邻元素有任何影响，它只只对自身原来的位置进行偏移

absolute 绝对定位

在没有父级元素定位时，以浏览器的左上角为基准，有父级的情况下，父级设置相对定位，子级设置绝对定位，是以父盒子为基准进行定位
可以提升层级关系
脱离文档流

fixed 固定定位

特性：1 脱离标准流 2 提升层级 3 固定不变不会随着页面滚动而滚动

参考点：设置固定定位用top描述，那么是以浏览器左上角为参考点，如果用bottom描述那么是以浏览器的左下角为参考点
绝对定位居中的办法: 设置子元素的绝对定位,left：50%， margin-left等于元素宽度的一半实现绝对定位盒子居中

4 z-index

(1) z-index值表示谁压着谁，数值大的亚盖住数值小的，
(2) 只有定位了的元素才能有z-index，也就是说不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用。
(3) z-index值没有单位就是一个正整数
(4) 如果大家都没有z-index值或者z-index值一样那么谁写在html的后面谁在上面压着谁，定位了的元素永远压住没有定位的元素
(5) 从父现象

九几个css布局案例

1 使用hover做浮动选项栏

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            *{margin: 0;padding: 0}
            .page-header{
                height: 48px;
                background-color: #303a40;
                color: white;
                line-height: 48px;
            }
            .page-body .body-menu{
                position: absolute;
                top: 48px;
                bottom: 0;
                left: 0;
                width: 200px;
                border: 1px solid;
            }
            .page-body .body-content{
                position: absolute;
                top: 50px;
                bottom: 0;
                left: 205px;
                right: 0;

                border: 1px solid rebeccapurple;
            }

            .page-header .logo{
                float: left;
                width: 200px;
                text-align: center;
            }

            .page-header .user{
                float: right;
                padding: 0 40px;
                height: 48px;
                position: relative;
            }
            .page-header .user:hover{
                background-color: #EBA702;
            }

            .page-header .user:hover .more{
                display: block;

            } 
            .page-header .user .more{
                position: absolute;
                top: 48px;
                right: 0;
                width: 200px;
                border: 1px solid green;
                background-color: grey;
                display: none;
                z-index: 999;
            }
             .page-header .user .more a{
                 display: block;
             }
            .page-header .picture img{
                width: 30px;
                height: 30px;
                margin-top: 7px;
                border-radius: 50%;
            }
        </style>
    </head>
    <body>
        <div class="page-header">
            <div class="logo">python</div>
            <div class="user">
                <a href="javascript:" class="picture">
                    <img src="二维码.png">
                </a>
                <div class="more" style="">
                    <a>注销</a>
                    <a>我的信息</a>
                </div>
            </div>
        </div>
        <div class="page-body">
            <div class="body-menu"></div>
            <div class="body-content"></div>
        </div>
    </body>
</html>

2 后台管理系统页面布局

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            *{margin: 0; padding: 0}
            .menu{
                position:absolute;
                left: 200px;
                width: 220px;
                top: 48px;
                bottom: 0;
                border: 1px solid red;
            }
            .fixed{
                position:fixed;
                top:0;
            }
            
            .menu a{
                display: block;
            }
           .menu a.active{
                background-color: #1eb1af;
            }
        </style>
    </head>
    <body>
        <div style="height: 48px;background-color: #303a40"></div>
        <div class="menu">
            <a num="menu1" class="">菜单一</a>
            <a num="menu2">菜单二</a>
            <a num="menu3">菜单三</a>
            <a num="menu4">菜单四</a>
        </div>
        <div id="content" style="position:absolute;left: 430px;  top: 48px;bottom: 0; right:200px; border: 1px solid green">
            <div id="menu1" class="level1" style="height: 500px;background-color: rebeccapurple"></div>
            <div id="menu2" class="level1" style="height: 900px;background-color: #303a40"></div>
            <div id="menu3" class="level1" style="height: 1000px;background-color: #84a42b;"></div>
            <div id="menu4" class="level1" style="height: 800px;background-color: blue;"></div>
        </div>
    </body>
    <script src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function () {

            $(document).scroll(function () {
                var scrollTop = $(document).scrollTop();
                if(scrollTop>48){
                    $('.menu').addClass('fixed')
                }else {
                    $('.menu').removeClass('fixed');
                    $('.menu a').eq(0).removeClass('active')
                }


                $('#content').children().each(function () {
                    var eleTop = $(this).offset().top;
                    var winTop = eleTop -scrollTop;
                    var winBottomTop = eleTop + $(this).height() - scrollTop;

                    // 滚动高度
                    // 文档高度
                    // 窗口的高度
                    // 最底部 = 文档高度-窗口高度
                    var docHeight = $(document).height();
                    var winHeight = $(window).height();
                    if(docHeight - winHeight == scrollTop){
                        $('.menu a:last').addClass('active').siblings().removeClass('active')
                    }else if (winTop<=0 && winBottomTop>=0){
                        var id = $(this).attr('id');
                        $('.menu a[num='+$(this).attr('id')+']').addClass('active').siblings().removeClass('active')
                    }
                })
            })
        });

    </script>
</html>

CSS