css查缺补漏

爱上诺曼底
133 阅读3分钟

1、 自适应盒模型的特性（子容器，不要设置width值；自适应父容器，不影响整体[父元素]布局，减少计算量）

  • 当子盒子不设置width时，会继承父盒子宽度，使用margin/padding/border时，不会出现溢出的现象，在父盒子内部进行收缩，而不用进行额外的计算
  • 适用于子容器和父容器宽度相同，并且内容要向里收缩，不往外溢出，就不要在子容器进行宽度的设置了
.father {
     width: 300px;
     height: 200px;
     background: pink;
}
.son {
    /* width: 300px; */   /* 子元素尽量不要设置宽度 */ 
    height: 100px;
    padding: 10px;
    border: 5px solid #000;
    margin: 10px;
}

2、标准盒模型和怪异盒模型 box-sizing属性（父容器设置box-sizing: border-box后；子容器在父容器中随意布局，不影响整体[父元素]布局，减少计算量）

  • content-box: width、height -> content
  • border-box: width、height -> content + padding + border

应用1：量取尺寸时不用再去计算一些值（内部布局不会影响外部设定的容器大小，减少计算量）

image.png 如上图，红框中设置widht375px，height111px，设置box-sizing: border-box后，内部元素布局使用padding，红框仍然是width375px，height111px

应用2：解决一些需要设置百分比和盒模型值

image.png

如上图，红框中底部nav，width为100%，如果设置padding后，会出现横向滚动条，设置box-sizing: border-box，则不会出现滚动条而溢出；

3、flex弹性盒布局（一维布局，一行一列）

image.png

注意：

  • 当不换行时，align-content是不生效的。（flex-wrap:wrap + align-content）
  • align-items针对单行，align-content针对多行

image.png image.png

场景：

1. 内联与块的上下左右居中布局

image.png

  • 内联（纵向居中）
display: flex;

单行居中：
align-items:center;

多行居中：
flex-wrap: wrap;
align-content: center;
  • 块级（上下左右居中）
display: flex;
justify-content: center;
align-items: center;

2. 不定项居中布局

image.png

.content{
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.content .item {
    margin: 10px;
}

3. 均分列布局

image.png

.container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 20px;
}

4. 子项分组布局(margin-right: auto)

image.png

.main{
    diaplay: flex;
    align-items: center;
}
.main div{
    margin-right: 10px;
}
.main div:nth-of-type(1){
    margin-right: auto;
}

5. 等高布局（两边根据比较长的那一边自动撑开）

image.png

.main {
    display: flex;
    justify-content: space-between;
}

6. 两列与三列布局

image.png

.main {
    height: 100vh;
    display: flex;
}
.col1 {
    width: 200px;
}
.col2 {
    flex-grow: 1;
}
.col3 {
    width: 200px;
}

7. Sticky Footer布局

image.png

.main {
    min-height:100vh;
    display: flex;
    flex-direction: column;
}
.main .header {
    height: 100px
}
.main .content {
    flex-grow: 1;
}
.main .footer {
    height: 100px
}

8. 溢出项布局

image.png

.main {
    height: 100px;
    display: flex;
    align-items: center;
}
.main {
    width: 100px;
    height: 80px;
    margin-right: 10px;
    flex-shrink: 0;
}

4、grid网格布局（二维布局，行row 列column）

image.png

image.png

image.png

应用：容器自适应行列布局

image.png

/* 行自适应 */
.main {
    background: #bfa;
    width: 300px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 100px;
    gap: 5px
}
.main div {
    background: pink
}

/* 列自适应 */
.main {
    background: #bfa;
    height: 300px;
    display: inline-grid;
    grid-template-rows: repeat(3, 1fr);
    grid-auto-flow: column;
    grid-auto-columns: 100px;
    gap: 5px
}
.main div {
    background: pink
}
avatar
文章
阅读
粉丝