html布局总结

最新推荐文章于 2024-09-11 08:17:43 发布

IABQL

最新推荐文章于 2024-09-11 08:17:43 发布

阅读量146

点赞数

文章标签： html flex 定位

本文链接：https://blog.csdn.net/qq_48078182/article/details/117871846

版权

常见的块级元素(自动换行，可设置高宽 )有：

   div,h1-h6,p,pre,ul,ol,li,form,table,label等

常见的行内元素（无法自动换行，无法设置宽高）有：

   a,img,span，i（斜体）,em（强调）,sub(下标)，sup（上标）等。

常见的行块级元素(拥有内在尺寸，可设置高宽，不会自动换行 )有：

 (button,input，textarea,select), img等

块级元素转为行内元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            /*块级元素转为内联元素（块级元素会换行，内联元素不会）*/
            /*转换后对齐设置宽高设置无效*/
            height: 100px;
            background-color: #fbc2eb;
            display: inline;
        }
   
    </style>
</head>
<body>
    <div class="box">
        这是一个div
    </div>
</body>
</html>

行内元素转为块级元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a{
            /*内联元素转为块级元素*/
            display: block;
        }
    </style>
</head>
<body>
    <div class="box">
        这是一个div
    </div>
    <a href="#">行内元素</a>
</body>
</html>

元素的浮动

float:left(左浮动)、right(右浮动)

clear:left清除左浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: #fbc2eb;
            float: left;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: #8A2BE2;
            /*浮动会对后面的元素造成影响，造成后面元素的混乱*/
            float: left;
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: #a6c1ee;
            /*清除元素的左浮动，不允许由左浮动（消除前面盒子浮动造成的影响）*/
            clear: left;
        }
    </style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>

元素定位

通过设置定位position实现 absolute 绝对定位（相对于body进行定位）； relative 相对定位（相对于上一个盒子进行定位）； fixed 固定定位等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .box1{
            height: 100px;
            width: 200px;
            background-color: #a6c1ee;
            /*绝对定位*/
            position: absolute;
            left: 100px;
        }
        .box2{
            height: 100px;
            width: 100px;
            background-color: #8A2BE2;
            /*相对定位（如果它的前一个盒子设置了绝对定位，那么它会相对于body进行定位）*/
            position:relative ;
            left: 50px;
        }
        .box3{
            height: 100px;
            width: 100px;
            background-color: #c2c3c3;
            position:absolute ;
            left: 100px;
        }
    </style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>

flex（弹性盒子）布局总结
justify-content：属性用于定义如何沿着主轴方向排列子容器（水平）
align-items：属性定义如何沿交叉轴排列（垂直)，定义单行排列items
align-content：定义整个容器items在交叉轴的排列方式，对只有单行排列的items不起作用
子元素的flex属性的属性值可以是无单位的数字，也可以是有单位的数字还可以是none，子容器会按照flex定义的尺寸比例自动伸缩，如果取值为none则不伸缩
flex-dedication：决定主轴的方向，交叉轴的方向由主轴确定
flex-flow：设置子容器沿着那个方向流动，流动到终点是否换行，是一个复合属性，相当于flex-depiction和flex-wrap的组合
flex-basis：表示在不伸缩的情况下子容器的原始尺寸。主轴为横向代表宽度，主轴为纵向代表高度
flex-grow：子容器弹性伸展的比例
flex-shrink：子容器收缩的比例
order： order是子容器的属性，它可以更改子元素出现的顺序，数值越小，布局越排在前面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .main{
            /*弹性盒子，main下的所有盒子变成一行（与浮动相似）*/
            display: flex;
            width: 500px;
            height: 400px;
            /*排列方向 column:从上到下排*/
            flex-direction: column;
            /*justify-content用于对齐项目（这里是从上至下排列，那么就以Y轴（其排列方向）居中对齐） */
            justify-content: center;
            /*垂直居中  这里是从上至下排列，那么就以X轴（其排列方向的垂直角方向）垂直居中*/
            align-items: center;

            border: 1px solid black;
        }
        .one{
            width: 100px;
            height: 100px;
            background-color: #8A2BE2;
        }
        .tow{
            width: 100px;
            height: 100px;
            background-color: #a6c1ee;
        }
        .three{
            width: 100px;
            height: 100px;
            background-color: #c2c3c3;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="one"></div>
    <div class="tow"></div>
    <div class="three"></div>
</div>
</body>
</html>