布局大总结

弥..

已于 2023-04-12 21:49:16 修改

阅读量44

点赞数 1

文章标签： css html javascript

于 2023-04-12 21:37:01 首次发布

本文链接：https://blog.csdn.net/2301_76713417/article/details/130115563

版权

1.盒子布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子布局</title>
    <style>
        .one{
            width: 200px;
            height: 200px;
            border: 1px solid black;
        }
       .two{
            width:100px ;
            height: 100PX;
            background-color: red;
            /* border-bottom:1px solid black;
            border-top: 2px solid green; */
            /* boder  边框 上右下左 */
            border: 20px;
            /* 
            none：定义无边框
            hiddn：与"none"相同。不过应用于表时除外，对于表，hiddn用于解决边框冲突。
            dotted：定义点状边框，在大多数浏览器中呈现为实线。
            deshed：定义虚线，在大多数浏览器中呈现为实线。
            solid:定义实线。
             */
            padding: 20px;
            /* padding: 内边距 内容距离边框的问题 上右下左 */
           margin-left:27px;
           /* margin: 外边距 边框距离页面的问题 */
        }
     </style>
</head>
<body>
    <div class="one">
    <div class="two">这是一个div</div>
</div>
</body>
</html>

2.元素分类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素分类</title>

    <!-- 
    块级元素 ------- 独占一行(自动换行) div p hn hr 可以设置宽度和高度
    行内元素（内联） ------ 不会自动换行 a span 不可以设置宽度和高度（不起作用）
    display可以实现块级元素和行内元素之间互换
    属性取值：
    none ----- 表示不会被显示，隐藏元素的方式之一
    block ----- 将元素变为块级元素，也会自动换行（默认有个换行符）
    inline ----- 将元素变为行内元素
    -->
     
    <!--
         css中隐藏元素的方式：
    第一种：display：none
    第二种：width：0；height：0; 
     -->
</head>
<style>
div{
    width: 100px;
    height: 100px;
    border: 1px solid black;
    /* display: inline; */
}
a{
width: 100px;
height: 100px;
border: 1px solid black;
display: block;
}
.one{
     /* width: 100px; 
    height: 100px;
    background-color: red;
    display: none; */
    width: 0;
   height: 0;
}
</style>
<body>
    <div class="one"></div>
    <div >这是第一个div标签</div>
    <div>这是第二个div标签</div>
    <div>这是第三个div标签</div>
    <a href="#">这是第一个a标签</a>
    <a href="#">这是第二个a标签</a>
    <a href="#">这是第三个a标签</a>
    <a href="#">这是第四个a标签</a>
</body>
</html>

3.浮动布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动布局</title>

    <!-- 
    通过float属性去设置浮动布局
   取值：left none(不浮动) right
   注意：如果浮动取值是Left的话（左浮），会对后面的元素产生一定的影响
   -->
   <!--
     如果要消除这种影响（消除浮动）通过clear属性
     none:默认 允许两边都可以浮动
     left：不允许左边的浮动
     right：不允许右边的浮动
     both：不允许两侧有浮动 -->
    <style>
        .box1{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            background-color: red;
            float: left;

        }
        .box2{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            background-color: blue;
            clear: both;
        }
        .box3{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            background-color: green;
            float: right;
            clear: right;
        }
    </style>
</head>
<body>
    <div class="box1">这是第一个div</div>
    <div class="box2">这是第二个div</div>
    <div class="box3">这是第三个div</div>
</body>
</html>

