day52

css样式操作

给标签设置长宽

只有块儿级标签才可以设置长宽

行内标签设置了没有任何作用（仅仅取决于内部文本值）

div {
            width: 200px;
            height: 400px;
        }

        span {
            width: 50px;
            height: 50px;
        }

字体颜色 color后面可以跟多种颜色数据

颜色英文 red

fffff 直接用pycharm提供的取色器即可

rgb(1,1,1) 可以利用截图软件获取三基色数字

rgba(0,128,128,0.5) 最后一个数字 只能用0~1用来调节颜色的透明度

<!--字体属性--> 
<style>
        p {
            font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif;
            font-size: 24px;
            font-weight: lighter;
            /*color: 'red';*/
            /*color: #06a0de;*/
            /*color: rgb(0,128,128);  !*  数字范围只能是0~255*!*/
            color: rgba(0,128,128,0.9);
        }
    </style>

<!--文字属性-->  

<style>
        p {
            /*text-align: center;*/
            /*text-align: left;*/
            /*text-align: right;*/
            /*text-align: justify;*/

            /*text-decoration: underline;*/
            /*text-decoration: overline;*/
            /*text-decoration: line-through;*/
            text-decoration: none;
            font-size: 24px;
            text-indent: 48px;
        }
        a {
            text-decoration: none;
        }
    </style>

语义

        a {
            text-decoration: none;
        }
        <!--取消a标签默认的下划线-->

背景图片

默认是铺满整个区域

通常一个页面上的一个个的小图标 并不是单独的
而是一张非常大的图片 该图片上有网址所用到的所有的小图标
通过控制背景图片的位置 来显示不同的图标样式

<!--背景属性-->
<style>
        div {
            width: 400px;
            height: 400px;
            /*background-color: orange;*/
            /*background-image: url("111.png");*/
            /*background-repeat: no-repeat;  !*不平铺*!*/
            /*background-repeat: repeat-x;  x轴*/
            /*background-repeat: repeat-y;*/
            /*background-position: center center;*/
            /*background-position: 10px 50px;  !*第一个参数是x轴 第二个参数y轴*!*/
            /*支持简写*/
            background: url("111.png") red no-repeat center center;
        }
    #d1 {
            height: 600px;
            /*background: url("111.png");*/
            background: url("http://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D450%2C600/sign=e9952f4a6f09c93d07a706f3aa0dd4ea/4a36acaf2edda3cc5c5bdd6409e93901213f9232.jpg");
            background-attachment: fixed;
        }
    </style>

边框

border后面写三个参数 位置没有关系

颜色

字体

样式

可以单独设置 样式 颜色 粗细

border-top-style:dotted;
border-top-color: red;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;

可以单独设置某一边的样式

/*border-top: 3px solid red;*/
/*border-left: 1px dotted green;*/
/*border-right: 5px dashed blue;*/
/*!*border-bottom: 10px solid pink;*!*/
也可以简写统一设置
border: solid 10px red; 

<!--边框-->    
<style>
        p {
            /*border-top: 3px solid red;*/
            /*border-left: 1px dotted green;*/
            /*border-right: 5px dashed blue;*/
            /*!*border-bottom: 10px solid pink;*!*/
            /*border-bottom: yellow 10px dotted;*/
            /*border: solid 10px red;*/
            border-style: dot-dash;
            border-color: ;
        }
    </style>

画圆

<style>
        div {
            border: 1px solid black;
            background-color: red;
            height: 400px;
            /*width: 400px;*/
            width: 800px;
            /*border-radius: 20px;*/
            /*border-radius: 50%;*/
        }
    </style>

display属性

inline将块儿级标签变成行内标签

block能将行内标签 也能设置长宽和独占一行

inline-block; 既可以设置长宽，也可以在一行展示

display:none 隐藏标签 并且标签原来占的位置也没有了

visibility:hidden隐藏标签 但是标签原来的位置还在

    <style>
        /*.c1 {*/
            /*width: 50px;*/
            /*height: 50px;*/
            /*background-color: red;*/
            /*border: 3px solid red;*/
            /*display: inline;  !*将快儿级标签变成行内标签*!*/
        /*}*/
        /*.c2 {*/
            /*width: 50px;*/
            /*height: 50px;*/
            /*background-color: green;*/
            /*border: 3px solid green;*/
            /*display: inline;  !*将快儿级标签变成行内标签*!*/
        /*}*/
        /*.c1 {*/
            /*border: 5px solid red;*/
            /*display: block;  !*让行内标签 能够设置长宽 并且能够独占一行*!*/
            /*height: 400px;*/
            /*width: 400px;*/
        /*}*/
        /*.c2 {*/
            /*border: 5px solid green;*/
            /*display: block;  !*让行内标签 能够设置长宽 并且能够独占一行*!*/
        /*}*/

        .c1 {
            display: inline-block;  /*即可以设置长宽 也可以在一行展示*/
            border: 3px solid red;
            width: 200px;
            height: 100px;
        }
        .c2{
            display: inline-block;  /*即可以设置长宽 也可以在一行展示*/
            border: 3px solid green;
            width: 200px;
            height: 100px;
        }
    </style>

