CSS知识整理

2024-04-09 18:04:53

1. 权重问题(CSS优先级）：

　　继承或 * ：0,0,0,0

　　标签：0,0,0,1

　　每个类，伪类：0,0,1,0

　　每个ID：0,1,0,0

　　每个行内式：1,0,0,0

　　!important：无穷大

　　注意，权重会叠加。例如，div ul li （权重=0,0,0,1 + 0,0,0,1 + 0,0,0,1 = 0,0,0,3）、.nav ul li（权重=0，0,1,0 + 0,0,0,1 + 0,0,0,1 = 0,0,1,2）。注意：数位之间没有进制，比如说0,0,0,5 + 0,0,0,5 = 0,0,0,10 而不是 0,0,1,0

2. 综合设置字体样式

　　选择器 { font: font-style font-weight font-size/line-height font-family;}

　　注意：使用 font 时，必须按照以上的书写顺序书写，可以省略一些属性（取默认值），但是必须保留 font-size 和 font-family属性，否则不起作用。

3. 解决表格边框合并在一起边框粗的问题。

　　设置cellspacing:0; 单元格与单元格之间的距离变为0。虽然边框是1px，但是两个单元格合并在一起就是2px，所以看起来更粗。解决方法：border-collapse: collapse;

4. 标签的显示模式：display

　　块级元素（block）：常用于网页布局和网页结构搭建。每个块级元素都会独自占一整行或多整行，可对其设置宽度、高度、对齐等属性。常见的块元素：<h1>~<h6>、<div></div>、<p></p>、<ul></ul>、<li></li>等。特点：总是从新行开始；高度、行高、外边距以及内边距都可以控制；宽度是默认容器的100%；可以容纳内联元素和其他块级元素。

　　行内元素（inline）：常用于页面中控制文本的样式。行内元素不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性。常见的行内元素：<a></a>、<span></span>、<strong></strong>、<u></u>等。特点：和相邻的行内元素在一行上；高、宽设置无效，但水平方向的 padding 和margin 可以设置，垂直方向无效；默认宽度就是它本身内容的宽度；行内元素只能容纳文本或其他行内元素（<a></a>特殊，里面可以放块级元素）。

　　行内块元素（inline-block）：常见的行内块级元素：<img />、<input />、<td /></td>。既可以放在同一行，也可以设置宽高等。特点：和相邻行内块元素在一行上，但是之间会有空白间隙；默认宽度就是它本身内容的宽度；高度、行高、外边距以及内边距都可以控制。

5. padding

　　注意：若盒子有宽度，padding会撑开盒子。

6. 圆角边框

　　border-radius: 50%; 正方形变成圆形。

　　 border-radius: 1px 1px 1px 1px; 顺时针方向（左上角右上角右下角左下角）

　　 border-radius: 10px 3px; 对角线：左上角、右下角10px;，右上角、左下角3px.

　　border-radius: 20px 10px 30px; 左上角20px，右上角、左下角10px，右下角30px

7. 给文本或盒子添加阴影

　　text-shadow：给文本添加阴影。