Web前端开发技术

Appearance

定型 ​

元信息 ​

  • 目标：建立"万物皆盒子"的盒子模型观——尺寸=内容+内边距+边框+外边距；掌握 display 各内置盒子类型的特性与相互转换，分清不同盒子能设置哪些属性
  • 关键概念：盒子模型、display、块状盒子、内联盒子、行框、inline-block
  • 关联阶段：cp2
  • 常见误区：给内联元素设置上下 padding/margin 期望生效（内联盒子垂直方向无效）；以为 display:none 与 visibility:hidden 等价（前者从文档流拿走不占空间，后者仍占位只是不显示）

盒子模型 ​

定型-0

万物皆盒子。盒模型是浏览器早期对文档中各元素的一种抽象和简化处理。 就如同TUI将所有的界面元素都视作一个字符。

＊ 盒子的尺寸 = 其内容的大小(字体尺寸或图片的物理尺寸) + 内边距 ＋边框 ＋ 外边距

定型: 内置的盒子类型 ​

早期的浏览器为了方便渲染，对每一种典型的语义元素（可以视作是数据类型），都设置了对应的显示类型，即内置的盒子类型

HTML语义内置的CSS定型
块元素display: block
内联元素display: inline
列表元素display: list-item
表格元素display: table

设计师可以通过设置display属性来改变指定元素的默认盒子类型

inline 内联盒子 ​

  • 和相邻的元素共用一行，横向排列，直至父元素的盒子边缘后，自动换行
  • 不能更改元素的height，width的值，大小由其内容决定
  • 可以使用padding，margin的left和right产生边距效果，但是top和bottom属性是无效的

内联盒子: 行内框 ​

定型-1

  • 行内框是浏览器计算内联元素高度的一个基础概念，但它本身无法像其它盒子一样显示出来(即具有边框)
  • 在没有其他因素（padding）影响的时候，行内框等于内容区域

内联盒子: 行框 ​

定型-2

  • 行框（line box）指一行元素共用的一个虚拟的矩形框
  • 行框高度等于本行内所有元素中行高最大的值
  • 设置行高(line-height)可以增加这个行框的高度。但是，对其垂直内边距、边框和外边距的设置不影响该元素盒子的高度

block 块状盒子 ​

  • 独占一行，自上向下，纵向排列。元素之间的垂直距离是由元素的垂直外边距计算出来。
  • 可以控制宽度(width)、高度(height)、内边距(padding)和外边距(margin)等属性值;

上例中,通过将<a>元素改为 block 盒子,可以令用户点击链接时的可点击的区域扩大.因为块盒子可以设置上下内外边距

list-item 列表盒子 ​

为元素内容生成一个块状盒，随后再生成一个列表型的内联盒。其效果就和ul中出现项目列表符号一样。

table 表格盒子 ​

为元素生成一个类似表格的盒子。可用于实现横向布局、内外边框、文字居中等

在清除浮动一节中，设置伪元素的渲染模式为table,即相当于设置了一个特殊的块状盒子，从而达到类似清除浮动的效果

inline-block 内联块状盒子 ​

设置了inline-block属性的元素既拥有了block元素可以设置width和height的特性，又保持了inline元素不换行的特性。

详细解释可参考

display: none ​

display 还有一个特殊的值:none，表示不进行渲染处理,与另一个属性 visibility 是不同的

  • display：none 相当于将元素从文档流中拿走，仿佛该元素并不存在，不会为其分配空间和设置位置。
  • visibility：hidden 则意味着浏览器仍然处理该元素，为其定位和布局，但是并不显示出来

参考详见

语法参考 ​

深入阅读 ​