爱码网专注于资源免费下载

页面美化专题(div+css基础)

Jking2024-03-18 11:18:13587技术文章页面美化专题divCSS基础

盒子模型

CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
下面的图片说明了盒子模型(Box Model):
页面美化专题(div+css基础)-第1张图片

不同部分的说明:
Margin(外边距) - 清除边框外的区域,外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域,内边距是透明的。
Content(内容) - 盒子的内容,显示文本和图像。

定位技术

div是行级元素,定位技术有两种:float,position

float

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>采用div浮动对div进行排版</title>
</head>
<style type="text/css">
body{
        margin: 0px 1px 2px 3px;
}
.father{
        background-color: #ffff99;
        width: 100%;
        height: 100px;
        border:1px dashed green;
}

.son1{
        float: left;
}
.son2{
        float: left;
}
.son3{
        float: left;
}
</style>
<body>
<div class="father">
        <div class="son1">aaaaaaaaaaaaaaaaaa</div>
        <div class="son2">bbbbbbbbbbbbbbbbbb</div>
        <div class="son3">cccccccccccccccccc</div>
</div>
</body>
</html>

注意问题

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>div浮动引发的问题</title>
</head>
<style type="text/css">
body{
        margin: 0px 1px 2px 3px;
}
.father{
        background-color: #ffff99;
        width: 100%;
        height: 100px;
        border:1px dashed green;
}

.son1{
        float: left;
}
.son2{
        float: left;
}
.son3{
        float: left;
}
</style>
<body>
<div class="father">
        <div class="son1">aaaaaaaaaaaaaaaaaa</div>
        <div class="son2">bbbbbbbbbbbbbbbbbb</div>
        <div class="son3">cccccccccccccccccc</div>
        <div class="son4">dddddddddddddddddd</div> <!-- son4没有浮动,但它会受上面浮动的影响,也跟着浮动了 -->
</div>
</body>
</html>

清除浮动

.clear{
        clear: both;
}
</style>
<body>
<div class="father">
        <div class="son1">aaaaaaaaaaaaaaaaaa</div>
        <div class="son2">bbbbbbbbbbbbbbbbbb</div>
        <div class="son3">cccccccccccccccccc</div>
        <div class="clear">
                <div class="son4">dddddddddddddddddd</div> 
        </div>
</div>

position

包括相对定位(relative)和绝对定位(absolute)
相对定位(relative)

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>相对定位</title>
</head>
<style type="text/css">
body{
        margin: 0px 1px 2px 3px;
}
.father{
        background-color: #ffff99;
        width: 100%;
        height: 100px;
        border:1px dashed green;
}

.son1{
        position: relative;
        left: 60%;
}
.son2{
        
}
</style>
<body>
<div class="father">
        <div class="son1">aaaaaaaaaaaaaaaaaa</div>
        <div class="son2">bbbbbbbbbbbbbbbbbb</div>
        </div>
</body>
</html>

绝对定位(absolute)

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>绝对定位</title>
</head>
<style type="text/css">
body{
        margin: 0px 1px 2px 3px;
}
.father{
        background-color: #ffff99;
        width: 100%;
        height: 100px;
        border:1px dashed green;
}

.son1{
        position: absolute;/* 相对于浏览器边框定位 */
        right: 0px;
}
.son2{
        
}
</style>
<body>
<div class="father">
        <div class="son1">aaaaaaaaaaaaaaaaaa</div>
        <div class="son2">bbbbbbbbbbbbbbbbbb</div>
        <div class="son3">ccccccccccccccc</div>
        </div>
</body>
</html>

注意:相对定位没有脱离文档流,div还占用那个“坑”。绝对定位脱离了文档流。

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>绝对定位</title>
</head>
<style type="text/css">
body{
        margin: 0px 1px 2px 3px;
}
.father{
        background-color: #ffff99;
        width: 100%;
        height: 100px;
        border:1px dashed green;
        position: relative;
}

.son1{
        position: absolute;/* 相对于father定位 */
        right: 0px;
}
.son2{
        
}
</style>
<body>
<div class="father">
        <div class="son1">aaaaaaaaaaaaaaaaaa</div>
        <div class="son2">bbbbbbbbbbbbbbbbbb</div>
        <div class="son3">ccccccccccccccc</div>
</div>
</body>
</html>

儿子采用绝对定位,当爸爸设置了相对定位时,此时儿子的绝对定位就相对于爸爸定位了。当爸爸没有设置了相对定位,此时儿子的绝对定位就相对于浏览器定位了。

绝对定位应用(照片签名)

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>照片签名</title>
</head>
<style type="text/css">
.image{
        position: relative;
        background-image: url(01.jpg);
        width:600px;
        height:1000px;
}
.name{
        position: absolute;
        right: 30px;
        bottom:30px;

        font-size: 30px;
        color: red;
        font:bold;
}
</style>
<body>
<div class="image">
        <div class="name">美女</div>
</div>
</body>
</html>

经常用到的属性

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>排版中经常用到的属性</title>
</head>
<style type="text/css">
.father{
        background-color: #ffff99;
        width: 100%;
        height: 100px;
        border: 1px dashed green;
}
.son1,.son2,.son3{
        background-color: #cc99ff;
        width: 100%;
        margin-left: 5px;
        margin-top: 5px;
        display: inline; /* 三个div显示成一行 */
}
.son3{
        display: none;/* 第三个隐藏 */
}
.son2:hover {
        background-color: #3300ff;
        cursor:hand;
}
</style>
<body>
<div class="father">
        <div class="son1">aaaaaaaaaaaaa</div>
        <div class="son2">bbbbbbbbbbbbb</div>
        <div class="son3">ccccccccccccc</div>
</div>
</body>
</html>

网页宽度,网页居中

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>网页宽度,网页居中</title>
</head>
<style type="text/css">
body{
        margin: 0px;
        padding: 0px;
        font-size: 12px;
        color: red;
}
.container{
        margin: 0 auto;
        text-align: left;
        width: 980px;   /* 960-1002   1024-1440 */
        border: 1px solid red;
}
</style>
<body>
<div class="container">
        这是一段网页内容<br>              这是一段网页内容<br data-tomark-pass>             这是一段网页内容<br data-tomark-pass>             这是一段网页内容<br data-tomark-pass>             这是一段网页内容<br data-tomark-pass>             这是一段网页内容<br data-tomark-pass>             这是一段网页内容<br data-tomark-pass>             这是一段网页内容<br data-tomark-pass>             这是一段网页内容<br data-tomark-pass>             这是一段网页内容<br data-tomark-pass>             这是一段网页内容<br data-tomark-pass>             这是一段网页内容<br data-tomark-pass>     </div>
</body>
</html>


本文链接:https://www.icode1024.com/article/231.html

网友评论