4.定位布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位布局</title>
    <!-- 
        属性：position ------ 设置对象的定位方式
        tatic ----- 静态定位（没有设置位置）默认
        absolute ------- 绝对定位 ：将对象从文档流中分离出来，设置left top right bottom这四个方向去设
       置相较于父级对象的相对定位，如果不存在这样的父级对象，那么父级是body
       relative ------ 相对定位：对象不从文档流中分离出来，设置left top right bottom这四个方向去设置
       相较于自身的相对定位 -->
    <style>
        .main{
            width:1200px;
            height: 600px;
            border: 1px solid black;
        }
        .box1{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            background-color: red;
            float: left;
            /* position: absolute;
            top: 200px;
            left: 200px; */
        }
        .box2{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            background-color: blue;
            clear: both;
            position: relative;
            left: 600px;

        }
        .box3{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="main">
    <div class="box1">这是第一个div</div>
    <div class="box2">这是第二个div</div>
    <div class="box3">这是第三个div</div>
</div>
</body>
</html>

5.其他属性

5.1 overflow

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width, initial-scale=1.0">
    <title>overflow</title>
    <!--
         设置对象内容超过指定的高度或者宽度的时候如果管理它的内容
         visible----- 默认值 不剪切内容也不添加滚动条
         auto ----- 在必需时对象才会被裁剪或者添加滚动条
         hidden ----- 不显示超过对象尺寸的内容（会被隐藏）
         scroll ---- 总会显示滚动条 -->
<!--          
         隐藏元素的方式：
        1. display:none;
        2. width:0 height:0
        3. overflow:hidden -->
    <style>
.img{
    width: 200px;
    height: 200px;
    border: 1px solid black;
    /* overflow: scroll; */
    /* overflow: hidden; */
    /* overflow: auto; */
    overflow:visible;
}
    </style>
</head>
<body>
    <div class="img">
  <img src="..\images\2d0daa27318044818b5f8bb8c2079383.png" alt="">  
</div>
</body>
</html>

5.2 zoom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>zoom</title>
    <!-- 
    设置或者检索对象的缩放比例
    normal : 默认值 显示的是对象的实际尺寸
    number:百分比|无符号的浮点数 浮点数为1.0相当于100%相当于取值为normal -->
<style>
    .main{
       width: 200px;
    height: 200px;
    border: 1px solid black;
}
img{
    zoom: 1.0;
}
</style>
</head>
<body>
    <div class="main">
    <img src="D:\demo\images\2023-04-05_115204.png" alt="">
    </div>
</body>
</html>

6.弹性盒子css3

6.1常见的属性

flex- direction ------- 指的是弹性容器中子元素的排列方式

flex-wrap ------ 指的是弹性容器中子元素超出父容器时是否换行

flex-flow ----flex- direction 和 flex-wrap 的简写

align-items --- 设置的弹性容器中元素在侧轴 ( 纵轴）的对齐方式

justify-content ------ 设置的弹性容器中元素在主轴（横轴）的对齐方式

align-content------- 修改了 flex-flow 的行为，类似于 align-items ，它是对齐的弹性线

6.2 flex-direction

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性盒子</title>
    <!-- 
row ----- 左对齐（横向的从左到右排列），默认
row- reverse ------ 反向的横向排列（右对齐），从后往前排，最后一项排在最前面
column ----- 纵向排列
column-reverse ----- 反向纵向排列 -->
    <style>
        .flex-contain{
        width: 400px;
        height: 350px;
        background-color: orange;
        display: inline-flex;
        flex-direction: column-reverse;
        }
.flex-item{
width: 100px;
height: 100px;
background-color: red;
border: 1px solid black;
}
</style>
</head>>
<body>
    <div class="flex-contain">
        <div class="flex-item">flex item1</div>
        <div class="flex-item">flex item2</div>
        <div class="flex-item">flex item3</div>
</body>
</html>

6.3 felx-wrap

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性盒子</title>
<!--
nowrap ---- 默认值，规定弹性元素不会换行
wrap ---- 弹性元素在需要的时候会换行
wrap-reverse ------ 会换行，但是是反方向 -->
<style>
    .flex-contain{
width: 400px;
height: 350px;
background-color: orange;
display: inline-flex;
flex-wrap: wrap-reverse;
}
   .flex-item{
width: 100px;
height: 100px;
background-color: red;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="flex-contain">
<div class="flex-item">flex item1</div>
<div class="flex-item">flex item2</div>
<div class="flex-item">flex item3</div>
<div class="flex-item">flex item4</div>
<div class="flex-item">flex item5</div>
<div class="flex-item">flex item6</div>
<div class="flex-item">flex item7</div>
<div class="flex-item">flex item8</div>
<div class="flex-item">flex item9</div>
<div class="flex-item">flex item10</div>
<div class="flex-item">flex item11</div>
</div>
</body>
</html>

6.4 flex-flow

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性盒子</title>
    <style>
        .flex-contain{
        width: 400px;
        height: 350px;
        background-color: orange;
        display: inline-flex;
        flex-flow: column-reverse wrap;
        }
.flex-item{
width: 100px;
height: 100px;
background-color: red;
border: 1px solid black;
}
</style>
</head>>
<body>
    <div class="flex-contain">
        <div class="flex-item">flex item1</div>
        <div class="flex-item">flex item2</div>
        <div class="flex-item">flex item3</div>
        <div class="flex-item">flex item4</div>
        <div class="flex-item">flex item5</div>
        <div class="flex-item">flex item6</div>
</body>
</html>

6.5 align-items

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性盒子</title>
    <!-- 
        stretch  默认，项目被拉伸以适合容器
        center   项目被拉伸于容器中央
        flex-start   项目被拉伸于容器开头
        flex-end     项目被拉伸于容器末端
        baseline      项目被拉伸于容器的基线
 -->
    <style>
        .flex-contain{
        width: 400px;
        height: 350px;
        background-color: orange;
        display: flex;
        align-items: baseline;
        }
.flex-item{
width: 100px;
height: 100px;
background-color: red;
border: 1px solid black;
}
</style>
</head>>
<body>
    <div class="flex-contain">
        <div class="flex-item">flex item1</div>
        <div class="flex-item">flex item2</div>
        <div class="flex-item">flex item3</div>
</body>
</html>

6.6 justify-content

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性盒子</title>
    <!-- 
        center   项目被拉伸于容器中央
        flex-start    默认值，项目被拉伸于容器开头
        flex-end     项目被拉伸于容器末端
       space-between 项目在行与行之间留有间隙
       sapce-around 项目在行之前，行之间和行之后留有空间
 -->
    <style>
        .flex-contain{
        width: 400px;
        height: 350px;
        background-color: orange;
        display: flex;
        justify-content: space-around;
        }
.flex-item{
width: 100px;
height: 100px;
background-color: red;
border: 1px solid black;
}
</style>
</head>>
<body>
    <div class="flex-contain">
        <div class="flex-item">flex item1</div>
        <div class="flex-item">flex item2</div>
        <div class="flex-item">flex item3</div>
</body>
</html>

6.7 align-content

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性盒子</title>
    <!-- 
        align-content-------修改了flex-flow 的行为，类似于align-items，它是对齐的弹性线
        stretch  默认值，行拉伸以占据剩余空间
        center   朝着弹性容器的中央对行打包
        flex-start     朝着弹性容器的开头对行打包
        flex-end      朝着弹性容器的结尾对行打包
       space-between  行均匀分布在弹性容器中
       sapce-around    行均匀分布在弹性容器中，两端各占一半
 -->
    <style>
        .flex-contain{
        width: 400px;
        height: 350px;
        background-color: orange;
        display: flex;
        flex-wrap: wrap;
        align-content: space-around;
        }
.flex-item{
width: 100px;
height: 100px;
background-color: red;
border: 1px solid black;
}
</style>
</head>>
<body>
    <div class="flex-contain">
        <div class="flex-item">flex item1</div>
        <div class="flex-item">flex item2</div>
        <div class="flex-item">flex item3</div>
</body>
</html>