CSS学习笔记

流、元素与基本尺寸

HTML元素分为两类:块级元素内联元素

CSS盒尺寸

CSS盒尺寸

盒子模型,一共有四种盒子:content-box, padding-box, border-box, margin-box,给定元素的width, height是作用在content-box上的。对于块状元素,如果width:auto,则元素会如水流般充满整个容器,而一旦设定了width具体数值,则元素的流动性就会被阻断,可以参考这个实例

CSS流体布局下的宽度分离原则

所谓“宽度分离元则”,就是CSS中的width属性不与影响宽度的padding/border(有时候包括margin)属性共存,而应该进行分离,width独立占用一层标签,padding、border、margin利用流动性在内部自适应呈现。

box-sizing会改变尺寸作用规则,理论上有下面这些写法:

.box1 { box-sizing: content-box; } /* 默认值 */
.box2 { box-sizing: padding-box; } /* Firefox曾经支持 */
.box3 { box-sizing: border-box; } /* 全线支持 */
.box4 { box-sizing: margin-box; } /* 从未支持 */

替换元素的特性之一就是尺寸由内部元素决定,且无论其display属性值是inline还是block;对于非替换元素,如果其display属性值为block,则会具有流动性,宽度由外部尺寸决定。

对于普通文档流中的元素,百分比高度值要想起作用,其父级必须有一个可以生效的高度值。

绝对定位的宽高百分比计算是相对于padding box的,也就是说会把padding大小值计算在内,但是,非绝对定位元素则是相对于content box计算的。

内联元素

“内联元素”的“内联”特指“外在盒子”,和“display为inline的元素”不是一个概念。“内联元素”的典型特征就是可以和文字在一行显示。

内联盒子模型:

  • 内容区域(content area)
  • 内联盒子(inline box)
  • 行框盒子(line box)
  • 包含盒子(containing box)

在HTML5中存在“幽灵空白结点”,叫做strut

​ Each line box starts with a zero-width inline box with the element’s font and line height properties. We call that imaginary box a “struct”.

盒尺寸四大家族

盒尺寸中的4个盒子content box, padding box, border box和margin box分别对应CSS世界中的content, padding, border和margin属性。

根据“外在盒子”是内联还是块级我们可以把元素分为内联元素和块级元素,而根据是否具有可替换内容,我们也可以把元素分为替换元素和非替换元素。

替换元素特性

  • 内容的外观不受页面上的CSS的影响
  • 有自己的尺寸
  • 在很多CSS属性上有自己的一套表现规则

替换元素的尺寸计算规则

  • 固有尺寸指的是替换内容原本的尺寸
  • HTML尺寸介于固有尺寸和CSS尺寸之间,只能通过原生HTML属性改变
  • CSS尺寸特指可以通过CSS的width和height或者max-width/min-width和max-height/min-height设置尺寸,对应盒尺寸中的content box

替换元素尺寸计算规则

可以使用下面的方式实现透明图片占位:

<img>
img {
    visibility: hidden;
    display: inline-block;
}

img[src] {
    visibility: visible;
}

没有src属性的<img>是非替换元素。

我们无法改变替换元素内容的固有尺寸。

<img>元素中的width和height之所以会改变图片大小,是因为图片中的content替换内容默认的适配方式是填充(fill),在CSS3中,<img>和其他一些替换元素的替换内容的适配方式可以通过object-fit属性修改。

在CSS中,我们把content属性生成的对象称为“匿名替换元素”。

深入理解content

  • content与替换元素

  • content内容生成技术

内联元素与流

块级元素负责结构,内联元素接管内容。

字母x的下边缘(线)就是我们的基线,内联元素默认是基线对齐的。

ex是CSS中的一个相对单位,指的是小写字母x的高度,即x-height

仅包含文字的<div>高度是由line-height属性决定的。

对于非替换元素的纯内联元素,其可视高度完全由line-height决定。

深入line-height的各类属性值

line-height的默认值是normal,还支持数值、百分比值以及长度值。

  • 数值,比如line-height: 1.5,其最终的计算值是和当前font-size相乘后的值。
  • 百分比值,比如line-height: 150%,其最终的计算值是和当前font-size相乘后的值。
  • 长度值,也就是带单位的值,如line-height: 1.5em,此处em是一个相对于font-size的相对单位,因此,最终的计算值也是和当前font-size相乘后的值。

如果使用数值作为line-height的属性值,那么所有的子元素继承的都是这个值;但是,如果使用百分比值或者长度值作为属性值,那么所有的子元素继承的是最终计算的值。

line-height的大值特性。

vertical-align

属性值分为4类:

  • 线类,如baseline、top、middle、bottom;

  • 文本类,如text-top、text-bottom;

  • 上标下标类,如sub、super;

  • 数值百分比类,如20px、2em、20%等。

vertical-align只能应用于内联元素以及display值为table-cell的元素。


css

2086 Words

2019-08-13 15:16