css设计指南-笔记3

一.层叠

浏览器层叠各个来源样式的顺序:

  • 浏览器默认样式表
  • 用户样式表
  • 作者链接样式表(按照它们链接到页面的先后顺序)
  • 作者嵌入样式
  • 作者行内样式

计算特指度:ICE公式

  1. 选择符中有一个ID, 就在I的位置加1;
  2. 选择符中有一个类,就在C的位置加1;
  3. 选择符中有一个标签名(元素名),就在E的位置加1;
  4. 得到一个三位数

body p#largetext ul.mylist li	    // 1-1-4特指度=114

查理版简单层叠要点

规则一:包含ID的选择符 > 包含类的选择符 > 包含标签名的选择符
规则二:行内样式 > 嵌入样式 > 链接样式
规则一 > 规则二 (如果选择符特指度更高), 无论在哪里,都会胜出
规则三: 设定的样式胜过继承的样式,此时不考虑特指度

二.盒模型

盒模型简写

{margin: 5px 10px 12px 8px;}	//属性值的顺序:上、右、下、左(顺时针旋转)
{margin: 12px 10px 6px;}		//借用对边的值,即左右都为10px
{margin: 12px 10px;}			//借用对边的值,上下12px,左右10px
{margin: 12px;}					//四个方向都是12px
{margin: 0 0 2px 4px}			//使用0

三种粒度

1.全部3个属性,全部4条边
	{border: 2px dashed red;}
2.1个属性,全部4条边
	{border-style: dashed;}
3.1个属性,1条边
	{border-left-style: dashed;}

混合使用三种粒度

{border: 4px solid red;}	//先给4条边设置相同的样式
{border-left-width: 1px;}	//修改左边框宽度
{border-right: none;}		//移除右边框

盒子宽度

1.没有宽度的元素始终会扩展到填满其父元素的宽度为止。
  添加水平边框、内边距和外边距,会导致内容宽度减少,减少量等于水平边框、内边距和外边距的和。

2.有宽度的元素,如果再添加水平边框、内边距和外边距,会导致盒子扩展得更宽。
  width属性设定只是盒子内容区的宽度。
posted @ 2016-02-18 19:40  u14e  阅读(140)  评论(0编辑  收藏  举报