JavaWeb-CSS的盒模型与弹性布局

灰太狼 2023-09-27 22:09 118阅读 0赞

#### 目录 ####

*   *  CSS的盒模型
     *   *  边框
         *  内边距
         *  外边距
         *  块级元素水平居中
     *  弹性布局
     *   *  常用的一些属性
         *   *  justify-content
             *  align-items

### CSS的盒模型 ###

每一个HTML就相当于一个矩形的"盒子".

这个盒子由以下几个部分组成

*  边框 border
 *  内容 content(下图中间蓝色部分)
 *  内边距 padding
 *  外边距 margin

![在这里插入图片描述][4687e32043cf499dba94783258436841.png]

#### 边框 ####

边框的基础属性:

粗细: border-width  
样式: border-style  
颜色:border-color

![在这里插入图片描述][c3d048b5754741e5b0f32ba89caf2735.png]  
接下来我们设计一个500x250的盒子

![在这里插入图片描述][219559fa2dd84df195c006e8732dfef7.png]  
我们为其设置一个边框

border-width: 10px;
            border-style: solid;
            border-color: red;

![在这里插入图片描述][2c303ade61fc4ae0a5f5684d41c2857d.png]

我们会发现盒子变大了,得出边框会撑大盒子的结论.那么怎么样才能使盒不会被边框撑大呢

> 通过 box-sizing 属性可以修改浏览器的行为, 使边框不再撑大盒子

* {
        box-sizing: border-box;
      }

![在这里插入图片描述][b3d568bf21a846cd83d4f84fa9edcb73.png]

#### 内边距 ####

设置内容和边框之间的距离

*  padding-top
 *  padding-bottom
 *  padding-left
 *  padding-right

![在这里插入图片描述][cf1029676f43456a870efeb71b26dbab.png]  
可以看到内边距也会撑大盒子的,当然也可以使用box-sizing 属性进行修改.

#### 外边距 ####

控制盒子和盒子之间的距离

*  margin-top
 *  margin-bottom
 *  margin-left
 *  margin-right

使用方法跟内边距相差无几,所以这里就不子演示了

#### 块级元素水平居中 ####

三种写法:

![在这里插入图片描述][0e092592528e4fe39f7c4dee67179c51.png]  
有一个前提是必须为块元素指定宽度,不然就会跟父元素一致.  
![在这里插入图片描述][ec7fcdf4f58b48888b04f19bbb8a73c7.png]

有一点需要注意的是  
**text-align: center 是让行内元素或者行内块元素居中的.  
margin: auto 是给块级元素用得.**

### 弹性布局 ###

弹性布局需要了解一些概念

> flex 是 flexible box 的缩写. 意思为 “弹性盒子”.  
> 任何一个 html 元素, 都可以指定为 display:flex 完成弹性布局.  
> flex 布局的本质是给父盒子添加 display:flex 属性, 来控制子盒子的位置和排列方式.

*  被设置为 display:flex 属性的元素, 称为 flex container
 *  它的所有子元素立刻称为了该容器的成员, 称为 flex item
 *  flex item 可以纵向排列, 也可以横向排列, 称为 flex direction(主轴)

这些概念看完不懂没关系,继续看下面的属性及案例演示.

#### 常用的一些属性 ####

##### justify-content #####

设置主轴上的子元素排列方式

![在这里插入图片描述][23b2352dffdd48fe83dd87e8aaced7be.png]

div {
            height: 150px;
            width: 100%;
            background-color: red;
            display: flex;
            justify-content: center;   
        }

加上 justify-content: center后样式就发生了变化  
![在这里插入图片描述][acbf5776d4db47fa9ed2f586d06ed91a.png]

justify-content的常用取值有:  
center -位于容器中央  
flex-start -位于容器结尾  
flex-end -位于容器开头  
space-between -在行与行之间留有空间  
space-around -在行前行后行之间都留有空间

##### align-items #####

设置侧轴上的元素排列方式

<div>
        
        <span>1</span>
        <span>2</span>
        <span>3</span>
        </div>
        <style>
        div {
          
        width: 500px;
        height: 500px;
        background-color: green;
        display: flex;
        justify-content: space-around;
        }
        div span {
          
        width: 150px;
        background-color: red;
        }
        </style>

![在这里插入图片描述][332c6f3f08bf4587ba93c8171167136b.png]  
使用 align-items 实现容器的结尾对行打包

<div>
        
        <span>1</span>
        <span>2</span>
        <span>3</span>
        </div>
        <style>
        div {
          
        width: 500px;
        height: 500px;
        background-color: green;
        display: flex;
        justify-content: space-around;
        align-items: flex-end;
        }
        div span {
          
        width: 150px;
        background-color: red;
        }
        </style>

![在这里插入图片描述][a4ae13b82f4841878ff488bc3135ca30.png]  
align-items的常用取值:  
center -容器的中央对行打包  
flex-start -容器开头对行打包  
flex-end -容器结尾对行打包  
space-between -行均匀分布在容器中  
space-around -行均匀分布在容器中,两端各占一半

[4687e32043cf499dba94783258436841.png]: https://img-blog.csdnimg.cn/4687e32043cf499dba94783258436841.png
[c3d048b5754741e5b0f32ba89caf2735.png]: https://img-blog.csdnimg.cn/c3d048b5754741e5b0f32ba89caf2735.png
[219559fa2dd84df195c006e8732dfef7.png]: https://img-blog.csdnimg.cn/219559fa2dd84df195c006e8732dfef7.png
[2c303ade61fc4ae0a5f5684d41c2857d.png]: https://img-blog.csdnimg.cn/2c303ade61fc4ae0a5f5684d41c2857d.png
[b3d568bf21a846cd83d4f84fa9edcb73.png]: https://img-blog.csdnimg.cn/b3d568bf21a846cd83d4f84fa9edcb73.png
[cf1029676f43456a870efeb71b26dbab.png]: https://img-blog.csdnimg.cn/cf1029676f43456a870efeb71b26dbab.png
[0e092592528e4fe39f7c4dee67179c51.png]: https://img-blog.csdnimg.cn/0e092592528e4fe39f7c4dee67179c51.png
[ec7fcdf4f58b48888b04f19bbb8a73c7.png]: https://img-blog.csdnimg.cn/ec7fcdf4f58b48888b04f19bbb8a73c7.png
[23b2352dffdd48fe83dd87e8aaced7be.png]: https://img-blog.csdnimg.cn/23b2352dffdd48fe83dd87e8aaced7be.png
[acbf5776d4db47fa9ed2f586d06ed91a.png]: https://img-blog.csdnimg.cn/acbf5776d4db47fa9ed2f586d06ed91a.png
[332c6f3f08bf4587ba93c8171167136b.png]: https://img-blog.csdnimg.cn/332c6f3f08bf4587ba93c8171167136b.png
[a4ae13b82f4841878ff488bc3135ca30.png]: https://img-blog.csdnimg.cn/a4ae13b82f4841878ff488bc3135ca30.png