[Div] 前端基础：div简介

古田兔子

于 2023-05-15 17:27:12 发布

阅读量177

点赞数

分类专栏：前端文章标签：前端 css

本文链接：https://blog.csdn.net/Mr_TianSDQ/article/details/130688964

版权

前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1. 盒子模型:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标准盒子模型测试 </title>
    <style type="text/css">
        #div1
        {
            width: 300px;height: 200px;border: 20px solid blue;padding: 20px;;
        }
    </style>
</head>

<body>
    <div id="div1">
        标准盒子模型测试
    </div>
    
</body>
</html>

2.Border:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标准盒子模型测试 </title>
    <style type="text/css">
        div
        {
            width: 300px;height: 200px;border: 2px dotted blue;padding: 50px 10px 20px 30px; color: red;
        }
    </style>
</head>

<body>
    <div>
        border 详情
    </div>
    
</body>
</html>

3.Margin详解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标准盒子模型测试 </title>
    <style type="text/css">
        div
        {
            width: 300px;height: 200px;border: 2px dotted blue;padding: 50px 10px 20px 30px; color: red;
            background-color: aqua;
            
        }
        #div1
        {
            margin-right: 20px;
            float: left;
            /*margin: 左右间距是相加；上下距离取其大；*/
        }
        #div2
        {
            margin-left: 0px;
   float: left;
        }
    </style>
</head>

<body>
    <div id="div1">
        border 详情1
    </div>
    <div id="div2">
        border 详情2
    </div>
</body>
</html>

4.Margin父子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标准盒子模型测试 </title>
    <style type="text/css">
        #div1
        {
            width: 300px;height: 200px;border: 20px solid gray;background-color: aqua;
            margin-right: 20px;
            float: left;
            /*margin: 左右间距是相加；上下距离取其大；*/
        }
        #div2
        {
            width: 200px;height: 100px;border: 1px blue;background-color: yellow;
            margin-top: 150px;margin-left: 100px;
   float: left;
        }
    </style>
</head>

<body>
    <div id="div1">

        border 详情1
        <div id="div2">
            字块
        </div>
    </div>
    
</body>
</html>

5.float

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>foat测试 </title>
    <style type="text/css">
        #div1
        {
            width: 500px;border:20px solid teal;
            height: auto;overflow: hidden;/*《高度自适应》解决子模块超出边框的现象*/
        }
        #div2
        {
            width: 200px;height: 100px;border: 1px solid blue;
            background-color: yellow;
            float: left;
            margin-left: 20px;
            display: inline;/*解决ie6 margin-left双倍显示的问题*/
            margin-top: 20px;
        }
        #div3
        {
            width: 200px;height: 100px;border: 1px solid blue;
            background-color: yellow;
            float: left;
            margin: 20px 0px 0px 20px;
        }
        #div4
        {
            width: 200px;height: 100px;border: 1px solid blue;
            background-color: yellow;
            float: left;
            margin: 20px 0px 0px 20px;
        }
        #div5
        {
            width: 200px;height: 100px;border: 1px solid blue;
            background-color: yellow;
            clear: both;/*不受其他因素的影响，取消float:left影响 ;*/
            margin: 20px 0px 0px 20px;
        }
    </style>
</head>

<body>
    <div id="div1">
        <div id="div2">字块元素2</div>
        <div id="div3">字块元素3</div>
        <div id="div4">字块元素4</div>
        <div id="div5">字块元素5</div>
    </div>
    
</body>
</html>

6.Position

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title> test </title>
        <style type="text/css">
            #div1{
                width: 300px;
                height: 80px;
                border: 1px solid blue;
                margin-top: 20px;
                margin-left: 30px;
            }
            .div2{
                width: 170px;
                height: 30px;
                border: 1px solid blue;
                background-color: yellow;
                position: absolute;/*绝对位置*/
                top: 30px;left: 50px;
            }
            .div3{
                width: 170px;
                height: 30px;
                border: 1px solid blue;
                background-color: yellow;
                position: relative;/*相对父*/
                top: 30px;left: 50px;
            }

        </style>
    </head>
<body>
    <div id="div1">
        <div class="div2">div 绝对定位</div>
        <div class="div3">div 相对</div>
    </div>
</body>
</html>

7.导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单导航栏 </title>
    <link href="E:/06LeadTech/test/NavBar.css" rel = "stylesheet" type="text/css" />
</head>

<body>
    <div id="globalLink">
        <ul>
            <li><a href="#">读书首页</a></li>
            <li><a href="#">作品展示</a></li>
            <li><a href="#">VIP作品</a></li>
            <li><a href="#">完成作品</a></li>
            <li><a href="#">变革推荐</a></li>
            <li><a href="#">精华作品</a></li>
            <li><a href="#">排行榜</a></li>
            <li><a href="#">出版基地</a></li>
            <li><a href="#">出版展示</a></li>
            <li><a href="#">类别</a></li>
        </ul>
    </div>
    
</body>
</html>

NavBar.css内容：

body{font-size: 12px;}
#globalLink {width: 800px; height:33px ;background-image: url(D:/素材/icon/浅蓝.jpeg);}
#globalLink ul{list-style: none;padding: 0px;margin: 0px;}
#globalLink li{float: left; width: 70px;text-align: center;}
#globalLink a{display:block ;padding: 8px 6px 10px 5px; margin: 0px;}
#globalLink a:link,#globalLink a:visited{color:white;text-decoration: none;}
#globalLink a:hover{color:rebeccapurple;text-decoration: underline}