CSS的再深入(更新中··&#…

2018-09-29 03:52:15来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

在上一章我们提到了一个新的概念,叫做块级样式,讲到这里就要科普一下:

标签又分为两种:

(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(字体大小)的大小

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:CSS之inline和inline-block

下一篇:弹性盒布局实例