阿里前端学习笔记（六）

2014-08-07 by niuzhixiang

一些CSS知识

盒子模型

CSS盒子模型如下图所示：

阿里前端学习笔记（六） - 图1

从图中可以看出，一个盒子有四个部分：内容区域content、内边距padding、边框border、外边距margin。

关于盒子模型的几点注意事项：

  • 一个块级元素的width属性指定了content区域的宽度（仅仅是content区域的宽度，不包括padding、border和margin部分的宽度）。
  • 一个块级元素的background属性覆盖了内容区域content和内边距区域padding。
  • margin和padding的声明顺序是“上、右、下、左”（例如margin:1px 2px 3px 4px），或者“上下、左右”（例如margin:1px 2px），或者“上下左右”（例如margin:1px）。
  • 块级元素的默认宽度：
    • 对于未设定width值的静态/相对定位元素，默认其content+padding+border的总宽度为100%，因此其padding和border会向内收缩，左右不会超出父元素；
    • 对于明确设定width值为100%的的静态/相对定位元素，那么就意味着该元素的content区域宽度为100%，因此padding必须向外延展，从而左右会超出父元素；
    • 对于未设定width值的绝对定位/浮动元素，其宽度默认只需要适合它所包含的内容即可（例如内容是一个单词，那么这个元素的宽度默认就是这个单词的宽度），如果内容增加，宽度会变宽，直到达到父元素的宽度为止（此时width=100%）；
    • 对于设定了width值的绝对定位/浮动元素，与设定了width值的静态/相对定位元素的原理类似。
  • width=100%表示该元素的content区域宽度为父元素content区域宽度的100%。
  • 更多参考资料，参见这里。

CSS的继承体系

所有CSS属性都可以划分为两类——“继承属性”和“非继承属性”。

  • 继承属性：意即此类属性的值会从父元素继承而来——如果一个元素的继承属性没有给定值，则取父元素的属性值；如果是根元素（没有父元素），才会取“初始值”。
  • 非继承属性：意即此类属性的值不会从父元素继承——如果一个元素的非继承属性没有给定值，则直接取该属性的“初始值”。
  • 此外需要注意，可以对CSS属性显式赋值为inherit，使其值从父元素继承；也可以对CSS元素显式赋值为initial，使其值取“初始值”。
  • 更多参考资料，参见这里。

CSS的优先级体系

当一个元素可以匹配多个CSS选择器时，浏览器会使用优先级高的选择器来覆盖优先级低的选择器。以下是优先级从低到高的选择器列表：

  • 从父元素继承而来的样式（没有选择器）
  • 通用选择器*
  • 元素选择器，例如div{}
  • 类选择器，例如.myclass{}
  • 属性选择器，例如input[type="text"]{}
  • 伪类，例如a:hover{}
  • ID选择器，例如#myid{}
  • 内联样式

因此，如果HTML元素和CSS样式如下代码所示：

  1. <style>
  2.     /*优先级最低*/
  3.     *{
  4.         color:red;
  5.     }
  6.     /*优先级高一些*/
  7.     div{
  8.         color:blue;
  9.     }
  10.     /*优先级更高一些*/
  11.     .myclass{
  12.         color:green;
  13.     }
  14.     /*优先级最高*/
  15.     #myid{
  16.         color:white;
  17.     }
  18. </style>
  20. <div class='myclass' id="myid">
  21.     abc
  22. </div>

则最终该div块的颜色应该是白色。

此外，!important规则是例外，不管它在哪种选择器中被使用，都会覆盖CSS中任何其他声明。

auto

当指定一个CSS属性值为auto的时候，表示该属性值由浏览器自动计算得出。有些CSS属性（例如非继承属性width）的默认值是auto。auto值一般可以用于元素居中布局，例如设定margin:auto就可以使上、下、左、右margin值相同，从而使元素居中显示。

overflow

该属性应用于块级元素，它指定超出元素大小的内容该如何显示。其取值有以下几种：

  • visible：初始值，不对超出元素大小的内容进行裁剪，而是直接显示出来。
  • hidden：裁剪超出元素大小的内容，不予显示，并且不显示滚动条。
  • auto：内容超出元素大小后自动显示滚动条。
  • scroll：无论内容是否超出元素大小，始终显示滚动条。使用该值可以避免在内容动态变化的情况下滚动条在显示与隐藏之间不断切换带来的问题。
  • inherit：继承父元素的overflow属性。