CSS的再深入(更新中···)

前端領域人才發表於2018-09-27

在上一章我們提到了一個新的概念,叫做塊級樣式,講到這裡就要科普一下:

標籤又分為兩種:

(1)塊級標籤

元素特徵:會獨佔一行,無論內容多少,可以設定寬高···

(2)內斂標籤(又叫做行內標籤)

元素特徵:根據內容的多少佔用空間大小,它的上下margin不起作用

(塊級:P  h1- h6 div ul ol dl li···)

(內斂:span img i b a em icon···)

有時,我們會使用塊級標籤,有時會使用內斂標籤,但老是改標籤是不是太麻煩了呢?有沒有其它的方法呢?

答案是:有。

塊級和行級(也就是內斂)可以相互轉換

塊級轉行級

給塊級新增屬性:display:inline;

行級轉塊級

給行級新增屬性:display:block;

行級塊元素

給需要的元素新增屬性

display:linline-block;

行級塊元素好處:可以設定寬高,可以在一行,margin可使用

 

知識新增:

line-height 行高,可設定字型的垂直位置

line-height的值和height的值相同,文字就可以上下居中,(水平居中為text-align:center)(text-align 文字居中方式  center居中  left居左  right居右)

line-height:50px/2

當屬性值中有不帶單位的2時,line-height的值為2 x font-size(字型大小)的大小

相關文章