跳到主要内容

2.2-盒子基础属性

Create by fall on 22 Jul 2019 Recently revised in 07 Apr 2023

盒子的结构​

组成：content -> padding -> border -> margin 最内部 内部边距 外部边框 外层间距

盒子模型大致示意图：
┌──────────────────────────┐
|  ┏━━━━━━━━━━━━━┓         |
|  ┃ ┌─────────┐ ┃<-border |
|  ┃ | content | ┃         |
|  ┃ └─────────┘ ┃         |
|  ┃   padding   ┃         |
|  ┗━━━━━━━━━━━━━┛         |
|       margin             |
└──────────────────────────┘

盒子的结构

  • content：内容文本区域，weight 和 height 默认设置的是 content 的长宽。
  • padding：文本，或者内容的内边距
  • border：边框，包裹着文字内容的边框
  • margin：间距，不同盒子模型之间的间距，如果有大的，按照大的算（不能设置颜色）

content​

默认情况下，height、width 都是直接控制盒子的宽高。

height：盒子的高度

  • max-height、min-height：最小高度，最大高度

width：盒子的宽度

  • min-width、max-width：最大宽高

宽高百分比单位的换算：按照父元素的长和宽

width、height 不设置的时候，会根据子元素的内容自动计算容器的大小，比如盒子中的字体会撑开宽高

padding、margin​

盒子模型的长宽书写

  • 写一个值：如 30px（上下左右等宽）
  • 写两个值：30px 40px(上下 30px，左右 40px)
  • 写三个值：分别表示：上，左右，下
  • 写四个值：10px 20px 30px 40px（上为第一，其次为顺时针排列）

margin 左右 auto 适应是可以的，通过该方法设置居中

  • margin 叠加问题，出现在上下 margin 同时存在的时候，回去上下值较大的作为边距的值
  • margin 传递问题，出现在嵌套的结构，外部盒子 margin 为 40，而内部盒子为 30 时，不会内部盒子会贴着边，不会出现上边距（BFC 规范可以解决）

border​

border（边框）：控制边框的表现形式

border-style（边框样式）：solid 实线、dashed 虚线、dotted 点线、double 双实线

border-width（边框粗细）：比如：2px

border-color（边框颜色）：任意颜色值

border-radius（角的弧度）：比如 6px

<div style="position:relative;height:100px;">
  <div style="position:absolute;border-radius: 200px / 50px;width: 200px;height: 100px;background: pink;"></div>
  <div style="position:absolute;border-radius: 200px / 50px;width: 200px;height: 50px;background: lightpink;">
  </div>
</div>

outline​

outline 总共有三个属性

如果没有定义 outline 那么在大多数情况下是不可见的，例外：input 标签，浏览器都给予了默认样式。

取消 button 标签中的虚线，使用 outline:none。

box-sizing​

盒子尺寸，可以改变盒子的展示形态

  • 默认值：content-box：width、height 控制 content 的高度
  • border-box：width、height 的宽度为 content + padding + border

使用的场景

  • 避免增加边框厚度影响宽高后盒子大小的计算
  • 避免文档框之类的百分比问题

盒子属性​

display​

展示标签的方式

  • block：块标签，支持所有样式、独占一行、默认与父元素宽度相同
    • 标签：div，p，ul，li，h1
    • 特点：所占区域为矩形
  • inline：内联，排列在一起，不支持部分修饰：width、height、margin、padding
    • 标签：span、a、em、strong、img
    • 特点：宽度由内容决定，所占区域不一定为矩形，内容标签之间会有空隙
  • inline-block：挨在一起排列，支持宽高
    • 标签：input、select
  • none：不显示该块元素
  • flex：弹性布局，子标签进行弹性布局
  • grid：表格布局，多行多列

flex 和 grid 可以在第 3 章查看详细信息

注：布局一般用 block，块标签，文本一般用内联标签

overflow​

表示元素溢出块后的表现方式

  • visible：可以看见超出元素的内容（默认）
  • hidden：溢出内容全部隐藏
  • scroll：显示滚动条以便查看其他内容
  • auto：根据内容展示是否隐藏
  • overflow-x 和 overflow-y：只隐藏 x 轴，或者 y 轴的隐藏

