清淨

常用

浮动

使用 float 时，该元素（或其父元素）必须有 width 属性。

title 属性

每个 HTML 标签都有此属性，当鼠标移动到标签上时，就会显示 title 设置的文本。

样式的继承

在 CSS 中，祖先元素的样式可以被其后代元素继承。

<p>
  p标签的文字
  <span>p标签里面的span</span>
</p>
<span>p标签外面的span</span>

p {
  font-size: 20px;
}

所以，我们可以利用继承，将一些基本的样式设置给其祖先元素。但是，并不是所有的样式都会被继承（比如与背景、边框、定位相关的样式等）。

提示

有关继承的更多信息，请见 w3cschoolopen in new window。

选择器的优先级

  1. !important 的优先级最高
  2. 内联样式（即直接使用 style 属性）的优先级最高，权重为 1000
  3. id 选择器的权重为 100
  4. 类（即 class）、属性选择器和伪类的权重为 10
  5. 标签选择器的权重为 1
  6. *、子选择器（>）和相邻同胞选择器（+）的权重为 0
  7. 继承的样式没有优先级（即最低）

上面提到的前两点需要谨慎使用。

同时存在多个选择器时，需要将其相加，然后再比较。但是，选择器的权重相加时不会超过其最大的数量级（如 1000 个伪类相加，最后还是比一个 id 的权重小）。即无论多少个 class 组成的选择器，都没有一个 ID 选择器权重高。类似的，无论多少个元素组成的选择器，都没有一个 class 选择器权重高；无论多少个 ID 组成的选择器，都没有行内样式权重高。如果优先级相同，则后面的会覆盖前面的。

提示

CSS 的权重是 256 进制！

长度单位

  • px

    1 个 px 就相当于屏幕中的一个小点，我们的屏幕实际就是由这些小点构成的。1 px 在不同显示器上的效果可能不同，分辨率越高，则 1 px 表示的像素越小。

  • %

    根据其父元素的宽高来设置样式。

  • em

    它是根据当前元素（支持继承来的字体大小）的字体大小来计算的，1em = 1font-size，设置字体相关的样式时，会经常使用 em。大部分浏览器默认字体大小为 16px。

  • rem

    rem 和 em 类似，也是相对单位。rem 的参照物是根元素 HTML 标签的 font-size，因此，如果改变 <html> 标签的font-size 值，那么所有使用的 rem 单位大小都会随着改变，适用于移动端。（不支持 IE8 以下）

  • v 系单位

    v 系单位常用于移动端，是基于浏览器用来显示内容的区域大小，也就是视窗大小来就算的。具体分为 4 个：

    • vw: 基于视窗的宽度计算，1vw 等于视窗宽度的百分之一
    • vh: 基于视窗的高度计算，1vh 等于视窗高度的百分之一
    • vmin: 基于 vw 和 vh 中最小值来计算，1vmin 等于最小值的百分之一
    • vmax: 基于 vw 和 vh 中最大值来计算，1vmax 等于最大值的百分之一

  • 单位运算

    CSS 中可以使用 calc() 来通过计算确定一个属性的值。例如：

    width: calc( 100% - 80px );

    注意

    calc() 中运算符前后必须要有空格，否则无效。

颜色

  • 十六进制

    当它为 8 位时，最后两位表示不透明度。当它为 6 位时，前两位表示红色，后面依次表示绿色和蓝色。

  • rgba

    其中的 a 表示不透明度，取值为 [0，1]，1 表示不透明，0 表示完全透明。

  • hsl

    依次为色相（[0, 360]）、饱和度（[0%, 100%]）、亮度（[0%, 100%]）。

    body {
  background: hsl(166, 30%, 60%);
}

    提示

    同理也有 hsla，但是一般不使用这种方式来设置颜色。

常用颜色

色值描述
#FF6600小米黄
#F1393A小米红
#83C44E小米绿
#FF0000京东红 1
#E1251B京东红 2
#EE2222京东红 3
#C81623京东红 4
#E2231A京东红 5
#FF4400淘宝黄 1
#FF5000淘宝黄 2
#FF6F06淘宝黄 3
#FF4001淘宝黄 4
#FF5B20淘宝黄 5
#FF4700淘宝黄 6
#F22E00淘宝黄 7
#6C6C6C灰色 1
#F5F5F5灰色 2
#E7E7E7灰色 3
#F3F5F7灰色 4
#33BB44绿色 1
#76C61D绿色 2
#4CAF50绿色 3
#8AC007绿色 4
#5CB85C绿色 5
#42B983绿色 6
#3EAF7C绿色 7
#008CBA蓝色 1
#5BC0DE蓝色 2
#337AB7蓝色 3
#7C61DD紫色 1
#CDBFE3紫色 2
#6F5499紫色 3
#F44336红色 1
#b20b13红色 2
#E9686B红色 3
#CE4844红色 4
#C7254E红色 5
#F9F2F4红色 6
#D9534F红色 7
#CC0000红色 8
#990000红色 9
#FFE6E6红色 10
#555555黑色 1
#F05D4E黄色 1
#E7C000黄色 2
#B29400黄色 3

小技巧

浏览器中查看 hover 样式：Ctrl + Shift + C

文本样式

