CSS3笔记——弹性盒子

最新推荐文章于 2024-07-18 16:42:05 发布

seveinn

最新推荐文章于 2024-07-18 16:42:05 发布

阅读量395

点赞数 1

文章标签： css3

本文链接：https://blog.csdn.net/weixin_38335055/article/details/104700412

版权

盒模型的重要性——其功能的强大与否决定了页面布局是否简洁
–>影响HTML结构
–>影响CSS和JS

注：本页中的代码，.wrapper–>父级容器盒子，.content–>盒子内容子项

文章目录

一、IE6混杂模式(怪异模式)的盒子

一般的盒子（W3C标准盒模型——W3C standard mode）：
boxWidth = width + border2 + padding2;

IE6混杂模式的盒子(IE6 Quirks mode)：
boxWidth = width;
contentWidth = width - border2 - padding2;
触发条件：
设置属性
box-sizing: border-box;

应用场景：

宽度不固定，内边距固定

   <div class="wrapper">
        <div class="content"></div>
        <div class="content"></div>
    </div>

div.wrapper {
    width: 100%;
    height: 200px;
    border: 1px solid black;
}
.content:first-of-type {
    float: left;
    width: 50%;
    height: 100px;
    background-color: yellow;

    padding: 0 10px;
	box-sizing: border-box;
}
.content {
    float: left;
    width: 50%;
    height: 100px;
    background-color: red;
}

在这里插入图片描述
没有触发box-sizing属性时，左边的黄色盒子50%的width加上padding之后就会超出50%

2. 输入框的需求：已知输入框的大小和内边距

input {     
    width: 300px;     
    height: 35px;     
    margin: 20px 30px;     
    box-sizing: border-box;     
    padding: 0 10px; 
}

在这里插入图片描述

用户自定义盒子宽度，或由后端返回数据决定
浮动布局

<div class="wrapper">
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
    </div>

.wrapper {
    margin: 50px 60px;
    width: 300px;
    height: 300px;
    border: 2px solid red;
}
.content {
    width: 100px;
    height: 100px;
    background-color: black;
    border: 2px solid #fff;
    float: left;
    box-sizing: border-box;
}

常用属性

overflow

.wrapper {
    margin: 60px;
    width: 300px;
    height: 300px;
    border: 1px solid red;
    overflow-x: scroll;
    /*overflow-y: auto;*/
}

说明：

当overflow-x, overflow-y中有一个属性值为非默认visible时，会将另一个设置为auto

应用：

手机端滑屏查看明星相关人物
在这里插入图片描述

overflow-x: auto;

resize允许用户调整元素大小，但是必须配合overflow属性使用

 overflow: scroll;    
 resize: both; 
 /*可选参数：verticle, none, horizontal, both等，具体见CSS3参考手册*/

二、弹性盒子

A. 理论

注：flex box相关属性的设置都应给父级容器进行设置

给父级容器设置的一些属性：

 <div class="wrapper">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
    </div>

.wrapper {
    margin: 100px;
    width: 300px;
    height: 300px;
    border: 3px solid black;
    display: flex;

    /*伸缩方向——沿主轴伸缩*/
    /*主轴*/
    flex-direction: column-reverse;    
    /*可选参数row, row-reverse, column, column-reverse*/
}
.content {
    width: 100px;
    height: 100px;
    border: 3px solid red; 
    box-sizing: border-box;    
}

colume-reverse

 	flex-direction: row;
    flex-wrap: wrap;    /*设置换行，可选参数 wrap, nowrap, wrap-reverse*/

flex-wrap: wrap

justify-content: space-around;    
/*基于主轴方向设置内容对齐方式，
可选参数 flex-start, flex-end, center, space-between, space-around*/

justify-content: space-around;
单行元素的水平垂直居中

 	justify-content: center;
    align-items: center;    
    /*主要针对单行元素*/
    /*设置内容在垂直轴方向的对齐方式，
    可选参数 
    flex-start, flex-end, center, baseline(以文字内容基线对齐), 
    stretch(使元素高度尽量等于盒子行高)*/

单行元素的水平垂直居中效果
多行元素居中

align-content: center;

多行元素居中效果

给内容子项设置的一些属性：

order

<div class="wrapper">     
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>       
    </div>

.content:first-of-type {
    order: 2;
}
.content:nth-of-type(2) {
    order: -1;    /*数值越小，越靠前显示，不设置默认为0*/
}

order设置后的效果
align-self

/*父级*/
.wrapper {
    align-items: center;
}

/*子项*/
/*针对子项设置以交叉轴（垂直方向）为基准的对齐方式，
最终效果：子项的优先级>父级的优先级*/
.content:first-of-type {
    /* order: 2; */
    align-self: flex-start;
}
.content:nth-of-type(2) {
    /* order: -1; */
    align-self: flex-end;
}

子项设置align-sekf后的效果
align-content

/*父级*/
.wrapper {
    align-content: center;    
    /*align-content优先级>子项优先级*/
}
/*子项*/
.content:first-of-type {
    /* order: 2; */
    align-self: flex-start;
}
.content:nth-of-type(2) {
    /* order: -1; */
    align-self: flex-end;
}

父级align-content优先级>子项优先级

子项的一些重要属性：

flex-grow

