CSS盒子

最新推荐文章于 2023-08-10 10:27:17 发布

齐白在学习

最新推荐文章于 2023-08-10 10:27:17 发布

阅读量729

点赞数 8

文章标签： css 前端 html

本文链接：https://blog.csdn.net/qi_bai_jin/article/details/127115617

版权

学习目标

学习盒模型的基本理论，了解盒装模型的工作原理，了解盒模型与替代模型的区别以及如何进行切换。

什么是CSS盒模型

CSS中组成一个盒子需要由content,padding,border,margin组成

在标准盒子模型中，给盒子设置width与height时，实际上设置的是content,padding与border的宽高

在 CSS 中使用两种“盒子” —— 块级盒子 (block box) 和 内联盒子 (inline box)。这两种盒子会在页面流（page flow）和元素之间的关系方面表现出不同的行为

block

一个被定义成块级的（block）盒子会表现出以下行为：

盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
每个盒子都会换行
width和 height 属性可以发挥作用
内边距（padding）, 外边距（margin）和边框（border）会将其他元素从当前盒子周围“推开”

比如：<p>,<h1>,<div>都是默认处于 block状态的。

其默认属性都附带display：block;

inline

如果一个盒子对外显示为 inline，那么他的行为如下：

盒子不会产生换行。
width 和 height属性将不起作用。
垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。
水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开。

比如：<a> 元素、 <span>、 <em> 以及 <strong> 都是默认处于 inline 状态的。

比如以下例子：

        div{
            background-color:aqua;
        }
        div:nth-child(2){
            background-color:pink;
        }
        span{
            background-color:gold;
            margin-right:20px;
        }

    <div>1</div>
    <div>2</div>
    <span>3test test </span>
    <span>4 test test</span>

flex

弹性盒子是一种用于按行或按列布局元素的一维布局方法。元素可以膨胀以填充额外的空间，收缩以适应更小的空间。弹性盒子可以在父内容里面垂直居中一个块内容，使容器的所有子项占用等量的可用宽度/高度，而不管有多少宽度/高度可用。

flex模型说明

在学习flex盒子之前我们需要了解flex的主轴与副轴，分别有主轴开始与主轴结束，副轴开始与副轴结束。

我们只需要将父元素display更改为一下

flex使用

.father{
   display:flex;
 }

<!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>
    html {
        font-family: sans-serif;
      }

      body {
        margin: 0;
      }
    .father{
        display:flex;
    }
    div{
        padding: 10px;
        margin: 10px;
        background: aqua;
    }

    </style>
</head>
<body>
    <section class="father">
        <div>
            <h2>1</h2>
            <p>吾日三省吾身，今天你吃饭了吗？今天你睡觉了吗？今天你学习了吗？吾日三省吾身，今天你吃饭了吗？今天你睡觉了吗？今天你学习了吗？吾日三省吾身，今天你吃饭了吗？今天你睡觉了吗？今天你学习了吗？</p>
        </div>
        <div>
            <h2>2</h2>
            <p>吾日三省吾身，今天你吃饭了吗？今天你睡觉了吗？今天你学习了吗？吾日三省吾身，今天你吃饭了吗？今天你睡觉了吗？今天你学习了吗？吾日三省吾身，今天你吃饭了吗？今天你睡觉了吗？今天你学习了吗？</p>
        </div>
        <div>
            <h2>3</h2>
            <p>吾日三省吾身，今天你吃饭了吗？今天你睡觉了吗？今天你学习了吗？吾日三省吾身，今天你吃饭了吗？今天你睡觉了吗？今天你学习了吗？吾日三省吾身，今天你吃饭了吗？今天你睡觉了吗？今天你学习了吗？</p>
        </div>
    </section>

</body>
</html>

我们可以看到，3个div元素按照相同的比例显示在一行中，并可以随着界面大小改变而改变

flex-direction

弹性盒子提供了 flex-direction 这样一个属性，它可以指定主轴（水平）的方向— 它默认值是 row，这使得它们在按你浏览器的默认语言方向排成一排（在英语/中文浏览器中是从左到右）。比如：