盒子模型

谷歌浏览器body默认有8px外边距

可以通过设置取消

body{
    margin:0px;
}

以快递盒为例

1. 两个快递盒之间的距离（标签与标签之间的距离） 即外边距（margin）
2. 快递盒盒子的厚度（边框border） 边框（border）
3. 快递盒中的物品距离内边框的距离（内部文本与内边框之间的距离） 内边距（内填充）padding
4. 物品的大小（文本大小） 内容（content）

<!--盒子模型-->
/*margin: 15px;  !*只写一个参数 上下左右全是*!*/
/*margin: 10px 20px;  !*第一个控制的上下  第二个是左右*!*/
/*margin: 10px 20px 30px;  !*第一个控制的上  第二个是左右 第三个是下*!*/
margin: 10px 20px 30px 40px;  /*上  右   下  左*/
padding简写规律跟margin一样

#d1 {
            margin: 0 auto;
        }
        只能左右居中  不能上下居中

浮动（重点）

float

在css中，任何元素都可以浮动。

浮动的元素 是脱离正常文档流的（原来的位置会让出来）

浏览器会优先展示文本内容（重点）

浮动带来的影响

会造成副本标签塌陷（类似口袋瘪了）

如何解决？

clear能清除浮动带来的影响

/*公共样式*/
.clearfix:after {
            content: '';
            clear: both;  /*左右两边都不能有浮动的元素*/
            display: block;
        }
        <!--哪个父标签塌陷了 就给谁加clearfix这个类属性值-->

溢出属性

overflow

    <style>
        div {
            height: 50px;
            width: 50px;
            border: 3px solid black;
            /*overflow: hidden;  !*溢出的直接隐藏*!*/
            /*overflow: auto;  */
        }
    </style>

圆形头像

<style>
        body {
            background-color: darkgray;
        }
        .c1 {
            height: 120px;
            width: 120px;
            border: 5px solid white;
            border-radius: 50%;
            overflow: hidden;
        }
        img {
            width: 100%;
        }
    </style>

定位

所有的标签默认都是静态的 无法改变位置

即position:static;

必须将静态的状态修改成定位之后

相对定位（了解）

relative 相对于标签原来的位置移动

绝对定位（重点）

absolute 相对于已经定位过（只要不是static都可以）的父标签，再做定位

固定定位（例如回到顶部）

fixed 相对于浏览器窗口 固定在某个位置不动

<!--定位-->
    <style>
        body {
            margin: 0;
        }
        /*.c1 {*/
            /*width: 100px;*/
            /*height: 100px;*/
            /*background-color: gold;*/
            /*position: relative;*/
            /*left: 100px;*/
            /*top: 100px;*/
        /*}*/
        /*.c2 {*/
            /*position: relative;  !*将c2从一个不是定位标签变成已经定位过的标签*!*/
            /*height: 100px;*/
            /*width: 200px;*/
            /*background-color: black;*/
        /*}*/
        /*.c3 {*/
            /*position: absolute;*/
            /*height: 200px;*/
            /*width: 800px;*/
            /*top: -50px;*/
            /*left: 200px;*/
            /*background-color: pink;*/
        /*}*/
        .c2 {
            border: 5px solid black;
            background-color: pink;
            position: fixed;
            bottom: 50px;
            right: 50px;
        }
    </style>

位置的辩护是否脱离文档流

1. 不脱离文档流

   相对定位

2. 脱离文档流

   浮动元素、绝对定位、固定定位

z-index控制z轴

<style>
        .cover {
            background-color: rgba(128,128,128,0.4);
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 999;
        }
        .modal {
            background-color: white;
            z-index: 1000;
            position: fixed;
            height: 200px;
            width: 400px;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -200px;
        }
    </style>

透明度

opacity既可以调颜色 也可以调字体

    <style>
        .c1 {
            background-color: rgba(128,128,128,0.4);
            opacity: 0.2;
        }
        .c2 {
            opacity: 0.2;
            background-color: red;
        }
    </style>