自学前端第十三天~

最新推荐文章于 2024-07-19 15:32:49 发布

弹走鱼尾纹~

最新推荐文章于 2024-07-19 15:32:49 发布

阅读量266

点赞数

文章标签： html css 前端 css3 html5

本文链接：https://blog.csdn.net/qq_41575188/article/details/123831464

版权

怪异盒模型

之前每次设置好盒子的内边距或者是边框后都需要将其宽度和高度减去对应的距离。这样计算感觉很麻烦，所以就有了怪异盒模型，和之前的普通盒模型不同，加上怪异盒模型的属性在设置内便于和边框时只会压缩内部内容的宽和高，对外部盒子的宽和高不会造成影响。

box-sizing:content-box 默认值，普通盒模型，计算时如果加了边框和内边距需要在宽和高上减去对应宽度高度。
box-sizing:border-box 怪异盒模型，压缩内部内容宽和高,保证盒子即使加了内边距或者边框，宽度和高度也不会变化。

<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>
        .box{
            width: 900px;
            height: 300px;
            background-color: yellow;
            margin: 0 auto;
        }
        .box div{
            width: 300px;
            height: 300px;
            text-align: center;
            float: left;
            padding: 10px;
            border: 10px solid red;
            box-sizing: border-box;
        }
    </style>

</head>
<body>
    <div class="box">
        <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore eveniet fugit, vel magnam cupiditate officia autem eos quas, asperiores illum optio quae, doloremque aut alias facilis debitis necessitatibus omnis esse!</div>
        <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae est rem animi consectetur itaque tempora numquam exercitationem ullam dicta delectus nulla ratione odio nostrum sunt placeat, autem sed commodi sapiente.</div>
        <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Labore laborum cumque atque laboriosam excepturi magnam ad aspernatur maxime sunt necessitatibus, similique ipsa natus, dolorem iure? Magni quae fugit iusto fuga?</div>
    </div>
</body>

弹性盒模型

弹性盒是一种新的布局方式，特别适合移动端布局
  display：flex ;
    1.让盒子显示为弹性盒，子元素是块元素时，让子元素横向排列，默认情况下主轴是水平方向排列。
    2.子元素是行内元素时，会使子元素变成块级元素。
    3.只有一个子元素的时候可以加上 margin: auto;在水平竖直方向居中。

<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>
        .box{
            width: 500px;
            height: 500px;
            border: 2px solid black;
            margin: 100px auto;
            display: flex;
        }
        .box div{
            width: 100px;
            height: 100px;
            border: 1px dashed red;

            
        }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

主轴侧轴调整方向

主轴就是弹性盒默认的水平方向排列，侧轴就是竖直方向的排列。

flex-direction 改变主轴方向
flex-direction：row 水平排列
flex-direction：column 竖直排列
flex-direction：row-reverse 水平反向排列
flex-direction：colum-reverse 竖直反向排列 

justify-content 调整主轴对齐方式
justify-content: flex-start;默认值从主轴左边开始排列
justify-content: flex-end;从主轴右边开始排列
justify-content: center;从主轴中间开始排列
justify-content:space-between;两端对齐
justify-content:space-around;距离环绕

align-items 调整侧轴对齐方式，不支持两端对齐和距离环绕
align-items:flex-start;默认值在侧轴最上面排列
align-items:flex-end;在侧轴最低下排列
align-items:center;在侧轴中间排列

折行

弹性盒很固执，总是会在一行排列，即使外面的父盒子包不住。所以有时候需要设置折行这个属性。

flex-wrap: wrap;折行

但是默认的折行后的盒子的行间距往往不尽人意，所以需要align-content，控制折行后行间距。

align-content 控制折行后行间距 
align-content:flex-start;
align-content:flex-end;
align-content:center;
align-content:space-around;
<align-content:space-between;

项目-对齐方式

这里的项目就是指一个个小盒子，之前设置的属性都是对外面的父盒子设置的，使里面小盒子们跟着大盒子设置的属性来展示。其实也可以单独给某个小盒子设置自己的属性。

align-self 单独给某个盒子设置位置
align-self: flex-start;
align-self: flex-end;
align-self: center;
align-self: baseline;
align-self: stretch;不设置宽和高的情况下，盒子拉伸撑满高度和宽度

<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>
         .box{
            width: 500px;
            height: 500px;
            border: 2px solid black;
            margin: 100px auto;
            display: flex;
            align-items: center;
        }
        .box div{
            width: 100px;
            border: 1px dashed red;        
        }
        .div1{
            align-self: flex-start;
        }
        .div2{
            align-self: flex-end;
        }
        .div3{
            align-self: center;
        }
        .div4{
            align-self: baseline;
        }
        .div5{
            align-self: stretch;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="div1">111</div>
        <div class="div2">222</div>
        <div class="div3">333</div>
        <div class="div4">444</div>
        <div class="div5">555</div>
    </div>
</body>

项目-调整顺序

就是给小盒子们调整顺序。order这个属性，设置值可以是负，越小位置越靠前。

<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>
         .box{
            width: 500px;
            height: 500px;
            border: 2px solid black;
            margin: 100px auto;
            display: flex;       
         }
        .box div{
            width: 100px;
            height: 100px;
            border: 1px dashed red;        
        }
        .div1{
          order: -3;
        }
        .div2{
            order: 1;
        }
        .div3{
            order:-4;
        }
        .div4{
            order: 1;
        }
        .div5{
            order: -1;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="div1">111</div>
        <div class="div2">222</div>
        <div class="div3">333</div>
        <div class="div4">444</div>
        <div class="div5">555</div>
    </div>
</body>

一个京东案例：

用到了怪异盒、弹性盒和折行的属性。

<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>
        .box{
            width: 300px;
            height: 120px;
            border: 1px solid black;
            margin: 10px auto;
            display: flex;
            flex-wrap: wrap;
        }
        .box div{
            width: 60px;
            height: 60px;
            border: 1px dashed red;
            box-sizing: border-box;
            display: flex;
        }
        .box div img{
            width: 40px;
            height: 40px;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="box">
        <div><img src="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg.dpg"></div>
        <div><img src="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg.dpg"></div>
        <div><img src="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg.dpg"></div>
        <div><img src="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg.dpg"></div>
        <div><img src="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg.dpg"></div>
        <div><img src="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg.dpg"></div>
        <div><img src="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg.dpg"></div>
        <div><img src="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg.dpg"></div>
       
    </div>
</body>

弹走鱼尾纹~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自学前端第十三天~

怪异盒模型之前每次设置好盒子的内边距或者是边框后都需要将其宽度和高度减去对应的距离。这样计算感觉很麻烦，所以就有了怪异盒模型，和之前的普通盒模型不同，加上怪异盒模型的属性在设置内便于和边框时只会压缩内部内容的宽和高，对外部盒子的宽和高不会造成影响。box-sizing:content-box 默认值，普通盒模型，计算时如果加了边框和内边距需要在宽和高上减去对应宽度高度。box-sizing:border-box 怪异盒模型，压缩内部内容宽和高,保证盒子即使加了内边距或者边框，宽度和高度也不会变化
复制链接

扫一扫