CSS基础知识之背景阴影轮廓线清除浮动带来的影响的方法两种标签的边距问题变态盒模型练习之拼接图相对定位绝对定位练习之船图

目录：

盒子阴影

轮廓线

清除浮动带来的影响的方法

两种标签的边距问题

变态盒模型

练习之拼接图

相对定位

绝对定位

练习之船图

盒子阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #div1{
            width: 300px;
            height: 300px;
            margin: 0 auto;
            background-color: #878787;
            box-shadow: 10px 5px 0px 0px green;
            /*x轴偏移  y轴偏移    模糊范围    阴影扩展范围  阴影颜色*/
        }
    </style>
    <title>Title</title>
</head>
<body>
<div id="div1">
</div>
</body>
</html>

运行图

轮廓线

案例一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #div1 {
            width: 475px;
            height: 330px;
            border: 10px solid red;
            border-right: 20px solid red;
            padding: 10px 15px 20px 10px;
            outline: 2px dotted blue;/*轮廓线*/
        }
    </style>
    <title>保时捷+轮廓线</title>
</head>
<body>
<div id="div1">
    <img src="../../img/baoshijie.jpg" alt="" width="450" height="300">
</div>
</body>
</html>

运行图

案例2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        input:focus{
            outline: none;/*指针选取时，没有轮廓线*/
        }
    </style>
    <title>轮廓线</title>
</head>
<body>
姓名：<input type="text"> <br>
姓名：<input type="text">
</body>
</html>

运行图

如果没有

input:focus{
            outline: none;/*指针选取时，没有轮廓线*/
        }
这段，鼠标指针点击输入框，输入框边框会变蓝色，有了这段，变化只是输入框里出现光标。

浮动：怎么清除浮动带来的影响

有两种方法，全在代码里标注起来了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #div1{
            height: 100px;
            background-color: red;
        }
        #div2{
            /*height: 400px;*/
            background-color: yellow;
            overflow: hidden;
        }
        #div3{
            height: 100px;
            background-color: green;
            clear: both;
        }
        #div21{
            width: 20%;
            height: 750px;
            background-color: aqua;
            float: left;
        }
        #div22{
            width: 60%;
            height: 750px;
            background-color: aquamarine;
            float: left;
        }
        #div23{
            width: 10%;
            height: 750px;
            background-color: bisque;
            float: left;
        }
        /*#div26{!*方法一：清除浮动野路子*!
            clear: both; 
        }*/
        /*.clearfix{
            zoom: 1;!*兼容模式:给ie低版本*!
        }
        .clearfix:after{ !*方法二：清除浮动best方法*!
            content: "";
            display: block;
            clear: both;
        }*/
    </style>
    <title>浮动：怎么清除浮动带来的影响</title>
</head>
<body>
<div>
    <div id="div1"></div>
    <div id="div2" class="clearfix">
        <div id="div21">左</div>
        <div id="div22">中</div>
        <div id="div23">右</div>
        <!--<div id="div26"></div>-->
    </div>
    <div id="div3"></div>
</div>
</body>
</html>

行级标签和块级标签　　两种盒子模型的外边距问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        span {
            height: 20px;
            background-color: #878787;
        }

        #s1 {
            margin-right: 20px;
        }

        #s2 {
            margin-left: 30px;
        }
        /*距离相加*/
        div {
            height: 30px;
            background-color: red;
        }

        #div1 {
            margin-bottom: 20px;
        }

        #div2 {
            margin-top: 30px;
        }
        /*距离选最大的展示*/
    </style>
    <title>Margin</title>
</head>
<body>
<span id="s1">asdfasf</span>
<span id="s2">asfdasfa</span>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>

运行图

结果：span两个盒子左右相距50px　　div两个盒子上下相距30px

知识点：span标签是行级，所以看她的margin左右边距，会发现　　两个span盒子模型的最终距离是margin边距相加的

　　　　div标签是块级，看他的margin上下边距，会发现　　两个div盒子的最终距离　　展现的是其中margin边距最大的

变态盒模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #left {
            height: 100px;
            width: 20%;
            background-color: #F2AD0A;
            float: left;
            border: 1px solid green;
        }

        #center {
            height: 100px;
            width: 60%;
            background-color: #FF0000;
            float: left;
        }

        #right {
            height: 100px;
            width: 20%;
            background-color: #FFFF00;
            float: left;
        }
    </style>
    <title>怪异盒子模型</title>
</head>
<body>

<div>
    <div id="left"></div>
    <div id="center"></div>
    <div id="right"></div>
</div>

</body>
</html>

运行图


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #left {
            height: 100px;
            width: 20%;
            background-color: #F2AD0A;
            float: left;
            border: 1px solid green;
            /*变态盒模型*/
            box-sizing: border-box; /*内容区变少了*/
        }

        #center {
            height: 100px;
            width: 60%;
            background-color: #FF0000;
            float: left;
        }

        #right {
            height: 100px;
            width: 20%;
            background-color: #FFFF00;
            float: left;
        }
    </style>
    <title>怪异盒子模型</title>
</head>
<body>

<div>
    <div id="left"></div>
    <div id="center"></div>
    <div id="right"></div>
</div>

</body>
</html>

运行图

上边两个运行图的差别就是有无

box-sizing: border-box;这段的区别。

