《精通CSS》读书笔记1

发表于 | 分类于 ，

第2章 为样式找到应用目标

2.1 层叠和特殊性

  • 层叠采用以下重要度次序：
  1. 标有！important的用户样式
  2. 标有！important的作者样式
  3. 作者样式
  4. 用户样式
  5. 浏览器/用户代理应用的样式
  • 选择器的特殊性分为4个登记：a、b、c、d
  1. 如果是行内样式，a=1
  2. b是ID选择器的总数
  3. c等于类、伪类和属性选择器的数量
  4. d等于类型选择器和伪元素选择器的数量
  • 伪元素和伪类的区别

伪类用于向某些选择器添加特殊的效果。

伪元素用于将特殊的效果添加到某些选择器。

总结：伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。

链接： https://segmentfault.com/a/1190000000484493

第3章 可视化格式模型

3.1外边距叠加

  • 只有普通文档流中的块框的垂直外边距才会发生外边距叠加。
  • 行内框、浮动框或绝对定位框之间的外边距不会叠加。

行内框和行框：

链接：http://www.cnblogs.com/rainman/archive/2011/08/05/2128068.html

元素对行高的影响

  • 对于行内元素如em、strong、span和等，其padding、margin、border-top、border-bottom 不会增加行高。
    padding会覆盖；margin-top和margin-bottom将重置为0
    padding、border、margin-left、margin-right可用。
  • img元素会影响行高
  • 设置行内元素的padding、border和margin并不会撑大外层元素的高度

3.2 浮动

  • 浮动元素脱离文档流，无法包裹
1
2
3
<div class="news">
  <p>Some text</p>
</div>
1
2
3
4
5
6
7
.news{
  background-color:gray;
  border:solid 1px black;
}
.news p{
  float:right;
}

脱离文档

  • 方案1：添加一个有clear的空元素
1
2
3
4
<div class="news">
  <p>Some text</p>
  <br class="clear">
</div>
1
2
3
4
5
6
7
8
9
10
.news{
  background-color:gray;
  border:solid 1px black;
}
.news p{
  float:right;
}
.clear{
  clear:both;
}

添加clear元素

  • 方案2：将div容器浮动

    若没有设置长度，这样的方式，会让父元素的长度改变，和其他方案的效果不同。

1
2
3
<div class="news">
  <p>Some text</p>
</div>
1
2
3
4
5
6
7
8
.news{
  background-color:gray;
  border:solid 1px black;
  float:left;
}
.news p{
  float:right;
}

父元素浮动

  • 方案3：overflow元素
1
2
3
4
5
6
7
8
.news{
  background-color:gray;
  border:solid 1px black;
  overflow:hidden;
}
.news p{
  float:right;
}

​ 效果同方案2

  • 方案4：使用after伪类
1
2
3
<div class="news clear">
  <p>Some text</p>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.news{
  background-color:gray;
  border:solid 1px black;
}
.news p{
  float:right;
}
.clear:after{
  content:'.';
  height:0;
  visibility:hidden;
  display:block;
  clear:both;
}

​ 效果同方案2