🌻CSS 布局-盒子模型

type
status
date
slug
summary
tags
category
icon
password
☀️
点击带三角形的标题可以展开收缩内容。

基础属性

  • 内容区域
    • width：宽
    • height：高
  • padding：内边距（出现在内容与盒子边缘之间）
    • padding: 30px;四个方向 内边距相同
    • padding-top: 10px;
    • padding-right: 20px;
    • padding-bottom: 40px;
    • padding-left: 80px;
    • padding 多值写法
      • 从上开始顺时针赋值，当前方向没有数值则与对面取值相同。
      • padding:10px;四个方向都是 10px
      • padding:10px 20px 30px 40px;上 10，右 20，下 30，左40
      • padding:10px 20px 30px; -上 10，左右 20，下 30
      • padding:10px 20px;上 10，左右 20
  • border：边框线
    • solid：实线
    • dashed：虚线
    • dotted：点线
    • 单方向边框线
      • border-方位名词:：边框线粗细 线条样式 颜色（不区分顺序）
      • border-top: 2px solid red;
  • margin：外边距（出现在盒子外面）
    • 分开、多值写法与内边距一致
  • background-color：背景色
  • 尺寸计算
    • 默认情况：盒子尺寸 = 内容尺寸 + border 尺寸 + 内边距尺寸
    • 结论：给盒子加 border / padding 会撑大盒子
    • 手动做减法，减掉 border / padding 的尺寸
    • 內减模式
      • box-sizing:border-box
notion image

版心居中

左右 margin 值 为 auto（盒子要有宽度）
  • overflow：元素溢出，控制溢出元素的内容的显示方：
    • hidden：溢出隐藏
    • scroll：溢出滚动（无论是否溢出，都显示滚动条位置）
    • auto：溢出滚动（溢出才显示滚动条位置）

外边距问题

  • 合并现象
    • 场景：垂直排列的兄弟元素，上下 margin 会合并
    • 现象：取两个 margin 中的较大值生效
notion image

外边距塌陷

  • 场景：父子级的标签，子级的添加 上外边距 会产生塌陷问题
  • 现象：导致父级一起向下移动
  • 解决方法：
    • 取消子级margin，父级设置padding
    • 父级设置 overflow: hidden
    • 父级设置 border-top
notion image

行内元素 – 内外边距问题

场景：行内元素添加 margin 和 padding，无法改变元素垂直位置
解决方法：给行内元素添加 line-height 可以改变垂直位置

圆角

属性名：border-radius
属性值：数字+px / 百分比
提示：属性值是圆角半径
正圆形状：给正方形盒子设置圆角属性值为 宽高的一半 / 50%
border-radius: 50%;
胶囊形状：给长方形盒子设置圆角属性值为 盒子高度的一半

盒子阴影

作用：给元素设置阴影效果
属性名：box-shadow
属性值：X 轴偏移量 Y 轴偏移量 模糊半径 扩散半径 颜色 内外阴影
注意：
  • X 轴偏移量 和 Y 轴偏移量 必须书写
  • 默认是外阴影，内阴影需要添加 inset
🌻
欢迎在下方留言讨论~
CSS 布局-显示模式CSS 布局-flex
Loading...
目录