CSS的再深入(更新中···)
程序员文章站
2022-11-14 11:17:55
在上一章我们提到了一个新的概念,叫做块级样式,讲到这里就要科普一下: 标签又分为两种: (1)块级标签 元素特征:会独占一行,无论内容多少,可以设置宽高··· (2)内敛标签(又叫做行内标签) 元素特征:根据内容的多少占用空间大小,它的上下margin不起作用 (块级:P h1- h6 div ul ......
在上一章我们提到了一个新的概念,叫做块级样式,讲到这里就要科普一下:
标签又分为两种:
(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(字体大小)的大小
推荐阅读
-
独特设计!插图和手绘元素在网页设计中的使用_html/css_WEB-ITnose
-
深入解析PHP中的(伪)多线程与多进程_PHP
-
php获取CSS文件中图片地址并下载到本地的方法,
-
浅谈ASP.NET中MVC 4 的JS/CSS打包压缩功能
-
深入C#中get与set的详解
-
html代码中让链接在新窗口中打开的写法_html/css_WEB-ITnose
-
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析_jquery
-
CSS中的伪类与伪元素及二者间的区别说明
-
深入理解JavaScript编程中的原型概念_基础知识
-
深入解析AngularJS框架中$scope的作用与生命周期_AngularJS