饥人谷技术博客

CSS知识点（二）

2016-12-09  本文已影响0人  饥人谷_喂鱼de猴子

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

本文主要内容

1. 块级元素和行内元素

2. 常见css属性

块级元素和行内元素

块级元素：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. 边距


    QQ20161209-0@2x.png

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

  1. display
    display属性可以规定元素的类型。display: block; display: inline; 等
    display :
  1. font
    对文本字体的设置
  1. 文本
  1. 颜色
    颜色有几种写法：

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

  2. 隐藏/透明

上一篇下一篇

猜你喜欢

热点阅读