CSS布局方式总结

原创已于 2023-04-16 17:14:28 修改 · 153 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #html

于 2023-04-14 10:11:31 首次发布

文章目录

1. 盒子布局
2. 元素分类
3. 浮动布局
4. 定位布局
5. 弹性盒子CSS3

盒子布局

盒子由外边距margin（边框距离页面的距离），外边框borde，内边距padding（内容距离边框的距离，依次为上右下左）和内容content组成。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/c531f289a6d04cf5a1847cc2a37df6e7.png#pic_center) 控制边框的border属性如下： |名称| 描述 | |--|--| | none | 定义无边框 |hidden|与none相同，可以用于解决表之间的边框冲突| |dotted|定义点状边框，在浏览器中以实线呈现| |dashed|定义虚线边框，在浏览器中以实线呈现| |solid|定义实线

<!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 >
        div{
            width: 100px;
            height: 100px;
            padding: 20px;
            background-color: aqua;
            border:dotted;
}
    </style> 
</head>
<body>
    <div>一个div</div>
</body>
</html>

元素分类

块级元素（div,p,hr,hn)-----独占一行并自动换行，可以对高度和宽度进行设置行内元素（a,span)-----不自动换行，不可以对高度和宽度进行设置 display可以对块级和行内元素之间进行转换取值如下：

none	不被显示，作为隐藏元素的一种方式
block	转变为块级元素，自动换行
inline	转变为行内元素

<!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>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            background-color:antiquewhite;
        }
        .two{
            display: inline;
        }
        a{
            width: 100px;
            height: 100px;
            display: block;
        }
    </style>
</head>
<body>
    <div>块级元素1</div>
    <div class="two">块级元素2</div>
    <a>行内元素1</a>
</body>
</html>

效果图

浮动布局

通过 float 属性去设置元素在水平方向上的对齐方式，取值：left、none、right 当取left值的时候可能会对后面的元素产生影响。

<!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>Document</title>
    <style>
        #c{
            width:100px;
            height: 100px;
            background-color: aqua;
        }
        #a{
            width:50px;
            height: 50px;
            background-color:blue;
        }
        #b{
            width:50px;
            height: 50px;
            background-color:blue;
            float: right;
        }
    </style>
</head>
<body>
    <div id="c">
        <div id="a">
            1
        </div>
        <div id="b">
            2
        </div>
    </div>
</body>
</html>

通过 clear 属性可以消除浮动的影响
取值:none—默认允许两边的浮动
left—不允许左边的浮动
right—不允许右边的浮动
both—不允许两侧有浮动

定位布局

通过position属性来设置对象的定位类型，取值如下

static ----- 静态定位（没有设置位置）默认
absolute ------- 绝对定位：将对象从文档流中分离出来，设置left top right bottom这四个方向去设置相较于父级对象的相对定位，如果不存在这样的父级对象，那么父级是body
relative ------ 相对定位：对象不从文档流中分离出来，设置left top right bottom这四个方向去设置相较于自身的相对定位

<!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>
        .o{
            width: 50px;
            height: 50px;
            background-color: aqua;
            border: 1px solid black;
        }
        .p{
            width: 50px;
            height: 50px;
            background-color: aqua;
            position: absolute;
            top: 100px;
            border: 1px solid black;
        }
        .q{
            width: 50px;
            height: 50px;
            background-color: aqua;
            position: relative;
            left:100px;
            border: 1px solid black;
        }
        .l{
            width: 200px;
            height: 200px;
            background-color: rgb(0, 34, 255);
        }
    </style>
</head>
<body>
    <div class="l">
    <div class="o">第一个</div>
    <div class="p">第二个</div>
    <div class="q">第三个</div>
</div>
</body>
</html>

在这里插入图片描述

弹性盒子CSS3

弹性盒子是 CSS3 的一种新的布局模式。弹性盒子有弹性容器（ Flexible 或 Flexbox）和弹性元素(Flex-item)组成，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。一个弹性容器利用包含多个弹性元素。 flex-direction ：指的是弹性容器中子元素的排列方式，元素是弹性项目时， flex 属性才生效。取值如下： - row：使元素从前开始正序排列 - row-reverse：等同行，使元素从前开始倒序排列 - column：，作为列，使元素从后开始正序排列， - column-reverse：等同列，使元素从后开始倒序排列

<!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>Document</title>
    <style>
        .f{
            width: 150px;
            height: 150px;
            background-color: orange;
            display: inline-flex;
            flex-direction: column-reverse;
            }
            .item{
            width: 50px;
            height: 50px;
            background-color: red;
            border: 1px solid black;
}
    </style>
</head>
<body>
    <div class="f">
        <div class="item">flex item1</div>
        <div class="item">flex item2</div>
        <div class="item">flex item3</div>
        </div>
</body>
</html>

效果图

flex-wrap：指的是弹性容器中子元素超出父容器时是否换行,是单行还是多行显示。如果允许换行，这个属性允许你控制行的堆叠方向。部分取值如下：

wrap-reverse：多行显示，与wrap方向相反
wrap：多行显示，在需要时换行
nowrap：单行显示，规定弹性项目不会换行

<!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>Document</title>
    <style>
        .f{
            width: 200px;
            height: 200px;
            background-color: orange;
            display: inline-flex;
            flex-wrap: wrap-reverse;
            }
            .item{
            width: 50px;
            height: 50px;
            background-color: red;
            border: 1px solid black;
}
    </style>
</head>
<body>
    <div class="f">
        <div class="item">flex item1</div>
        <div class="item">flex item2</div>
        <div class="item">flex item3</div>
        <div class="item">flex item4</div>
        <div class="item">flex item5</div>
        <div class="item">flex item6</div>
        </div>
</body>
</html>

效果图

flex-flow是flex- direction 与flex-wrap 的简写

align-items：设置的弹性容器中元素在侧轴(纵轴）的对齐方式，常用取值如下：

stretch:弹性项包含外边距的交叉轴尺寸被拉升至行高
center:元素在侧轴居中。
start:元素向侧轴起点对齐。
end:元素向侧轴终点对齐。

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

start：从行首开始排列。每行第一个元素与行首对齐，所有后续元素与前一个对齐。
flex-start：从行首开始排列。每行第一个弹性元素与行首对齐，同时所有后续的弹性元素与前一个对齐。
flex-end：从行尾开始排列。每行最后一个弹性元素与行尾对齐，其他元素将与后一个对齐。
center：伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。
left：伸缩元素一个挨一个在对齐容器得左边缘，如果属性的轴与内联轴不平行，则的行为类似于。leftstart
right：元素以容器右边缘为基准，一个挨着一个对齐，如果属性轴与内联轴不平行，则的行为类似于。

align-conten：修改了flex-flow 的行为，类似于align-items，它是对齐的弹性线。当弹性容器在正交轴方向还存在空白时，该属性可以控制其中所有行的对齐方式