Day04

4.3内外边距

margin外边距

padding内边距

用法相同，如果设置一个值，代表上下左右边距，如果设置两个值代表上下左右；如果设置4个值代表上右下左，其中也可以设置auto，表示居中

4.4.圆角边框

4个角

border-bordius设置边框圆角，如果设置一个值，代表上下左右圆角，如果设置两个值，代表左上右上右下左下，顺时针旋转

<style>
    div{
        width: 100px;
        height:50px;
        border: 10px solid red;
        border-radius: 50px 50px 0px 0px;
    }
</style>

4.5.阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*div{*/
        /*    width: 100px;*/
        /*    height:50px;*/
        /*    border: 10px solid red;*/
        /*    border-radius: 50px 50px 50px 50px;*/
        /*    box-shadow: 10px 10px 100px yellow;*/
        /*}*/
        /*要求：块元素有固定的宽度*/
        img{
            width: 100px;
            height:100px;
            border-radius: 50px;
            box-shadow: 10px 10px 100px yellow;
        }
    </style>
</head>
<body>
<div style="width:500px;height: 1000px;margin:0 auto">
    <div >
        <img src="images/图片.jfif" alt="">
    </div>
</div>
</body>
</html>

浮动

1.标准文档流

块级元素：

h1~h6 p div 列表.......

行内元素：

span a img strong......

行内元素可以被包含在块级元素中，反之，则不可以

2.display

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
/*<!--        block:块元素；*/
/*            inline：行内元素*/
/*            inlin-block:两者都是*/
/*            none消除外边-->*/
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display:inline-block ;
        }
    </style>
</head>
<body>
<div>   div块元素</div>
<span>span行内元素</span>
</body>
</html>

3.浮动

div{
    margin: 10px;
    padding: 5px;
}
#father{
    border: 1px #000 solid;
}
.layer01{
    border: 1px #F00 dashed;
    display: inline-block;
    float:right;
}
.layer02{
    border: 1px #666 dashed;
    font-size: 12px;
    line-height: 23px;
    display: inline-block;
    float: right;
    clear: both;
}
/*
clear:right   右侧不允许有浮动元素
clear：left    左侧不允许有浮动元素
clear：both    两侧不允许有浮动元素
clear：none
*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="father">
    <div class="layer01"><img src="images/图片.jfif" alt=""></div>
    <div class="layer02"> gdyuguygsuycgdsifuwgfuywgfsgsdfs</div>
</div>
</body>
</html>

5.4父级边框塌陷的问题

解决方案

1.增加父级元素的高度

2.增加一个空的div标签，清除浮动

3.overflow

在父级元素中增加一个overflow:hidden;（与overflow:auto类似，不过尽量用hidden）

hidden值的两种不同情况

/*div边框会随着内容的增加而变大，从而永久的包括内容*/
#father{
    border: 1px #000 solid;
    overflow: scroll;
}
/*overflow属性值设置为scroll时，会形成一个滚动栏；当设置为hidden时会隐藏包不住的部分，此时图片已经浮动*/
.layer01{
    border: 1px #F00 dashed;
    display: inline-block;
    float:right;
}
.layer02{
    border: 1px #666 dashed;
    font-size: 12px;
    line-height: 23px;
    display: inline-block;
    float: right;
    clear: both;
}
/*
clear:right   右侧不允许有浮动元素
clear：left    左侧不允许有浮动元素
clear：both    两侧不允许有浮动元素
clear：none
*/

4.给父类添加一个伪类：after

#father:after{
            content:"";
            display:block;
            clear:both;来清除div边框塌陷，避免空div
                    }

小结

1.浮动元素后加空div

简单，代码中尽量避免空div

2.设置父元素的高度

简单，元素假设有了固定的高度，就会被限制

3.overflow

简单，下拉的一些场景避免使

4.父类添加一个伪类：after（推荐）

写法稍微有点复杂，但没有副作用，推荐使用

