CSS知识点（二）

css是层叠样式表，它是网页之皮

---

本文主要内容

1. 块级元素和行内元素

2. 常见css属性

• 宽高
• 边框
• 边距
• display
• font
• 文本
• 颜色
• 单位
• 隐藏/透明

---

块级元素和行内元素

块级元素：block-level：

1. 可以包含其他的块级元素和行内元素；
2. 占据了一整行的空间；
3. 可以设置宽高属性；
   常见的有h1~h6 div form table th tr td ul li dl dt dd p等

行内元素：inline-level：

1. 只能包含其他的行内元素和文本；
2. 占据了自身宽度的空间(可以和其他行内元素并排）；
3. 设置宽高无效；
   常见的有 span strong em a img button input label

总结块级元素和行内元素的区别：
1.块级元素可以包含块级元素和行内元素，行内元素只能包含行内元素和文本。

1.png

box1包含了h1,但是用span包含box2却不行；

2.块级元素占据一整行，行内元素只占据自己本身。

2.png

通过背景色大家可以发现，块级元素会占据整行，行内元素只占据本身。

3.块级元素能设置宽高，行内元素设置宽高无效。

3.png

h1和span一样设置了宽高，span不生效。

4.块级元素可以设置上下左右的margin和padding；行内元素可以设置左右的margin和padding，上下margin和padding无效。（但是可以撑开border和背景色却不占用空间）

x.png

s.png

很显然，上面的h1标签的margin和padding都正常，span标签的左右也是生效的。

---

常见css属性

1. 宽高
   语法：width: xxx; height: xxx;
   注意：宽高属性只能用于块级元素，行内元素设置宽高无效。

2. 边框
   语法：border: 边框宽度 边框形状 边框颜色;
   例： border: 1px dotted red;
   例子是1px宽的 点状的 红色的边框
   边框圆角，border-radius 上右下左的顺序可以单独设置。
   注意：这是把四周的边框都画好，也可以单独设置，比如border-top:xxxxxxxxx;
   border-radius如果大于这个盒模型的半径那么画出来的是一个圆形。

3. 边距

   
   
   

   [email protected]
   
   

   一个盒子由margin（外边距）、border（边框）、padding（内编剧）、宽高（width、height）组成。

• margin／padding 可以是数字或者百分比，百分比是对照父元素。有四个方向的值。对应上右下左。padding:10px 10px 10px 10px;
• margin居中 设置左右margin是auto，就可以把该盒模型居中。
  ps: padding和margin的写法，有四个数值-上右下左；有两个数值-读两遍，顺序仍然是上右下左；有三个数值-先读上右下，左边的没写就和右边的一样（读第二个数值）；

4. display
   display属性可以规定元素的类型。display: block; display: inline; 等
   display :

• 常见 block table list-item等是块级元素
• 常见 inline inline-table inline-block等是行内元素

5. font
   对文本字体的设置

• font-size 字体大小
• font-family 字体，最好用审查元素的console里的escape('xx')的方法得到xx的编码写法，用在font-family里。
• font-weight 字体粗细
• line-height 行高
  以上属性均可继承
  简易写法：font: 字体样式 字体粗细 字体大小/行高 字体;
  例：font: italic bold 12px/30px arial;

6. 文本

• text-align: 文本的对齐方式，left/center/right/justify（双对齐，不折行）
• text-indent 文本第一行的缩进
• text-decoration: 文本修饰；none（不修饰）；underline（下划线）；overline（上划线）；line-through（穿过线）
• color 文字颜色
• text-transform 改变文字的大小写，none（不改变）；uppercase（变大写）；lowercase（变小写）；
• word-spacing：改变字（单词）的间距。
• letter-spacing：改变字母之间的间距。

7. 颜色
   颜色有几种写法：

• 单词
• 十六进制表示，用photoshop吸取颜色。
• rgb
• rgbo

8. 单位
   px：固定单位像素
   百分比：相对于父元素大小
   em：相对于父元素字体大小，1em就是父元素字体的100%大小。
   rem：相对于根元素字体大小

9. 隐藏/透明

• opacity opacity: 0; 此时透明度为0；整体彻底的透明。
• visibility: hidden; 和上面的类似。
• display: none; 消失，还不占地方。
• background: rgbo(0,0,0,0.2); 只是背景色透明。