练习之拼接图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #container {
            height: 500px;
            width: 800px;
            margin: 0 auto;
        }

        #top {
            height: 100px;
        }

        #tleft {
            height: 100px;
            width: 20%;
            background-color: antiquewhite;
            float: left;
        }

        #tcenter {
            height: 100px;
            width: 60%;
            background-color: aquamarine;
            float: left;
        }

        #tright {
            height: 100px;
            width: 20%;
            background-color: bisque;
            float: left;
        }

        #center {
            height: 50px;
            background-color: chartreuse;
        }

        #bottom {
            height: 350px;
        }

        #bleft {
            height: 350px;
            width: 75%;
            float: left;
        }

        #bright {
            height: 350px;
            width: 25%;
            background-color: darkturquoise;
            float: left;
        }

        #btop {
            height: 50%;
        }

        #btleft {
            height: 100%;
            width: 50%;
            background-color: cornflowerblue;
            float: left;
        }

        #btright {
            height: 100%;
            width: 50%;
            background-color: bisque;
            float: left;
        }

        #bbottom {
            height: 50%;
        }

        #bbleft {
            height: 100%;
            width: 50%;
            background-color: coral;
            float: left;
        }

        #bbright {
            height: 100%;
            width: 50%;
            background-color: cyan;
            float: left;
        }
    </style>
    <title>色彩图拼接</title>
</head>
<body>
<div id="container">
    <div id="top">
        <div id="tleft"></div>
        <div id="tcenter"></div>
        <div id="tright"></div>
    </div>
    <div id="center"></div>
    <div id="bottom">
        <div id="bleft">
            <div id="btop">
                <div id="btleft"></div>
                <div id="btright"></div>
            </div>
            <div id="bbottom">
                <div id="bbleft"></div>
                <div id="bbright"></div>
            </div>
        </div>
        <div id="bright"></div>
    </div>
</div>
</body>
</html>

运行图：

相对定位：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        /*相对定位：
            1：相对与自己原来的位置进行定位
            2：移动以后，自己原来的位置不会被其他元素占用*/
        #left {
            height: 50px;
            width: 200px;
            background-color: aqua;
            float: left;
        }

        #center {
            height: 50px;
            width: 200px;
            background-color: antiquewhite;
            float: left;
            position: relative;
            top: 20px;
            left: 50px;
            z-index: -1; /*有这条代码就会让right盖住center*/
        }

        #right {
            height: 50px;
            width: 200px;
            background-color: aquamarine;
            float: left;
        }
    </style>
    <title>相对定位</title>
</head>
<body>
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</body>
</html>

运行图

绝对定位：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        #div1 {
            height: 300px;
            background-color: #FFFF00;
            margin: 20px 0 0 20px;
            overflow: hidden;
            position: relative;
        }

        #div2 {
            height: 250px;
            width: 90%;
            background-color: aqua;
            margin: 20px 0 0 20px;
            overflow: hidden;
        }

        #div3 {
            height: 200px;
            width: 80%;
            background-color: chartreuse;
            margin: 20px 0 0 20px;
            overflow: hidden;
        }

        #left {
            height: 50px;
            width: 200px;
            background-color: #433eff;
            float: left;
        }

        #center {
            height: 50px;
            width: 200px;
            background-color: antiquewhite;
            float: left;
            position: absolute;
            top: 10px;
            left: 10px;
        }

        #right {
            height: 50px;
            width: 200px;
            background-color: aquamarine;
            float: left;
        }
    </style>
    <title>绝对定位</title>
</head>
<body>
<!--绝对定位：
        1：相对于，离他最近的，bingqie使用了定位的父元素
                    如果没有符合的，最后以body为基准。
        2：元素原来的空间会被其他元素占用。-->
<div id="div1">
    <div id="div2">
        <div id="div3">
            <div id="left"></div>
            <div id="center"></div>
            <div id="right"></div>
        </div>
    </div>
</div>
</body>
</html>

运行图

案例之船图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #container {
            width: 306px;
            height: 142px;
            background-image: url("../../img/duo.png");
            margin: 0 auto;
            margin-top: 50px;
        }

        #img1 {
            position: relative;
            top: 25px;
            left: 0px;
            opacity: 0;
        }

        #img1:hover {
            opacity: 1;
        }

        #img2 {
            position: relative;
            top: -33px;
            left: -64px;
            opacity: 0;
        }

        #img2:hover {
            opacity: 1;
        }

        #img3 {
            position: relative;
            top: -148px;
            left: 160px;
            opacity: 0;
        }

        #img3:hover {
            opacity: 1;
        }

        #img4 {
            position: relative;
            top: -90px;
            left: 99px;
            opacity: 0;
        }

        #img4:hover {
            opacity: 1;
        }
    </style>
    <title>船图</title>
</head>
<body>
<div id="container">
    <img src="../../img/duo1.png" alt="1" id="img1">
    <img src="../../img/duo2.png" alt="2" id="img2">
    <img src="../../img/duo3.png" alt="3" id="img3">
    <img src="../../img/duo4.png" alt="4" id="img4">

</div>
</body>
</html>

运行图

运行效果是鼠标指针点在哪个图标上，那个图标就会展现成放大外凸

相关阅读:
JSON格式化
 mysql字符串操作
 MySLQ排序后标记排行
 RestTemplate调用POST接口
 FULLTEXT INDEX全文索引
 Convert AS400 Spool to PFD Tools – PDFing
openssl制作双向认证经过验证可行
 https web service in Tibco & PC
Python获取百度浏览记录
 Python2.7学习
原文地址：https://www.cnblogs.com/haloxinghong/p/7243085.html

CSS基础知识之背景阴影 轮廓线 清除浮动带来的影响的方法 两种标签的边距问题 变态盒模型 练习之拼接图 相对定位 绝对定位 练习之船图

CSS基础知识之背景阴影轮廓线清除浮动带来的影响的方法两种标签的边距问题变态盒模型练习之拼接图相对定位绝对定位练习之船图