flex-grow: 1;    
/*一行中的元素会按属性设置的比例瓜分剩余的行空间 
1--> 1:1:1    3-->3:3:3*/

在这里插入图片描述



.content {
    flex-grow: 3;
}
.content:first-of-type {
    flex-grow: 1;
}
.content:nth-of-type(2) {
    flex-grow: 2;
}
/*当某些子项单独设置了flex-grow属性，
瓜分比例变成1:2:3 
--> 即父级宽度为600px,子项宽度为100px时，分别瓜分了50px,100px,150px
-->各自占150px,200px,250px */

在这里插入图片描述
flex-shrink

.wrapper {
    margin: 100px;
    width: 600px;
    height: 600px;
    display: flex;    
}
.content {
    width: 200px;
    height: 200px;
    flex-shrink: 1;
}
.content:first-of-type {
    background-color: rosybrown;
}
.content:nth-of-type(2) {
    background-color: seagreen;
}
.content:nth-of-type(3) {
    background-color: tan;
    width: 400px;
    flex-shrink: 3;
}

/*
缩减值 = 实际内容区的宽度 * 加权shrink值 * 多余像素/ 加权总像素
（加权总像素 = 内容区大小1*加权shrink值 + 内容区大小2*加权shrink值 + ...）
例如：
第三个元素应缩减
（400px * 3）* （200px + 200px + 400px - 600px） / （200px * 1 + 200px * 1 + 400px * 3）
= 1200px * 200px / 1600px
= 150px
缩减后所占的像素值为
400px - 150px = 250px
*/

在这里插入图片描述
flex-basis

.wrapper {
    margin: 100px;
    width: 600px;
    height: 600px;
    display: flex;    
}
.content {
    /* flex-basis <= 元素实际宽度（会发生伸缩） <= width */
    /*元素宽度会伸缩时，该元素不参与shrink压缩，
    最好给所有元素统一设置break-word换行，以免内容影响元素的展示*/
    flex-basis: 100px;
    width: 200px;
    height: 200px;
}
.content:first-of-type {
    background-color: rosybrown;
}
.content:nth-of-type(2) {
    background-color: seagreen;
}
.content:nth-of-type(3) {
    background-color: tan;
}

在这里插入图片描述

B. 应用

a. 弹性盒子实现居中效果

.wrapper {
    width: 400px;
    height: 300px;
    margin: 100px;
    border: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    resize: both;
    overflow: hidden;
}
.content {
    width: 245px;
    height: 126px;
    border: 1px solid black;
}

居中效果

b. 导航栏

  <div class="navigator">
        <div class="item">天猫</div>
        <div class="item">淘宝</div>
        <div class="item">聚划算</div>
    </div>

.navigator {
    margin: 100px;
    width: 300px;
    border: 1px solid black;


    display: flex;
    justify-content: center;
    align-items: center;
}
.item {
    text-align: center;
    flex: 1 1 auto;    /*flex: flex-grow flex-shrink flex-basis*/
    width: 50px;
    height: 30px;
    border-radius: 5px;
    color: #ff2200;
}
.item:hover {
    color: #fff;
    background-color: #ff2200;
}

c. 中间固定，两端自适应

 	<div class="wrapper">
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
     </div>

.wrapper {
    width: 400px;
    height: 200px;
    margin: 100px;
    border: 1px solid black;

    resize: both;
    overflow: hidden;

    display: flex;
}
.content {
    flex: 1 1 auto;
    height: 100px;
    border: 1px solid green;
    box-sizing: border-box;
}
.content:nth-of-type(2) {
    flex: 0 0 200px;    /*不同元素可根据不同的需求设置不同比例和基准值*/
}

中间固定，两端自适应

d. 流式布局——模拟float浮动布局

.wrapper {
    width: 400px;
    height: 600px;
    margin: 100px;
    border: 1px solid black;

    resize: both;
    overflow: hidden;

    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;    /*不会影响父级——BUG:浮动元素脱离了文档流，不会被父级包裹*/
}

流式布局

e. 圣杯布局——头部、尾部固定，中间自适应，左右固定，中间自适应

 <div class="wrapper">
        <div class="header"></div>
        <div class="container">
            <div class="left"></div>
            <div class="center"></div>
            <div class="right"></div>            
        </div>
        <div class="footer"></div>
    </div>

.wrapper {
    margin: 100px;
    width: 300px;
    height: 300px;
    resize: both;
    overflow: hidden;
    border: 1px solid black;

    display: flex;
    flex-direction: column;
}
.header, .footer, .left, .right{
    flex: 0 0 20%;
    border: 1px solid green;
    box-sizing: border-box;
}
.container {
    flex: 1 1 auto;
    display: flex;
}
.center {
    flex: 1 1 auto;
}

在这里插入图片描述

seveinn

关注

1
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
CSS3笔记——弹性盒子

盒模型的重要性——其功能的强大与否决定了页面布局是否简洁–>影响HTML结构–>影响CSS和JS注：本页中的代码，.wrapper–>父级容器盒子，.content–>盒子内容子项一、IE6混杂模式(怪异模式)的盒子一般的盒子（W3C标准盒模型——W3C standard mode）：boxWidth = width + border2 + padding2;...
复制链接

扫一扫