html+css

1、css样式表中！improtant原则

　　作用：强制调整优先级（一定是最后显示的），打破了优先级foot

<style type="text/css">
            .div{
                background-color: red;
                width: 200px;
                height: 100px;
                border: 1px solid aqua;
            }
            span{
                background-color: chartreuse !important;
                width: 100px;
                height: 98px;
                border: 1px solid blueviolet;
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <div class="div">
            <span></span>
        </div>

2、font-weight：; 调整字体粗细取值可英文可数字，数字范围为100~900

<style type="text/css">
            .div{
                background-color: red;
                width: 200px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                font-weight: lighter;
                border: 1px solid aqua;
            }
            span{
                background-color: chartreuse !important;
                width: 100px;
                height: 98px;
                border: 1px solid blueviolet;
                display: inline-block;
                font-weight:  bold;
                text-align: center;
                line-height: 98px;
            }
        </style>
    </head>
    <body>
        <div class="div">
            留白
            <span>留白</span>
        </div>
    </body>

3、letter-spacing ：;字符间距

span{
                background-color: chartreuse !important;
                 100px;
                height: 98px;
                border: 1px solid blueviolet;
                display: inline-block;
                font-weight:  bold;
                text-align: center;
                line-height: 98px;
                letter-spacing: 3px;
            }
        </style>
    </head>
    <body>
        <div class="div">
            留白
            <span>留白</span>
        </div>

4、text-indent: ; 首行缩进

span{
                 100px;
                height: 98px;
                border: 1px solid transparent;
                display: inline-block;
                text-indent: 1em;
            }
        </style>
    </head>
    <body>
        <div class="div">
            <span>页面留白</span>
        </div>
    </body>

5、text-decoration: ; 字体下划线

a{
     text-decoration: none;
}
</style>
</head>
<body>
    <div class="div">
        留白
        <span>留白</span>
        <a href="#">留白</a>
</div>

6、line-height: ; 行高

span{
                 100px;
                height: 98px;
                border: 1px solid blueviolet;
                display: inline-block;
                line-height: 98px;
            }
        </style>
    </head>
    <body>
        <div class="div">
            <span>留白</span>
        </div>
    </body>

7、box-sizing:border-box; 指定宽高度，确定元素边框

       span{
                 100px;
                height: 98px;
                border: 1px solid blueviolet;
                display: inline-block;
                box-sizing: border-box;
            }
        </style>
    </head>
    <body>
        <div class="div">
            <span></span>
        </div>
    </body>

8、border-radius: ; 边框弧度

span{
                 100px;
                height: 98px;
                border: 1px solid blueviolet;
                display: inline-block;
                border-radius: 20%;
            }
        </style>
    </head>
    <body>
        <div class="div">
            <span></span>
        </div>
    </body>

9、vertical-align: ; 水平垂直

10、除了边框透明transparent外可以使用opacity来表示（取值最大为1，最小为0）

11、clear浮动清除的3个值：left right both

span{
                 20px;
                height: 18px;
                border: 1px solid transparent;
                display: inline-block;
　　　　　　　　　 margin: 50px 50px;
　　　　　　　　　 clear: left;

            }
        </style>
    </head>
    <body>
        <div class="div">
            <span>留白</span>
        </div>
    </body>

12、overflow 当内容溢出边框时

span{
                 100px;
                height: 98px;
                border: 1px solid transparent;
                display: inline-block;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div class="div">
            <span>页面留白</span>
        </div>
    </body>

13、cursor 光标属性

span{
                 100px;
                height: 98px;
                border: 1px solid transparent;
                display: inline-block;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div class="div">
            <span></span>
        </div>

14、box-shadow 阴影的添加

span{
                 100px;
                height: 98px;
                border: 1px solid transparent;
                display: inline-block;
                box-shadow: 20px 20px 20px 20px chartreuse;
            }
        </style>
    </head>
    <body>
        <div class="div">
            <span></span>
        </div>
    </body>