您当前的位置：首页 > 计算机 > 编程开发 > Html+Div+Css（前端）

CSS 层叠样式表学习笔记

时间：12-14来源：作者：点击数：

1、CSS 的某些样式是具有继承性的

p{color:red;} <p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

2、特殊性

权值的规则：标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。
p{color:red;} /*权值为1*/ p span{color:green;} /*权值为1+1=2*/ .warning{color:white;} /*权值为10*/ p span.warning{color:purple;} /*权值为1+1+10=12*/ #footer .note p{color:yellow;} /*权值为100+10+1=111*/
还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。

3、层叠：后面的样式会覆盖前面的样式

css 样式优先级：内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。

4、重要性

样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式 < !important

5、CSS 格式化排版

文字排版--字体：注意不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。。
文字排版--删除线： .oldPrice{text-decoration:line-through;}
段落排版--缩进：p{text-indent:2em;}
段落排版--中文字间距、字母间距： letter-spacing ，这个样式使用在英文单词时，是设置字母与字母之间的间距。设置英文单词之间的间距：word-spacing 。
段落排版--对齐：为块状元素中的文本、图片设置居中样式： text-align:center;

6、元素分类

块级元素
- 每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
- 元素的高度、宽度、行高以及顶和底边距都可设置。
- 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
内联元素
- 和其他元素都在一行上；
- 元素的高度、宽度及顶部和底部边距不可设置
- 元素的宽度就是它包含的文字或图片的宽度，不可改变。
内联块状元素
- 和其他元素都在一行上
- 元素的高度、宽度、行高以及顶和底边距都可设置。
- vertical-align 属性会影响到 inline-block 元素，你可能会把它的值设置为 top 。你需要设置每一列的宽度。如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙。

7、css 布局模型

在网页中，元素有三种布局模型：流动模型（Flow）、浮动模型 (Float)、层模型（Layer）。
流动模型：默认的网页布局模式。
- 块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布。实际上，块状元素都会以行的形式占据位置，因为在默认状态下，块状元素的宽度都为100%。
- 在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）
层模型：三种形式，绝对定位(position: absolute)、相对定位(position: relative)、固定定位(position: fixed)
- 绝对定位：将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口
- 相对定位：完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动
- 固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身，由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。
粘性定位：粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。
- #one { position: sticky; top: 10px; }
- 在 viewport 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到 viewport 视口回滚到阈值以下。
- 粘性定位常用于定位字母列表的头部元素。标示 B 部分开始的头部元素在滚动 A 部分时，始终处于 A 的下方。而在开始滚动 B 部分时，B 的头部会固定在屏幕顶部，直到所有 B 的项均完成滚动后，才被 C 的头部替代。
- 须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

8、长度值：px（像素）、em、% 百分比

em：本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。
- p{font-size:12px;text-indent:2em;}
- 上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）。
特殊情况：给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。
- <p>以这个<span>例子</span>为例。</p>
- p{font-size:14px} span{font-size:0.8em;}
- 结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）
百分比
- p{font-size:12px;line-height:130%}
- 设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。

9、水平居中设置

行内元素
- 如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。
定宽块状元素：：块状元素的宽度width为固定值。
- 满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。
- margin-left:auto; margin-right:auto;
不定宽块状元素方式：块状元素的宽度width不固定。
- 方法一：加入 table 标签。利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。（1）为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td>) （2）为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）
- <div> <table> <tbody> <tr><td> <ul> <li>我是第一行文本</li> <li>我是第二行文本</li> <li>我是第三行文本</li> </ul> </td></tr> </tbody> </table> </div>
- 方法二：设置 display: inline ，使用 text-align:center。
- 方法三：通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

10、垂直居中

父元素高度确定的单行文本: 设置父元素的 height 和 line-height 高度一致来实现的。
- 弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。
父元素高度确定的多行文本、图片等
- （方法一）:使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
- css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。
- <body> <table><tbody><tr><td class="wrap"> <div> <p>看我是否可以居中。</p> </div> </td></tr></tbody></table> </body>
- table td{height:500px;background:#ccc}
- 因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。
- （方法二）:在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align:middle 属性，但注意 IE6、7 并不支持这个样式, 兼容性比较差。

11、隐性改变 display 类型

不论之前是什么类型元素，display:none 除外，设置以下 2 个句之一： 1. position : absolute 2. float : left 或 float:right
- 简单来说，只要 html 代码中出现以上两句之一，元素的 display 显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素