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

标签又分为两种:

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

CSS的再深入(更新中···)的更多相关文章

  1. html2canvas - 项目中遇到的那些坑点汇总(更新中...)

    截图模糊    原理就是讲canvas画布的width和height放大两倍. 后来学习canvas的时候,才了解到这种写法不同于css的宽高设置, 因为css里的只是展示画布显示的大小,不像这样是c ...

  2. fastadmin 后台管理框架使用技巧(持续更新中)

    fastadmin 后台管理框架使用技巧(持续更新中) FastAdmin是一款基于ThinkPHP5+Bootstrap的极速后台开发框架,具体介绍,请查看文档,文档地址为:https://doc. ...

  3. 前端面试题总结——HTML(持续更新中)

    前端面试题总结--HTML(持续更新中) 1.什么是HTML? HTML:HyperText Markup Language超文本标记语言 2.XHTML和HTML有什么区别 HTML是一种基本的WE ...

  4. HTML+CSS基础课程-imooc-【更新完毕】

    6-1 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小.颜色.字体加粗等 ...

  5. 【前端面试】Vue面试题总结(持续更新中)

    Vue面试题总结(持续更新中) 题目参考链接 https://blog.csdn.net/weixin_45257157/article/details/106215158 由于已经有很多前辈深造VU ...

  6. CSS系列:在HTML中引入CSS的方法

    HTML与CSS是两个作用不同的语言,它们同时对一个网页产生作用,因此必须将CSS与HTML链接在一起使用.在HTML中,引入CSS的方法主要有4种:行内式.内嵌式.导入式和链接式. 1. 行内式 行 ...

  7. java视频教程 Java自学视频整理(持续更新中...)

    视频教程,马士兵java视频教程,java视频 1.Java基础视频 <张孝祥JAVA视频教程>完整版[RMVB](东西网) 历经5年锤炼(史上最适合初学者入门的Java基础视频)(传智播 ...

  8. Android开发面试经——4.常见Android进阶笔试题(更新中...)

      Android开发(29)  版权声明:本文为寻梦-finddreams原创文章,请关注:http://blog.csdn.net/finddreams 关注finddreams博客:http:/ ...

  9. Cocos2d-x 3.0final手机游戏开发视频教程2014 - 自学编程 -(陆续更新中)

    内容: 非常多人问我:沈老师,要不要更新引擎版本号到3.0,更新这么快,以后会不会每一个月都有一次,好怕呀. 我说:无论你曾经是哪个版本号,3.0final是一个架构级别的升级,能够在新项目中果断升级 ...

  10. 《WCF技术剖析》博文系列汇总[持续更新中]

    原文:<WCF技术剖析>博文系列汇总[持续更新中] 近半年以来,一直忙于我的第一本WCF专著<WCF技术剖析(卷1)>的写作,一直无暇管理自己的Blog.在<WCF技术剖 ...

随机推荐

  1. Css预处理器---Less(一)

    一.简介: Less是一种动态样式语言,可以在样式中使用变量,继承,运算,函数 二.使用 (1)客户端使用 //引入您的.less样式文件,rel属性区别去css为stylesheet/less &l ...

  2. Metasploit渗透技巧:后渗透Meterpreter代理

    Metasploit是一个免费的.可下载的渗透测试框架,通过它可以很容易地获取.开发并对计算机软件漏洞实施攻击测试.它本身附带数百个已知软件漏洞的专业级漏洞攻击测试工具. 当H.D. Moore在20 ...

  3. RAMPS1.4 3D打印控制板:软件下载\连接\安装\测试

    RAMPS1.4 3D打印控制板:软件下载\连接\安装\测试 特别说明: 电源接反,电机驱动板接反将有可能烧毁芯片和电路,请再三确认后再进行通电. 如何使用: 1.需要用到的模块或器件: Arduin ...

  4. php aes128加密

    //[加密数据]AES 128 ECB模式 public function aesEncrypt($str){ $screct_key = Yii::$app->params['encryptK ...

  5. sitecore系列教程之营销人员和技术人员如何策划与消费者的对话以提升体验?

    “每次良好的交谈都要从良好的倾听开始.” - 未知 你是如何听取网站访问者的?你是在倾听还是只是回复? 拥有内容管理系统只是良好网站战略的一个要素.毕竟,内容必须是动态的,及时的和相关的. 当网站访问 ...

  6. C#操作XML方法详解

    using System.Xml; //初始化一个xml实例 XmlDocument xml=new XmlDocument();   //导入指定xml文件 xml.Load(path); xml. ...

  7. CocoaPod 使用(I)

    1. 添加一个 Podfile 文件 在终端先找到你要放入 Podfile 的文件路径: cd 文件路径 cd /Users/XXX/Desktop/RAC 然后敲入: pod init 就会给你建立 ...

  8. 凯撒密码、GDP格式化输出、99乘法表

    1.恺撒密码的编码 s=input('明文:') print('密文:',end='') for i in s: print(chr(ord(i)+3),end='') 附加: print('字符串的 ...

  9. 项目方说性能达到百万TPS,如何测试它的可信度?

    项目方说性能达到百万TPS,如何测试它的可信度? 应用系统性能提升的关键在于运维端的接入管理模型(AAA,认证 Authentication.授权 Authorization.计费 Accountin ...

  10. maven项目启动报错;class path resource [com/ssm/mapping/] cannot be resolved to URL because it does not exist

    项目启动报了一堆错误,其实都是class path resource [com/ssm/mapping/] cannot be resolved to URL because it does not ...