resize​

动态调整盒子的属性

.resizable {
  overflow: scroll; /* resize 需要设置溢出隐藏 */ 
  resize: both;
  border: 1px solid black;
}

position​

position（设置元素的放置方式）可选值：

  • static（默认）、relative、absolute、fixed、sticky

relative：相对定位

  • 如果没有定位偏移量，对元素本身没有任何影响
  • 不使元素脱离文档流
  • 不影响其他元素布局
  • left、top、 right、bottom是相对于当前元素自身进行偏移的(元素距离对应边框的距离)

absolute：绝对定位

  • 使元素完全脱离文档流
  • 使内联元素支持宽高(让内联具备块特性)
  • 使块元素默认宽根据内容决定(让块具备内联的特性)
  • 如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移(绝对、相对、固定)
  • 祖先元素中，如果没有 relative 进行定位，直接相对body进行偏移

fixed：固定定位

  • 使元素完全脱离文档流
  • 使内联元素支持宽高( 让内联具备块特性)
  • 使块元素默认宽根据内容决定(让块具备内联的特性)
  • 相对于整个浏览器窗]进行偏移,不受浏览器滚动条的影响

position: fixed 能够相对于浏览器窗口定位有一个条件，那就是不能有任何祖先元素设置了 transform、perspective 或者 filter 样式属性。

sticky：粘性定位

  • 如果父容器显示在屏幕中，也会跟随一直会显示在页面中，类似于 fixed 和 relative 的结合
  • 在指定的位置进行黏性操作，top, right, bottom, left 四个阈值其中之一，必须指定一个，否则其行为与相对定位相同。
  • 默认相对它的最近滚动祖先进行滚动
  • 父节点的 overflow 属性必须是 visible，才会相对于整个页面进行滚动
  • 任意父节点定位设置为 position:relative | absolute | fixed，则元素相对父元素进行定位，而不会相对 viewprot 定位。

z-index​

z-index（层级）：可以改变层级，即后面数字越高，越在最上层，越优先展示

.index_top{
  z-index:20;
}

opacity​

透明度，0 为完全不可见，1 为完全可见，默认为 1

指定 opacity 样式，使之透明

pointer-events​

设置当前 div 是否拥有事件，设置为 none 就取消所有点击事件

float​

因为浮动会使得当前的元素变得更容易出现布局问题，所以不建议使用 float，可以通过 flex 布局进行替换。

表示浮动

  • 取值：left，right，none
  • 作用：脱离文档流，依次父容器左侧或右侧排列

注意点:

  • 只会影响当前元素后面的元素
  • 内容默认提升半层
  • 默认宽度从默认整行变为根据内容决定
  • 主要给元素添加，也可以给内联元素添加

与 float 相对的有清除浮动的属性：clear

  • 可选值：left、right，both
  • clear 只会作用于操作块元素，对内联样式不起作用

属性的单位​

长度​

  • 像素：px
  • 百分比：%
    • 外容器 1 宽 600px 当前容器 50% 等价于 300px
    • 外容器 2 宽 300px 当前容器 50% 等价于 150px
  • 屏幕百分比：vh、vw、vmin、vmax
  • ch（character height）表示当前 font-size 下，字符 0 的宽度
  • 字体：rem、em
    • 字体大小：em，1em 相当于 1 倍字体大小
    • rem 根元素字体的长度

颜色​

任何颜色的选择都可以通过以下方法表示：

  • 单词表示法：background-color:yellow
  • 十六进制表示法：background-color:#ffffff
    • 十六进制表示透明颜色：background-color:#ffffff00
  • rgb：rgb(255,255,255)
  • rgba：rgba(255,255,255,0.5) 最后一位是不透明度，越高，越不透明
  • hsl：hsl(60deg,0.9 0.9) 分别表示：色环多少度，鲜艳度（越高颜色越鲜艳），明暗 0.5 向上为亮，往下为暗
  • color：color(display-p3 0.92 0.33 0.33) 用于表示更加鲜艳的颜色

参考文章​

文章名称链接
MDN文档https://developer.mozilla.org/en-US/docs/Web/CSS/outline