CSS（三）

最新推荐文章于 2024-11-05 14:45:41 发布

ZzzZZzzzZZZzzzz…

最新推荐文章于 2024-11-05 14:45:41 发布

阅读量444

点赞数 4

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

本文链接：https://blog.csdn.net/2301_81930926/article/details/137167463

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML和CSS中的各种布局技术，包括盒子模型（内边距、外边距和边框）、元素分类（块级和行内元素）、display属性、浮动布局、定位布局（absolute,relative）以及弹性盒子（flexbox）的各种属性和用法示例。

摘要由CSDN通过智能技术生成

4.布局方式

4.1盒子布局

1.padding 内边距

2.margin 外边距

3.border 边框（前两个之间）

eg.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子</title>
   <style>
    div{
        width: 200px;
        height: 200px;
        border: 2px solid burlywood;
        padding:20px ;
        margin-left: 30px ;
        
        }
   </style>
</head>
<body>
    <div>这是一个盒子</div>
    
</body>
</html>

效果：

4.2元素的分类

4.1.1分类

1.块级元素（自动换行）

2.行内元素（不能设置高宽等）

4.2.2 disply属性

取值：1.none（隐藏方法之一）

2.block（变成块级）

3.inline（变行内）

4.2.3隐藏元素方式

1.display:none

2.width:0; height:0;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素分类</title>
    <style>
        div{
            width: 300px;
            height: 100px;
            border: 10px solid wheat ;
            display: block;
        }
        a{
            width: 30px;
            height: 40px;
        }
        #one{
            width: 100px;
            height: 100px;
            color: #d88e73;
            border: 10px solid rgb(182, 127, 24) ;
            display: none;/*表示隐藏*/
        }
        #two{
            width: 100px;
            height: 100px;
            color: #18bbe4;
            border: 10px solid rgb(12, 124, 147) ;
            display: inline;/*将元素变成行内元素*/
        }
    </style>
</head>
<body>
    <div id="one">这是第一个div,none</div>
    <div id="two">这是第二个div,inline</div>
    <a href="#">这是个a标签,不能设置宽度高度</a>
    <div>这是一个未定义div</div>
    <div>这是一个未定义div</div>
    <a href="#">这是个a标签,不能设置宽度高度</a>
    <a href="#">这是个a标签,不能设置宽度高度</a>
</html>

效果：

4.3 浮动布局

4.3.1 通过float属性使用

取值：none，left（对下一个元素有影响），right

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            border: 2px solid black;
            background-color:rgb(46, 118, 169) ;
            /*background-color: rgb(79, 133, 180);*/
            float: left;/*左浮动会覆盖下一个*/
           
        }
        .box2{
            width: 200px;
            height: 200px;
            border: 2px solid black;
            background-color: rgb(9, 74, 107);
            /*clear: left;/*防止被left覆盖*/
            /*clear: both;/*防止被所有的东西覆盖，只用写一个就可防止*/


        }
        .box3{
            width: 200px;
            height: 200px;
            border: 2px solid black;
            background-color: rgb(5, 28, 49);
            float: right;

        }
    </style>
</head>
<body>
    <div class="box1">这是一个div</div>
    <div class="box2">这是二个div</div>
    <div class="box3">这是三个div</div>
</body>
</html>

效果：

4.3.2清除影响（用clean）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            border: 2px solid black;
            background-color:rgb(46, 118, 169) ;
            /*background-color: rgb(79, 133, 180);*/
            float: left;/*左浮动会覆盖下一个*/
           
        }
        .box2{
            width: 200px;
            height: 200px;
            border: 2px solid black;
            background-color: rgb(9, 74, 107);
            clear: left;/*防止被left覆盖*/
            clear: both;/*防止被所有的东西覆盖，只用写一个就可防止*/


        }
        .box3{
            width: 200px;
            height: 200px;
            border: 2px solid black;
            background-color: rgb(5, 28, 49);
            float: right;

        }
    </style>
</head>
<body>
    <div class="box1">这是一个div</div>
    <div class="box2">这是二个div</div>
    <div class="box3">这是三个div</div>
</body>
</html>

效果：

4.4 定位布局

4.4.1属性

1.position：设置定位方式

2.static（静态定位）：默认

3.absolute（绝对定位）

4.relative（相对定位）：相对与本元素默认定位的定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位布局</title>
    <style>
        .main{
        width: 600px;
        height: 800px;
        border: 1px solid black;

        }
    .box1{
        width: 200px;
        height: 200px;
        border: 1px solid black;
        background-color: rgb(79, 133, 180);
        
    }
    .box2{
        width: 200px;
        height: 200px;
        border: 1px solid black;
        background-color: rgb(9, 74, 107);
        position: absolute ;/*绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:,   absolute 定位使元素的位置与文档流无关，因此不占据空间。

                            absolute 定位的元素和其他元素重叠。*/
        top: 200px;
        left: 200px;


    }
    .box3{
        width: 200px;
        height: 200px;
        border: 1px solid black;
        background-color: rgb(112, 18, 20);
        position: relative ;/*相对于它本身的原始起点*/
        top: 100px;
        left: 100px;


    }
    .box4{
        width: 200px;
        height: 200px;
        border: 2px solid black;
        background-color: rgb(8, 47, 84);
       

    }
</style>
</head>
<body>
    <div class="main">
    <div class="box1">这是第一个div</div>
    <div class="box2">这是第二个div</div>
    <div class="box3">这是第三个div</div>
    <div class="box4">这是第四个div</div>
    </div>
</body>
</html>

效果：

4.4.2relative属性详解

如上图例子解释

4.5其他属性

4.5.1 overflow（文本超出处理）

取值：

4.5.2 zoom （放缩图片）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滑动条</title>
    <style>
        .main{
            width: 60px;
            height: 60px;
            border: 1px solid black;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="main">
        <img src="卧虎藏龙.jpg" alt="">
    </div>
</body>
</html>

效果：

4.6 弹性盒子

4.6.1常见属性

4.6.1.1 flex-direction：子元素排列方式

取值：

4.6.1.2 flex-wrap：子元素超出父元素是否换行

取值：

4.6.1.3 flex-flow： flex-direction+flex-wrap

4.6.1.4 align-items：元素在纵轴对齐方式

取值：

4.6.1.5 justify-content：元素在横轴对齐方式

取值：

4.6.1.6 align-content：弹性线对齐方式

eg.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性容器</title>
    <style>
        .flex-container{
            width: 600px;
            height: 600px;
            background-color: #576d85;
            flex-wrap: wrap;
            display: flex;/*表换行*/
            align-items: centerS;
            justify-content: space-around;
        }
        
        .flex-item{
            width: 100px;
            height: 100px;
            background-color: #0b728f;
            border: 1px solid black;
            /*flex-direction:row-reverse;*/
            
        }

    </style>
</head>
<body>
    <div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
        <div class="flex-item">6</div>
        <div class="flex-item">7</div>
        <div class="flex-item">8</div>
        <div class="flex-item">9</div>

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

效果: