CSS七宗罪

随笔, IT

深入了解选择符优先级、继承和层叠机制。知道盒子模型各组成部分。对各种长度单位了如指掌。

了解CSS3最新特性并亲手尝试。 知道SVG 能读懂JavaScript 了解CSS预处理器

盒子模型

box

  • margin：外边距，用于盒子的定位，是透明的，可以显示父元素（包裹着这个盒子元素的元素）的背景
  • border：边缘，属性包括粗细、样式（直线、虚线、点状线等）、颜色
  • padding：内边距，用于调整内容在盒子中的位置，是透明的。受盒子的背景影响
  • content：元素内容

html将元素分为三类：

  • inline内联元素（行级元素）：不可以设置宽高，可以与其它元素同占一行（a，span）
  • block块元素：可以设置宽高，独占一行（div、ul,li,h*,p)，注意div元素之间是没有行间隙的
  • 内联块元素：可以设置宽高，可以与其他元素同占一行（img）

css属性text-align可以设置文本位置

  • 给块元素设置text-align:center，块元素内的文本和行内元素都居中
  • 给块元素设置width，并设置margin:0 auto; 块元素自身居中

position的属性值

static：静态定位，默认值。没有定位元素出现在正常流中，忽略top，bottom，left，right或者z-index声明

relative：相对定位，相对于它原本的位置来定位，宽度与父元素宽度保持一致。不会影响周围元素的位置。

absolute：

  • 定位前提：父类存在定位元素则以该父类元素位置进行定位
  • 一般采用“子绝（对）父相（对）“ 宽度由文本决定，会影响周围元素的位置

fixed：相对浏览器窗口进行定位

inherit：继承父元素值

Absolution：元素会脱离文档流，定位是相对于离它最近的且不是static定位的父元素而言，若该元素没有设置宽度，则宽度由元素里面的内容决定，且宽度不会影响父元素，定位为absolution后，原来的位置相当于是空的，下面的的元素会来占据。

Relative：元素仍处于文档流中，定位是相对于原本自身的位置，若没有设置宽度，则宽度为父元素的宽度，该元素的大小会影响父元素的大小。

关于几个属性值区别的例子：Absolute（绝对定位）与relative（相对定位）的图文讲解

CSS Id 和 Class

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。

以下的样式规则应用于元素属性 id=“para1”:

class 属性大多数时候用于指向样式表中的类（class）。不过，也可以利用它通过 JavaScript 来改变带有指定 class 的 HTML 元素。

即指定多个class，这是bootstrap常干的事，比如

请问，这两个class之间的关系是什么，二者的优先级是怎样的？

我自己定义了一个class ，加在后面，但没起作用，当然，如果写到style里去是可以的。

你说的没错，就是指定多个class的意思，在HTML的层面上说的话，这样指定的class是同级的。同级的class需要看CSS文件的先后次序，后加载的css会覆盖前面加载的css。写到style的话因为是最后解析的所以是最高的一个优先级。

这么干侧重在于 CSS 的模块化设计。.alert 是基础公共层，.alert-info 是个表现扩展层。 它还有可能有 alert-warning，alert-success 等等，假如我们每个分开写的话，小页面没什么问题，但是它在一个大项目里，就显得很笨拙，增加了开发的时间成本。所以，人们为了提高代码的重用性，把类似的结构或功能等等的部件，划为一个模块。然后把它们的共性提炼出来，也就是这段代码前的 .alert，再分开写它们具体的表现样式，即.alert-info。

css预处理

SourceMap技术