【CSS】从盒模型介绍展开

Composition
449 阅读4分钟

这是我参与8月更文挑战的第18天，活动详情查看：8月更文挑战

01. 盒子模型介绍

  • 释义：一个用来盛放HTML元素的容器

  • 包括：

    • content：内容本身
    • padding：内边距
    • border：边框
    • margin：外边距

  • 盒模型又分为标准盒模型和怪异盒模型

  • 标准盒模型

    • 设置方式：box-sizing: content-box;
    • 解释：
      • 当设置width: 100px;时，实际上设置的是content的宽度
      • 而盒子的实际宽度是：width + padding + border + margin的宽度

  • 怪异盒模型

    • 设置方式：box-sizing: border-box;

    • 解释：

      • 当设置width: 100px;时，实际上设置的是content + padding + border的宽度

      • 那么，盒子实际宽度是：width + margin的宽度

      设置width: 100px;时：

      • 如果没有设置padding和border，那么width就是content的宽度
      • 如果设置了padding和border，那么content = width - padding - border
        • 如果这时content为负数了，即width < padding + border
        • 那么此时：content == 0，width == padding + border
        • 即，width是不起作用的

02. 设置盒子阴影

  • 基本语法：box-shadow: 1px 2px 3px 4px #666;

    参数1：水平偏移值；参数2：垂直偏移值；参数3：模糊值；参数4：扩大面积值；参数5：颜色

  • 可以设置多个

    div {
    box-shadow: 1px 1px 1px 1px #ccc,
        2px 2px 2px 2px #eee;
}

  • 可以添加inset标识符，从而设置内阴影

    div {
    box-shadow: inset 1px 2px 3px 4px #333;
}

    具体的，可以通过浏览器F12，在box-shadow前面有一个小图标可以进行调节

03. BFC简单介绍

  • BFC：Block Formatting Context，块级格式化上下文

    • 即形成了BFC的元素，将会拥有一个独立的渲染区域
    • 它内部的布局不会影响到外部的元素

  • 特性：

    • BFC元素的边距会重叠
    • BFC元素内外布局互不相干
    • BFC元素不会与浮动元素发生重叠
    • BFC元素的高度计算会包括内部所有元素在内（包括浮动元素）

  • 形成条件

    • body根元素自成BFC
    • 浮动元素：float != none
    • 定位元素：position == absolute || fixed
    • display == inline-block || table-cells || flex || table-caption的元素
    • overflow != visible的元素

  • 作用：

    • 解决垂直外边距重叠问题

      • 父子元素：父子元素在都设置了同一个方向的外边距时，外边距会重叠，值为较大的那个值，并作用在父元素上
      .father {
    width: 200px;
    height: 200px;
    background-color: red;
    margin-top: 10px;
}
.son {
    margin-top: 30px;
    width: 100px;
    height: 100px;
    background-color: blue;
}

image-20210814114915064.png

后果：视觉上，只有父元素有外边距，且为30px，而子元素与父元素之间没有外边距

    ## 解决办法：
    
    /* 1. 设置 display -- 建议 */
    .father {
        display: flow-root; /* 让元素块状化 */
    }
    
    /* 2. 设置 overflow */
    .father {
        overflow: hidden; /* overflow: auto */
    }
    
    /* 3. 设置 padding */
    .father {
        padding: 1px;
    }
    
    /* 4. 设置 border */
    .father {
        border: 1px;
    }

  • 兄弟元素：

    • 当两者的外边距设置在同一个地方时，即上面的元素设置margin-bottom，下面的元素设置margin-top，外边距会重叠，值为较大的值

      
.bro1 {
    width: 100px;
    height: 100px;
    background-color: green;
    margin-bottom: 10px;
}
.bro2 {
    margin-top: 30px;
    width: 100px;
    height: 100px;
    background-color: yellow;
}

image-20210814115649647.png

    /* 给其中一个加一个父元素，给父元素触发BFC */

  • 解决浮动元素问题

    • 父子元素：子元素浮动，父元素如果没有设置高度（父元素高度由子元素撑开），会发生高度塌陷，没有高度
    .father {
    display: flow-root;
}

    这样，在触发了BFC后，计算高度时，会把浮动元素的值一起计算

04. 垂直水平居中的几种方式

  • 绝对定位

    /* 绝对定位 + transform */
.box {
    /* position: fixed; */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
/* 绝对定位 + margin */
.box {
    /* position: fixed; */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

  • 弹性布局

    /* justify-content + align-items */
.father {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* flex + margin */
.father {
    display: flex;
}
.son {
    margin: auto;
}

  • table布局

    .box {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

05. 文字垂直显示的方法

  • writing-mode:

    • horizontal-tb：水平方向自上而下的书写方式
    • vertical-rl：垂直方向自右而左的书写方式
    • vertical-lr：垂直方向内内容从上到下，水平方向从左到右
    • sideways-rl：内容垂直方向从上到下排列
    .box {
    writing-mode: horizontal-tb;
    display: inline-block;
    text-align: center;
    width: 100%;
}

06. 三角形

  • 当盒子宽高为空，仅设置边框宽度，且四个边框样式不一，则可看到盒子由四个三角形构成

    p {
    border-top: 50px solid red;
    border-right: 50px solid green;
    border-bottom: 50px solid blue;
    border-left: 50px solid yellow;
}

image-20210814120611603.png

  • 设置其它三个边框的样式为透明颜色，即可设置三角形，结合transform: rotate()属性可以旋转三角形

    调整边框宽度，可以调整三角形样式

    div{
    width: 0;
    height: 0;    
    /*即边框宽度为50px；边框颜色为透明*/
    border：50px solid transparent;
    /*给左边框加上颜色*/
    border-left-color：red;
    /*兼容性*/
    line-height：0;
    font-size：0 ;
}

image-20210814120909131.png

本人前端小菜鸡，如有不对请谅解

avatar
文章
阅读
粉丝