5.5.对比

1.display

方向不可控制

2.float

浮动起来的话就会脱离标准文档流，所以要解决父级边框塌陷的问题

定位

1.相对定位

相对定位：position:relative

相对于原来的位置，进行指定的偏移，相对定位的话，他仍然在标准文档流中，原来的位置会被保留。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            padding: 0;
            border: 1px solid #666;
            border-radius: 20px;
        }
        /*#father:after {*/
        /*    content: "";*/
        /*    display: block;*/
        /*    clear: both;*/
        /*}*/
        #first{
            background-color: #b5c1cd;
            border: 3px dashed #f8e5a4;
            border-radius: 20px;
            position: relative;/* 相对定位：上下左右*/
            top: -20px;
        }
        #second{
            background-color: #37ff66;
            border: 3px dashed #FF0000;
            border-radius: 20px;
            position: relative;
            left: 20px;
        }
        #third{
            background-color: #3748ff;
            border:3px dashed #FF0000;
            border-radius: 20px;
            position: relative;
            bottom: -30px;
            /*float: right;*/
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

相对定位的方块定位练习题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width:300px;
            height:300px;
            padding: 10px;
            border: 2px solid red;
        }
        a{
            width: 100px;
            height: 100px;
            text-decoration: none;
            background: #37ff66;
            line-height: 100px;
            text-align: center;
            color: white;
            display: block;
        }
        a:hover{
            background: #FF0000;
        }
        .a2,.a4{
            position: relative;
            left: 200px;
            top: -100px;
        }
        .a5{
            position: relative;
            top: -300px;
            left:100px;
        }
    </style>
</head>
<body>
<div id="box">
    <a href="#" class="a1">链接1</a>
    <a href="#" class="a2">链接2</a>
    <a href="#" class="a3">链接3</a>
    <a href="#" class="a4">链接4</a>
    <a href="#" class="a5">链接5</a>
</div>
</body>
</html>

2.绝对定位

定位：基于xxx定位，上下左右

1.没有父级元素定位的前提下，相对于浏览器定位

2.假设父级元素存在定位，我们通常会相对于父级元素进行偏移

3.在父级元素范围内移动

相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，他不在标准文档流中，原来的位置不会被保留。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            padding: 0;
            border: 1px solid #666;
            position: relative;
        }
        /*#father:after {*/
        /*    content: "";*/
        /*    display: block;*/
        /*    clear: both;*/
        /*}*/
        #first{
            background-color: #b5c1cd;
            border: 3px dashed #f8e5a4;
            border-radius: 20px;
        }
        #second{
            background-color: #37ff66;
            border: 3px dashed #FF0000;
            position: absolute;
            right: 30px;
        }
        #third{
            background-color: #3748ff;
            border:3px dashed #FF0000;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

3.固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 1000px;
        }
        div:nth-of-type(1){/*绝对定位*/
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){/*固定定位*/
            width: 50px;
            height: 50px;
            background: yellow;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

4.z-index

#content{
    width: 260px;
    padding:0px;
    margin: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px solid red;
}
ul,li{
    padding: 0px;
    margin: 0px;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tixText,.tipBg{
    position: absolute;
    width: 260px;
    height: 25px;
    top: 129px;
}
.tixText{
    color: white;
    /*z-index:999;*/
}
.tipBg{
    background: black;
    opacity: 0.3;
}
/*可以使用z-index层级属性来实现在黑色背景上写字；也可以使用opacity:0.3属性来增强透明度*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="content">
    <ul>
        <li><img src="images/美女.png" alt=""></li>
        <li class="tixText">学习微服务，找u昂神</li>
        <li class="tipBg"></li>
        <li>时间：2099-01-01</li>
        <li>地点：月球一号基地</li>
    </ul>
</div>
</body>
</html>

posted @ 2022-10-07 22:32 宙斯xcl 阅读(154) 评论(0) 收藏举报

刷新页面返回顶部

xclxcl