html&css之盒子模型、伸缩盒布局和浮动问题

最新推荐文章于 2023-11-20 15:24:50 发布

嘧

最新推荐文章于 2023-11-20 15:24:50 发布

阅读量1k

点赞数 1

文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_50748038/article/details/126103691

版权

1.盒子种类及区别

种类：1.内容盒子，也叫w3c盒子、标准盒子 2.边框盒子，也叫IE盒子、怪异盒子设置盒子属性box-sizing:content-box(默认内容盒子)/border-box(边框盒子)

盒子的结构如下：

区别：1.内容盒子的width和height是设置给内容区的，而边框盒子的宽高是设置给盒子本身的box-sizing:content-box(border/margin/padding占据的都是页面的大小)
内容盒子的宽高计算：A=width+border-left+border-right+padding-left+padding-right
内容盒子占页面的宽：A+margin-right+margin-left
边框盒子的宽高计算：width=内容区宽度+border-left+border-right+padding-left+padding-right
边框盒子占页面的宽：width+margin-right+margin-left

2.盒子属性及背景样式

盒子一般指块元素，一个盒子由外边距、内边距、边框、内容区组成。width&height:设置的是元素内容区的宽高 width块级元素默认100% height：默认为0，由子元素填充

1、min-width&max-width

元素最大/最小宽度限制当前元素最大最小取值，不设置宽高时按最大宽度显示

2、 background-color设置背景颜色

3、background-image设置背景图片

4、background-repeat设置背景图片是否平铺（默认取值repeat平铺）

5、background-position设置背景图片的位置

6、背景样式速写background: blue url(xxx.jpg) no-repeat 20px 20px;

7、 background-attachment: fixed设置背景图片不随滚动条滚动而滚动

3.伸缩盒布局（弹性布局）

一、容器属性(设置给父元素的属性)

1、flex-deriction(用于更改主轴方向) 取值：row(默认水平正向)|row-reverse(水平方向反向排布)|column(垂直方向自顶向下排布)|column-reverse

2、flex-wrap(设置换行方式) 取值：nowrap(默认不换行)|wrap(换行)|wrap-reverse(反向换行)

    <style>
        .container{
            width: 300px;
            height: 300px;
            margin: 0 auto;
            background-color: rgb(246, 210, 210);
            /* 开启弹性盒布局 默认弹性元素沿主轴方向排列*/
            display: flex;
            /* 默认不换行 如果弹性容器超出父容器的宽度 等比例压缩 */
            /* 设置弹性元素换行 默认是wrap wrap-reverse反向换行  */
            /* flex-wrap: wrap; */
            /* flex-flow是flex-direction和flex-wrap属性结合 */
            flex-wrap:wrap-reverse;
        }
        /* 设置子元素样式 */
        .container div{ width: 60px;height: 50px;color: white;  }
    </style>
<body>
    <div class="container">
        <div class="div1" style="background-color:red;">弹性盒子1</div>
        <div class="div2" style="background-color:blue;">弹性盒子2</div>
        <div class="div3" style="background-color:yellow;">弹性盒子3</div>
        <div class="div1" style="background-color:red;">弹性盒子4</div>
        <div class="div2" style="background-color:blue;">弹性盒子5</div>
        <div class="div3" style="background-color:yellow;">弹性盒子6</div>
        <div class="div1" style="background-color:red;">弹性盒子7</div>
        <div class="div2" style="background-color:blue;">弹性盒子8</div>
        <div class="div3" style="background-color:yellow;">弹性盒子9</div>
    </div>
</body>

默认元素不换行,弹性容器超出父元素长度等比例压缩：

正向换行/反向换行：

3、flex-flow 为flex-deriction与flex-wrap属性的简写集合，默认为row nowrap，即横向排列不换行

4、justify-content(设置子元素在主轴上的对齐方式)

5、 align-items(设置子元素在交叉轴上的列方式)

默认stretch,前提是项目没设置高度或为auto占满整个容器
取值：flex-start|flex-end|center|baseline基线对齐|stretch(默认)

<style>
        .container{
            width: 300px;height: 300px;margin: 0 auto;
            background-color: rgb(246, 210, 210);
            display: flex;
            /* 开启换行 使用多行对齐的效果的前提 */
            flex-wrap: wrap;
            align-content: flex-end;
            /*align-content: flex-start;*/
            /*align-content: center;*/
            /*align-content: space-between;*/
            /*align-content: space-around;*/
            /*align-content: space-evenly;*/
            /*align-content: stretch(默认);*/
        }
        .container div{ width: 60px;height: 50px;color: white; }
    </style>
</head>
<body>
    <div class="container">
        <div class="div1" style="background-color:red;">弹性盒子1</div>
        <div class="div2" style="background-color:blue;">弹性盒子2</div>
        <div class="div3" style="background-color:yellow;">弹性盒子3</div>
        <div class="div1" style="background-color:red;">弹性盒子4</div>
        <div class="div2" style="background-color:blue;">弹性盒子5</div>
        <div class="div3" style="background-color:yellow;">弹性盒子6</div>
        <div class="div1" style="background-color:red;">弹性盒子7</div>
        <div class="div2" style="background-color:blue;">弹性盒子8</div>
        <div class="div3" style="background-color:yellow;">弹性盒子9</div>
    </div>

align-content:flex-start/flex-end/center,分别处于交叉轴的上面、下面和中间（图中标签名有误，应为align-content）

align-content：space-between第一行和最后一行紧贴顶部和底部，内容超过两行中间的均匀分布

align-content:space-around/space-evenly(图像标签名有误)

二、元素(项目)属性(子元素)

1.order（项目排序）
取值：默认0，用于决定项目排列顺序，数值越小，项目排列越靠前。
2.flex-grow（剩余空间处理）
默认0 容器再有剩余空间的情况下默认不会被其它元素占据的
假设默认三个项目中前两个个项目都是0，最后一个是1，最后的项目会占满剩余所有空间。
3.flex-shrink（是否等比例压缩）
剩余空间不足的时候是否等比例压缩默认是1,等比例压缩为0不参与压缩
4.flex-basis(更改项目宽度)
取值：默认auto,项目会保持默认宽度，或者以width为自身的宽度
如果设置了flex-basis basis优先级高于width
5.flex（属性组合）
取值：默认0 1 auto
flex属性是flex-grow，flex-shrink与flex-basis三个属性的简写
6.align-self（对齐方式）
设置弹性元素自身在交叉轴的对齐方式
取值：auto(默认)|flex-start|flex-end|center|baseline|stretch