如果设置flex-direction: column;则可以排成一列。

flex溢出

当我们在布局中使用定宽或者定高的时候，可能会出现问题即处于容器中的弹性盒子子元素会溢出，破坏了布局。非常影响美观，比如

这个时候我们就需要另一个属性

flex-wrap: wrap

    .father{
        display:flex;
        flex-wrap: wrap;
    }

你会好奇为什么变成这个样子了，这个时候只要我们把flex中的子元素设置宽度就能达到我们想要的效果，这时候又出现了一个新的属性 flex:200px;

    div{
        padding: 10px;
        margin: 10px;
        background: aqua;
        flex: 200px;
    }

flex：200px意味着每个元素的宽度至少是 200px；你可能还注意到，最后一行上的最后几个项每个都变得更宽，以便把整个行填满。效果如下：

注意:flex-direction: row; flex-wrap: wrap;缩写形式flex-flow: row wrap;

flex还有其他参数，我们回到开头讲的，flex可以讲子元素按照相同比例来控制子元素的大小，所以，我们来看看flex如何控制盒子比例。

只要在flex里面设置 flex:1，这表示每个元素占用空间都是相等的，占用的空间是在设置 padding 和 margin 之后剩余的空间。flex：1表示分配后的占用一个空间。

我们在第二个div加上选择

    div{
        padding: 10px;
        margin: 10px;
        background: aqua;
        flex: 1;
    }
    div:nth-of-type(2){
        padding: 10px;
        margin: 10px;
        background: aqua;
        flex:2;
    }

你会看到第二个div元素占用了两倍的可用宽度。

但是这样又回到了我们一开始觉得不美观的那个情况了

这个时候我们可以尝试指定 flex 的最小值。尝试修改现有的 div 规则：比如flex :1 200px

    div{
        padding: 10px;
        margin: 10px;
        background: aqua;
        flex: 1 200px;
    }
    div:nth-of-type(2){
        padding: 10px;
        margin: 10px;
        background: aqua;
        flex:2 400px;
    }

这样就变成我们想要的效果

水平和垂直对齐

那么如何在flex中控制元素的位置，我们又有了两个新属性align-items与justify-content

align-items控制 flex 项在交叉轴上的位置。

默认的值是 stretch，其会使所有 flex 项沿着交叉轴的方向拉伸以填充父容器。如果父容器在交叉轴方向上没有固定宽度（即高度），则所有 flex 项将变得与最长的 flex 项一样长（即高度保持一致）。我们的第一个例子在默认情况下得到相等的高度的列的原因。
在上面规则中我们使用的 center 值会使这些项保持其原有的高度，但是会在交叉轴居中。这就是那些按钮垂直居中的原因。

justify-content控制 flex 项在主轴上的位置。

默认值是 flex-start，这会使所有 flex 项都位于主轴的开始处。
你也可以用 flex-end 来让 flex 项到结尾处。
center 在 justify-content 里也是可用的，可以让 flex 项在主轴居中。
而我们上面用到的值 space-around 是很有用的——它会使所有 flex 项沿着主轴均匀地分布，在任意一端都会留有一点空间。
还有一个值是 space-between，它和 space-around 非常相似，只是它不会在两端留下任何空间。

我们使用如下例子：

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Flexbox align 0 — starting code</title>
    <style>
      body {
        width: 70%;
        max-width: 960px;
        margin: 20px auto;
      }

      button {
        font-size: 18px;
        line-height: 1.5;
        width: 15%;
      }

      div {
        height: 100px;
        border: 1px solid black;
      }

      /* Add your flexbox CSS below here */

      
    </style>
  </head>
  <body>
    <div>
      <button>1111</button>
      <button>2222</button>
      <button>3333</button>
      <button>4444</button>
      <button>5555</button>
    </div>
  </body>
</html>

如下效果

添加如下语句

div {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

齐白在学习

关注

8
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
CSS盒子

介绍了CSS盒子模型，具体介绍了flex的运用
复制链接

扫一扫