绿色记忆 » CSS https://blog.gmem.cc Tue, 21 Apr 2026 10:40:56 +0000 en-US hourly 1 http://wordpress.org/?v=3.9.14 CSS知识集锦 https://blog.gmem.cc/css-faq https://blog.gmem.cc/css-faq#comments Sat, 05 Apr 2008 14:16:40 +0000 http://blog.gmem.cc/?p=870 基本概念 CSS规则中URL相对于当前CSS文件，于引用CSS的网页的URL无关 CSS为每个HTML元素生成一个盒（Box），在其中包含元素的内容 CSS注释语法：[crayon-69ede0abb8cf6686370690-i/]  [crayon-69ede0abb8cfd946800464-i/] 指令，用于引入外部样式表文件 URL格式[crayon-69ede0abb8d00584191894-i/] ，url后面不得有空格 CSS值关键字： [crayon-69ede0abb8d02983397320-i/] 表示不设置此属性 [crayon-69ede0abb8d04522561999-i/] 表示从父元素继承此属性 [crayon-69ede0abb8d07673954779-i/] 从CSS3开始支持，表示恢复为默认值 根元素：文档树顶端的元素，即html元素 正常流：指从左向右，从上到下的显示方式。要使一个元素脱离正常流，可以使之成为浮动元素或者定位元素 非替换元素：元素本身的内容包含在文档中，大部分元素都是非替换元素 替换元素（replaced element）：元素本身仅仅是一个占位符，需要根据其标签、属性的不同来决定显示什么，例如input、img、textarea、select、object 块级元素：类似p、div这样的元素，在正常流中，这类元素的元素框前、后会出现“换行”，兄弟块元素会垂直摆放。设置[crayon-69ede0abb8d09928821257-i/] 可以让任何元素成为块级元素，生成块级框 行内元素：也叫内联元素，类似span、strong，这类元素的元素框前后不会出现“换行”。设置[crayon-69ede0abb8d0b563084293-i/] 可以让任何元素成为行内元素，生成行内框 匿名文本：未包含在任何行内元素中的文本 em框：即字符框，实际的字形可以比em框告或者矮 内容区：行内元素的内容区类似于块元素的内容框。非替换元素的内容区可以是各em框连接在一起构成的区域 行间距（leading）：只适用于非替换元素，line-heiht与font-size的差值，等分为上下两部分，分别称为半间距（half-leading） 行内框：对于非替换元素，行内框等于line-height；对于替换元素，行内框等于内容区高度，因为行间距不应用到替换元素 [...]

