跳到主要内容

CSS学习笔记-盒子模型

下定决心还是再学一遍CSS等前端知识

1. 盒子模型-margin​

1.1 margin 基本使用​

换行符会造成两个元素之间有间距

暂时可以通过去除（后面介绍通过浮动，flex布局去除）

body {
    font-size: 0; 
}

依次尝试：

  • margin-top
  • margin-bottom
  • margin-right
  • margin-left
  • margin 全写，以及缩写属性

1.2. padding 和 margin对比​

  • 大box包含小box，如果设置大box的padding，会让大box撑开
    • box-sizing: boder-box;
  • 设置小box的margin
    • 好处：不用设置boder-box，
    • 坏处： 但是对于margin-top会让大box也往下跑
      • 因为做了一个传递，把margin传递给了父元素
      • 解决办法，在父元素设置: overflow: auto;,不是最好的方式，后面讲
  • 补充
    • margin用来设置元素和元素之间的距离（一般是兄弟元素）
    • padding

1.3. margin上下传递问题​

  • 左右不会传递

  • margin-top传递

    • 如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素

  • margin-bottom传递

    • 如果块级元素的底部线和父元素的底部线重叠，并且父元素的高度是auto，那么这个块级元素的margin-bottom值会传递给父元素

  • 如何防止出现传递问题？

    • 给父元素设置padding-top ，padding-bottom
    • 给父元素设置border
    • 触发BFC（Block Formatting Context）(块级格式上下文)：设置overflow为auto

  • 建议：

    • margin一般用来设置兄弟元素之间的间距
    • padding一般用来设置父子元素之间的间距

1.4. 上下margin的折叠​

  • 垂直方向上相邻2个margin(margin-top, margin-bottom)有可能合并为一个margin，这种现象叫做collapse（折叠）

  • 水平方向上的margin(margin-left, margin-right)永远不会折叠

  • 折叠后最终值的计算规则

    • 两个值比较，取较大的值

  • 如何防止margin折叠

    • 只设置其中一个元素的margin

  • 兄弟块级元素之间margin的折叠

image-20250502104448615

  • 父子块级元素之间margin的折叠

image-20250502104730263

1.5. 块级元素的水平居中-margin-auto​

  • 浏览器默认会给body设置margin: 8px
  • 块级元素 block box
    • block box width = width + padding + border + margin
    • 但是默认margin-left是0
    • margin-right也是0
    • 但是浏览器优先展示width，然后再把剩余的空间设给right
  • 如果希望居中，则把margin-left和margin-right都设置为auto
  • 点评
    • 这种方式不太好，用flex布局则是更好
    • 比如float浮动也不应该用来做布局

2.盒子模型-外轮廓-outline​

  • outline表示元素的外轮廓
    • 不占用空间
    • 默认显示在border的外面
  • outline相关属性
    • outline-width
    • outline-style
    • outline-color
    • Outline: outline-width, outline-style, outline-color

3.盒子模型-阴影-box-shadow​

  • box-shadow属性可以设置一个或者多个阴影

    • 每个阴影用shadow表示
    • 多个阴影之间用逗号隔开，从前到后叠加

  • 常见格式

    • none | <shadow>#
    • <shadow> = inset? && <length>{2, 4} && <color>?
    • 第一个length: offset-x,水平方向的偏移，正数往向右
    • 第二个length: offset-y,水平方向的偏移，正数往向下
    • 第3个length：blur-radius, 模糊半径
    • 第4个length：spread-radius, 延伸半径
    • color: 阴影的颜色，如果没有设置，就跟随color属性的颜色
    • inset: 外框阴影变成内框阴影

  • 坐标轴

  • blur：阴影的模糊度

  • 在线网站

4.盒子模型-文字阴影-text-shadow​

5. 行内非替换元素的注意事项​

  • span/a/strong/i
    • width,height不生效
    • padding, border, margin，上下可以撑大，但是不占空间

6. 盒子模型-盒子尺寸计算-box-sizing​

  • 背景色有没有设置到border下面（有设置）
  • 前景色会在border没有设置颜色的情况下，显示出来color颜色
.box {
    width: 100px;
    height: 100px;
    background-color: #f00;
    color: orange;
    padding: 30px;
    border: 10px solid;
}
  • box-sizing用来设置盒子模型中宽高的行为
  • content-box
    • padding, border都布置在width，height外边
  • border-box
    • padding, border都布置在width，height里面

image-20250502153041620

image-20250502153105022

image-20250502153638044

7. 案例​

image-20250502152032982

image-20250502152047429

image-20250502152055214

  • 灰色背景：#f5f5f5

  • 单行显示省略号

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
0%