属性描述取值
text-transform控制文本的大小写。none：默认。定义带有小写字母和大写字母的标准的文本。
capitalize：文本中的每个单词以大写字母开头。
uppercase：定义仅有大写字母。
lowercase：定义无大写字母，仅有小写字母。
inherit：规定应该从父元素继承 text-transform 属性的值。
text-decoration规定添加到文本的装饰效果。none：默认。定义标准的文本。
underline：定义文本下的一条线。
overline：定义文本上的一条线。
line-through： 定义穿过文本下的一条线。
blink：定义闪烁的文本。
inherit：规定应该从父元素继承 text-decoration 属性的值。
letter-spacing设置字符间距。normal：默认。规定字符间没有额外的空间。
length： 定义字符间的固定空间（允许使用负值）。
inherit：规定应该从父元素继承 letter-spacing 属性的值。
text-indent规定文本块首行的缩进。建议使用 em 为单位

  • 文字省略效果

    <p style="width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">网易有道词典最好用的翻译词典. 专业权威，海量例句，收录最新词汇</p>

提示

更多信息请见 MDNopen in new window。

盒子模型

参考

w3cschoolopen in new window

margin 塌陷

<div style="border: 1px solid #000; margin-top: 50px; width: 20px;height: 20px;">

</div>
<div class="d1" style="background-color: #ff6600; margin-bottom: 50px; width: 60px;height: 60px;">
  <div class="d2" style="background-color: #ee2222; margin-top: 50px; width: 20px;height: 20px;"></div>
</div>

上面的代码会给 class="d1" 的增加 margin-top: 50px;，因为它和它里面的子元素是挨着的。如果不想这样，那么请将它和它的子元素之间留点间隙（如给他们添加边框、填充其它内容、给父元素设置 padding 等）。当然，也可以给父元素设置 display:table。也能通过伪元素来实现：

.d1::before {
  content: "";
  /*只能是table*/
  display: table;
}

推荐使用伪元素的方式，该方式也能用来清理浮动，一举两得！

提示

垂直方向的 margin 也有高度塌陷问题。如果相邻的两个元素的 margin 都是正值，则取最大的；如果一正一负，则取两者的和；两个都是负数时，取绝对值较大的。

浏览器的默认样式

  • body

    自带 padding 和 margin。

  • p

    自带 margin。

  • ul 等列表

    自带 padding 和 margin。

行内元素的样式问题

  1. 行内元素默认不能设置宽高
  2. 行内元素可以设置水平的 padding
  3. 行内元素可以设置垂直的 padding，但是它不会对页面的布局产生影响
  4. 行内元素可以设置边框，但是垂直方向的边框不会影响布局
  5. 行内元素可以设置水平方向的 margin，但是不能设置垂直方向的 margin

但是，可以将行内变成块元素或行内块元素来设置这些属性。

display

规定元素应该生成的框的类型，参考 w3cschoolopen in new window。

  • inline-block

    将元素变为行级块元素，但是这样会使元素具有文本的某些特征。因此，会导致元素见出现间隙。解决方式如下：

    • 方式一

      给父元素设置 font-size: 0px。

    • 方式二

      去掉标签见的空格和回车（不推荐此方式）。

      <ul id="imglist">
  <li>1</li
  ><li>1</li
  ><li>1</li
  ><li>1</li
  ><li>1</li>
</ul>

    • 方式三

      设置 margin 为负值来进行调整（不推荐）。

    • 方式四

      使用 float 来代替。

visibility

规定元素是否可见。

值描述
visible默认，元素是可见的。
hidden元素是不可见的。
collapse当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。
inherit规定应该从父元素继承 visibility 属性的值。

注意

即使不可见的元素也会占据页面上的空，请使用 display 属性来创建不占据页面空间的不可见元素。

文档流

文档流处在网页的最底层，它表示的是页面中的一个位置，我们所创建的元素默认都是处在文档流中。元素在文档流中的特点如下：

  • 块元素

    独占一行，自上而下排列。默认宽度是父元素的 100%，默认高度是由内容撑开。

  • 行内元素

    只占自身的大小，从左到右排列，宽高由内容撑开。

给块元素设置浮动或定位后，它会脱离文档流，且脱离文档流后，它的宽高由内容撑开（变成 inline-block 或 block）。

z-index

设置元素的层级（z 轴方向），它的值可正可负。值越大，层级越高。必须配合 position 属性使用。父元素的层级再高也不会覆盖其子元素。

opacity

设置元素的透明度，取值范围 [0, 1]。0 表示完全透明，1 表示不透明。若为元素设置了 opacity 属性，则该标签中的所有内容都有透明效果。IE8 不支持 opacity，请使用 filter 代替, 该属性需要一个 [0, 100] 的值。

.ele {
  filter: alpha(opacity=50);
}

轮廓（outline）

它与边框类似，但是又有不同。它不会改变元素的可见大小，不会影响页面的布局。

阴影（box-shadow）

box-shadow 属性用于在元素的框架上添加阴影效果，该属性可设置的值包括 X 轴偏移、Y 轴偏移、阴影模糊半径、阴影扩散半径和阴影颜色，并以多个逗号分隔。

box-shadow 以由逗号分隔的列表来描述一个或多个阴影效果，该属性可以让几乎所有元素的边框产生阴影。如果元素同时设置了 border-radius，那么阴影也会有圆角效果。

提示

更多请见 MDNopen in new window。

[ 纸上得来终觉浅绝知此事要躬行 ]
Copyright © 2021-present Junfeng Dai
蜀ICP备2021009537号