The post CSS知识集锦 appeared first on 绿色记忆.

]]>
基本概念
  1. CSS规则中URL相对于当前CSS文件，于引用CSS的网页的URL无关
  2. CSS为每个HTML元素生成一个盒（Box），在其中包含元素的内容
  3. CSS注释语法：
    /* 注释内容，可以多行 */
     
  4. @import
     指令，用于引入外部样式表文件
  5. URL格式
    url(protocol://server/pathname)
     ，url后面不得有空格
  6. CSS值关键字： 
    1. none
       表示不设置此属性
    2. inherit
       表示从父元素继承此属性
    3. initial
       从CSS3开始支持，表示恢复为默认值
  7. 根元素：文档树顶端的元素，即html元素
  8. 正常流：指从左向右，从上到下的显示方式。要使一个元素脱离正常流，可以使之成为浮动元素或者定位元素
  9. 非替换元素：元素本身的内容包含在文档中，大部分元素都是非替换元素
  10. 替换元素（replaced element）：元素本身仅仅是一个占位符，需要根据其标签、属性的不同来决定显示什么，例如input、img、textarea、select、object
  11. 块级元素：类似p、div这样的元素，在正常流中，这类元素的元素框前、后会出现“换行”，兄弟块元素会垂直摆放。设置
    display:block
     可以让任何元素成为块级元素，生成块级框
  12. 行内元素：也叫内联元素，类似span、strong，这类元素的元素框前后不会出现“换行”。设置
    display:inline
     可以让任何元素成为行内元素，生成行内框
  13. 匿名文本：未包含在任何行内元素中的文本
  14. em框：即字符框，实际的字形可以比em框告或者矮
  15. 内容区：行内元素的内容区类似于块元素的内容框。非替换元素的内容区可以是各em框连接在一起构成的区域
  16. 行间距（leading）：只适用于非替换元素，line-heiht与font-size的差值，等分为上下两部分，分别称为半间距（half-leading）
  17. 行内框：对于非替换元素，行内框等于line-height；对于替换元素，行内框等于内容区高度，因为行间距不应用到替换元素
  18. 行框：包含了该行所有行内框的最高最低点的最小框
CSS块布局原理
元素框

CSS假定每个元素都会生成一个或者多个矩形框，称为元素框（element boxes）。元素框的最中央是内容区（content area），向外依次是可选的内边距（paddings）、边框（borders）、外边距（margins）。外边距通常是透明的，可以看到父元素的背景，外边距甚至可以是负数。下图示意了CSS的元素框模型：

css-frame

包含块(Containing Block)

每个元素都相对于它的包含块布局，包含块是元素的布局上下文。

CSS定义了一系列规则，来确定元素的包含块。对于文本来说，其最近的块祖先框、表单元格、行内块祖先框的内容框边界构成它的包含块，例如：

<body>
<!-- div的包含块是body，因此div的布局依赖于body的布局 -->
<div>
    <!-- p的包含块是div，因此p的布局依赖于div的布局 -->
    <p>This is a paragraph.</p>
</div>
</body>
块级元素布局

如何在水平、垂直方向决定块元素的大小和位置，很不相同，这使得块元素的行为有时候显得诡异。

水平方向布局

width指定的是内容区的宽度，而不是整个元素框。后者的宽度还包括内外边距、边框。

水平方向所有兄弟元素的元素框宽度之和，总是等于父元素的内容区宽度（width）。以下面的代码为例：

<div style="background-color: #DFE; border: 2px dotted #BDC;">
    <div style="width: 100px;height:25px;background-color: #FEE; border: 2px dotted #ECC;"></div>
</div>

虽然内部红色的div貌似只有100像素的宽度，实质上它的元素框宽度几乎等于绿色部分，右侧大片空白（绿色）都属于红色div的右外边距（margin-right）：

 

和水平方向布局有关的CSS属性有7个，它们和包含块宽度有如下关系（即使使用负外边距也满足）：

包含块的宽度 = 左外边距宽度 + 左边框宽度 + 左内边距宽度 + width  + 右内边距宽度 + 右边框宽度 + 右外边距宽度

包含块的宽度往往就是父元素的width值。

这7个属性中，wdith、margin-left、margin-right可以设置为auto，其它4个必须是特定的值。当：

  1. 设置某单个值为auto，则auto属性根据其余两个属性自动计算——auto可用于“实际值”与“总和值”的差距
  2. 设置margin-left、margin-right为auto，可以使元素相对于父元素水平居中
  3. 如果三个值都设置为auto（默认值），则margin变为0，宽度尽可能大
  4. 如果三个值都设置为非auto，那么margin-right强制变成auto

注意：父子元素在水平方向的外边距不会合并，因此元素的外边距（内边距、边框）可能导致子元素的偏移

替换元素

块级替换元素的水平布局，与非替换元素（上文）类似，但是有一个附加的规则：如果width设置为auto，则元素的宽度是内容的固有宽度：

<img src="gmem.png" style="width: auto;"/> <!-- 如果图片大小是100像素，那么实际渲染为100像素-->

如果为替换元素设置width，那么其height会成比例的自动变化，除非明确设置。 

垂直方向布局

在垂直方向，一个块级元素的默认高度由其内容决定（相比之下，默认宽度为包含块宽度）。高度还会受到宽度影响，宽度越窄，则高度越高，以便容纳全部内容。

可以对任何块级元素显式设置高度：

  1. 如果高度设置的大于内容固有高度，效果上好像多出额外的下内边距
  2. 如果高度设置的小与内容固有高度，可能导致出现滚动条，或者溢出内容剪切

和垂直方向布局相关的CSS属性也有7个：上外边距高度 、上边框高度、上内边距高度、height、下内边距高度、下边框高度、下外边距高度。其中height、margin-top、margin-bottom可以设置为auto，其它4个必须是特定的值。当：

  1. margin-top、margin-bottom设置为auto，相对于设置为0
  2. 正常块级元素的height设置为auto，且仅有内联子元素，那么元素高度恰好能容纳内联内容
  3. 正常块级元素的height设置为auto，且仅有块级子元素，那么元素的高度是最顶部子元素的上外边界到最底部下外边界的距离
  4. 设置为百分比时，如果包含块的高度没有显式设置，那么设置任何百分比的高度都等价于auto
相邻垂直外边距的合并

垂直方向布局的另外一个特点是相邻外边距的合并（重叠）——前一个元素的下边距、后一个元素的上边距，取其大者作为两者间的边距。例如：

<style>
    li{margin-top:20px;margin-bottom: 20px;border:1px dashed #AED;}
</style>
<ol>
    <li>line1</li>
    <li>line2</li>
    <li>line3</li>
</ol>

你会注意到列表条目之间的距离是20像素，而不是40像素。 

行内元素布局

行内元素的布局没有块元素那么直接——生成一个简单的矩形框。当行内文本较多，形成多行时，各文本行的边框默认相互重叠（上一行的下边框，位于下一行的上边框的下面，这是因为边框画在行外部的一个像素上）。

对于行内元素：

  1. 行内元素的背景默认应用到内容区和内边距
  2. 行内元素的边框包围内容区和内边距
  3. 非替换元素的内外边距、边框不会影响元素行内框的高度，即不会导致line-height变大
  4. 替换元素的外边距、边框会影响行内框的高度，也可能进而影响行框的高度
  5. 各行内框，在行中依据自己的
    vertical-align
     属性，在垂直方向对齐

行的高度由其组成元素、文本节点确定。

line-height
 会显著的影响行内元素的显示，但是它只会影响行内元素和匿名文本，不会直接影响块级元素，为块级元素色和指line-height，只会应用到它内部的inline内容，相当于声明一个最小的行框高度：

<!-- 由于下面的块元素没有任何内容，因此设置line-height为任意值，都不会影响行框的创建 -->
<div style="line-height:48px;border :1px dashed #A33;"></div>
<!-- div的高度为0 -->

注意：块元素中的各行文本都是行内元素。

行框的构造步骤
  1. 按下列步骤确定行内各元素的行内框高度：
    1. 得到非替换元素、匿名文本的font-size和line-height值，求差后等分，应用到内容区上下
    2. 得到各替换元素的height、margin-top、margin-bottom、padding-top、padding-bottom、border-top-height、border-bottom-height，将其加在一起
  2. 对于各内容区，确定其在整行基线的上下方分别超出多少。需要获得各元素、匿名文本的基线位置，然后得到行本书基线的位置，最后对齐之；对于替换元素，将其底部放在整行的基线上
  3. 对于指定了vertical-align的元素，确定其垂直偏移量，即元素的行内框需要上移/下移多远
  4. 此时，每个行内框的大小位置已经确定，行框的高度自然确定
行内非替换元素

如果行中只包含非替换元素或匿名文本，则font-size确定内容区的高度，亦即每个字符的em框高度都等于font-size。假设font-size为14px，而line-height为20px（行内框高度），那么这两者之间的差值6px会被UA等分为两个3px，分别应用到内容区的顶部和底部：inline-el

 

需要注意的是，font-size可能大于line-height，这时行内框的高度比内容区更小，这是合法的。 

行内框大小一致，并不能让文本整齐的排列，因为文本默认是按照基线对齐的：

inline-el-baseline

垂直对齐

修改垂直对齐属性，可能导致行内框的抬高或者降低，进而影响行框的高度。下面的例子示例了垂直对齐不同取值下的效果：

<div style="border:1px dotted #CCC;width: 95%;margin: auto;line-height: 100px;height:100px;font-size:25px;">
    <!-- 行内块元素，设置高度为容器1/2-->
    <span style="background-color: #A55;display: inline-block;height:50px;vertical-align: top">&nbsp;</span>
    <span style="background-color: #A55;display: inline-block;height:50px;vertical-align: middle">&nbsp;</span>
    <span style="background-color: #A55;display: inline-block;height:50px;vertical-align: bottom">&nbsp;</span>
    <span style="background-color: #A55;display: inline-block;height:50px;vertical-align: baseline">&nbsp;</span>
    <!-- 行内元素，行内框与容器高度一致-->
    <span style="background-color: #55A;vertical-align: top">&nbsp;</span>
    <span style="background-color: #55A;vertical-align: middle">&nbsp;</span>
    <span style="background-color: #55A;vertical-align: bottom">&nbsp;</span>
    <span style="background-color: #55A;vertical-align: baseline">&nbsp;</span>
    <!-- 行内元素，行内框与内容区高度一致 -->
    <span style="background-color: #5A5;vertical-align: top;line-height: 25px;">&nbsp;</span>
    <span style="background-color: #5A5;vertical-align: middle;line-height: 25px;">&nbsp;</span>
    <span style="background-color: #5A5;vertical-align: bottom;line-height: 25px;">&nbsp;</span>
    <span style="background-color: #5A5;vertical-align: baseline;line-height: 25px;">&nbsp;</span>
    <!-- 行内元素，行内框与内容区高度一致，数值的垂直偏移-->
    <span style="background-color: #555;vertical-align: 25px;line-height: 25px;">&nbsp;</span>
    <span style="background-color: #555;vertical-align: -25px;line-height: 25px;">&nbsp;</span>
</div> 

vertical-align

关于基线

讨论行内元素的垂直对齐时，往往需要关注基线，默认的，行内元素基于基线对齐。

基线相对于em框的位置，取决于字体，这一信息是内置在字体中的。

行内替换元素

一般认为行内替换元素具有固有的宽高，替换元素可能导致行框变高，但是它不会改变任何元素（包括它自己）的line-height。

行内替换元素的line-height存在的意义是，作为垂直对齐时（例如设置为百分比）的参考值。

默认的，行内替换元素按基线对齐，即它的底端（下外边距的边界）与行基线对齐。

行内块元素（inline-block）

这是CSS2.1新增的，其效果类似于图片放在文本行中，即它是作为替换元素进行布局的。

你可以设置行内块元素的宽高，就好像设置行内替换元素、块元素的宽高一样。

浮动和定位
浮动

使用CSS属性

float
 ，可以实现任何元素的浮动。当一个元素浮动时，其它内容会环绕该元素，浮动元素的外边距不会被合并。如果要浮动一个非替换元素，则必须为该元素声明一个width，否则其宽度趋于0。

float属性可以取值left、right、none，最后一个值表示不浮动（默认值）。

浮动元素的包含块是最近的块级祖先元素。任何浮动元素都会生成一个块级框，不需要声明display:block，即使它是inline元素。

清除

clear
 用于清除元素前后的浮动元素。取值left，则元素左侧不会出现浮动元素；取值right，则元素右侧不会出现浮动元素；取值both，则元素两侧都不会出现浮动元素。

定位

利用定位，可以准确的定义元素框相对于其正常位置/父元素/视窗应该出现在哪里。CSS使用属性

position
 来进行定位，支持以下取值：

position 说明
static 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分；行内元素生成一个或者多个行框，置于其父元素中
relative 元素框偏移某个距离。 元素保持其未定位前的形状，其原本占据的空间仍然保留
absolute 元素框从文档流中完全删除，相对于其包含块定位。包含块可以是文档中另外一个元素或者是初始包含块（即根元素的包含块）。元素原本在文档中占据的空间会关闭，就好像没有这个元素一样。元素定位后总是生成一个块级框
fixed 类似于absolute，只是包含块为视窗本身
如何确定包含块

确定一个定位元素的包含块（定位上下文）的算法较为复杂：

  1. 根元素的包含块由UA建立，在HTML中是html元素。在大部分浏览器中初始包含块是视窗大小的矩形
  2. 对于一个非根元素，如果其position取值relative/static，则其包含块由最近的块级框、表单元格或者行内祖先框的内容边界构成
  3. 对于一个非根元素，如果其position取值absolute，则其包含块取决于最近的position不为static的祖先元素：
    1. 如果此祖先是块级元素，包含块设置为祖先的内边距边界
    2. 如果此祖先是行内元素，包含块设置为祖先的内容边界
    3. 如果没有祖先，则包含块设置为初始包含块
偏移属性

top、right、bottom、left这四个属性成为偏移属性，其中top/bottom说明元素相对于包含块顶边/底边的偏移，left/right则说明元素相对于包含块左边/右边的偏移。

Z轴方向的放置

z-index
 来限定定位元素在Z轴方向的摆放顺序，该值越大，则离读者越近。所有整数都可以作为z-index的值。

字体和单位
字体

在CSS中设置字体类型

font-family
 时，既可以指定具体的字体名称，也可以指定通用字体系列。

通用字体系列
字体系列 说明
Serif 衬线字体，在字的笔划开始及结束的地方有额外的装饰，而且笔划的粗细会因直横的不同而有不同。宋体就是一种衬线字体
衬线字体易读性佳，长时间阅读不易疲劳，适用于大篇幅的正文内容
Sans-serif 无衬线字体，Sans是法语“无”的意思。此类字体缺少额外装饰，且必要粗细大致差不多。黑体就是一种非衬线字体
衬线字体比较醒目，适用于标题、表头等，但不需要长时间盯着阅读
Monospace 等宽字体，所有字符的宽度一致
适用于编程时的代码、字符终端
Cursive 试图模仿人的手写体
Fantasy 无法明确的归类
单位
角度单位
单位 说明
deg 度，一个圆周为360deg
grad 梯度，一个圆周为400grad
rad 弧度，一个圆周为2 * pi rad
长度单位
  单位 说明
绝对长度 in 英寸，只有英美使用的单位
cm 厘米，1in = 2.52cm，1cm = 0.394in
mm 毫米，1cm = 10mm
pt 点，标准印刷度量单位，以往 1in = 72pt
pc 派卡，也是印刷业的度量单位，1pc = 12pt，6pc = 1in
相对长度 em em-height，等于给定元素的font-size值
ex x-height， 所用字体中，小写x的高度
px 像素，对应屏幕上的一个点 
CSS规范建议，如果显示器的ppi（点/英寸）与96ppi差距很大，应当基于90ppi，自动缩放CSS中指定的px值。这样，在那些极高分辨率的显示器上，可以不至于无法看清文字
vw 相对于视窗的宽度，视窗本身宽度为100vw
vh 相对于视窗的高度，视窗本身高度为100vh
vmin
vmax		 相对于视窗的宽度或高度，取决于哪个值更小（vmin）或者更大
IE9中使用vm代替vmin，不支持vmax
动态计算calc

CSS函数

calc()
可以用于动态的计算一个值，可以用在任何需要<length>、<frequency>, <angle>、<time>、<number>、<integer>的地方。calc函数的参数可以是另外一个calc调用。包括IE10+在内的现代浏览器对此函数具有较好的支持。示例：

/* 充满可用宽度 - 80像素 */
width: calc(100% - 80px); 
/* 高度比视窗小80像素 */
height: calc(100vh - 80px);
常用CSS属性
文本属性
属性 说明
text-indent 让第一行的文本向前后缩进一定的距离，例如：
/* 缩进2字符 */
text-indent: 2em;

 注意，即使插入

<br>
 ，后续内容也不会自动获得缩进
text-align 水平对齐，导致块元素中文本对齐方向改变
vertical-align 垂直对齐，只应用于行内元素和替换元素，此属性不得继承：
baseline，默认值，元素的基线与父元素的基线对齐。对于img之类没有基线的元素，其底端与父元素的基线对齐
top，元素行内框与行框顶端对齐
bottom，元素行内框的底端与行框底端对齐
text-top，元素行内框顶端与父元素内容区顶端对齐
text-bottom，元素行内框的底端与父元素内容区底端对齐
middle，将元素行内框垂直中点与父元素基线上0.5ex处对齐
super，显示为上标，将元素的内容区与行内框上移，上移多少由用户代理确定
sub，显示为下标，将元素的内容区与行内框下移，下移多少由用户代理确定
百分比，相对于line-height上移或者下移一段距离
line-height 设置文本行基线（baseline）之间的（最小）距离
line-height - font-size得到的值就是行间距，行间距的1/2分别应用在内容区的顶部、底部，文本默认情况下文本位于行内容区的中部
word-spacing 可以增加单词之间的距离
letter-spacing 可以增加字母之间的距离
text-transform 处理文本大小写
text-decoration 实现下划线、上划线、贯穿线、闪烁等效果
text-shadow 增加文本阴影效果
white-space 设置空白符的处理方式：
normal，合并多个空白符
pre，表现的像一个pre元素
nowrap，忽略换行符
常见问题
CSS3问题
Chrome下transform: translate3d导致透明PNG边缘锯齿（jag）

尝试添加样式：

outline: 1px solid transparent;
其它问题
自适应布局最佳实践
  1. 使用百分比或者视窗相对单位（vw/vh/vmin/vmax）来代替绝对数值
  2. 要想在大分辨率客户端上固定最大宽度，使用max-width
  3. 注意设置替换元素的max-width为100%
  4. 如果背景图片需要覆盖整个容器，使用background-size: cover
  5. 在grid中布局元素时，让grid的列数由视窗宽度决定。使用Flexbox、display:inline-block可以达到这一点
  6. 使用多栏文本时，指定column-width而不是column-count，以便自动在小分辨率UA上显示为单列
!important是什么作用

增加被修饰的样式的权重，权重高的样式规则会最终生效。权重从小到大依次为：

  1. 用户代理的声明（浏览器默认样式）
  2. 用户声明
  3. 开发者声明（引用的CSS文件）
  4. 带有!important的开发者声明
  5. 带有!important的用户声明

另外需要注意亮点：

  1. 更加具体化的选择器比笼统选择器获得更大的权重
  2. 后面出现的规则，具有更大的权重

应当尽可能避免使用!important，因为它使得维护难度增加。

悬停时子元素样式
.parent:hover .child {
} 
禁止选择文本
.noselect {
    cursor: default; 
    -webkit-touch-callout : none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -khtml-user-select: none; /* Konqueror */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
    -webkit-touch-callout: none; /* Non-prefixed version, currently not supported by any browser */
}
cellpadding以及cellspacing的CSS方式

对于cellpadding，可以设置td元素的样式：

td { 
    padding: 10px;
}

对于cellspacing，可以设置table元素的样式：

table { 
    border-spacing: 10px;
    border-collapse: separate;
}

/* 下面的代码相当于设置table元素的cellspacing="0" */
table { 
    border-spacing: 0;
    border-collapse: collapse;
}
子元素相对于父元素绝对定位

将父元素设置为相对定位，子元素设置为绝对定位，则子元素相对于父元素进行绝对定位：

#parentDiv {
    position: relative;
}

#childDiv {
    position: absolute;
    left: 12px;
    top: 12px;
}
居中定位一个元素
/*对于块元素*/
#blockElement {
    margin: 0px auto;
}
/*对于文本元素*/
#textElement {
    text-align: center;
}
让一个块的高度为100%
html,body {
    margin: 0;
    height: 100%;
}

#blockDiv {
    width: 100%;
    height: 100%;
}

The post CSS知识集锦 appeared first on 绿色记忆.

]]> https://blog.gmem.cc/css-faq/feed 0