css----行内元素&&块状元素_weixin_30486037的博客-程序员宅基地

块级元素(block)特性:

总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

内联元素(inline)特性:

和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变,
元素的大小被文字或者图片撑开,就是里面文字或图片的大小;

内联块状元素(特殊的内联元素)

同时具备 块状元素 和 内联元素的 特性
1.和 其他元素都在同一行显示

2.元素的宽度,高度,内边距,行高都可以改变

img   input  textarea

 

块级元素主要有:

 address , blockquote , center , dir , div , dl , fieldset , form ,
h1 , h2 , h3 , h4 , h5 , h6 , hr ,
isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

 

内联元素主要有:

a , b , em , i , span , strong , img , 
abbr , acronym , bdo , big , br , cite , code , dfn ,
font , input , kbd , label , q , s , samp ,
select , small ,strike , strong , sub , sup ,textarea , tt , u , var

可变元素(根据上下文关系确定该元素是块元素还是内联元素):

applet ,button ,del ,iframe , ins ,map ,object , script

 

CSS中块级、内联元素的应用:

利用CSS我们可以摆脱上面表格里HTML标签归类的限制,自由地在不同标签/元素上应用我们需要的属性。

主要用的CSS样式有以下三个:

display:block  -- 显示为块级元素
display:inline  -- 显示为内联元素
display:inline-block -- 显示为内联块元素,表现为同行显示并可修改宽高内外边距等属性

我们常将<ul>元素加上display:inline-block样式,原本垂直的列表就可以水平显示了。

 块状元素与内联(行内)元素的嵌套规则

 1块状元素可包含内联元素或某些块元素,但内联元素不可包含块元素,只能包含内联元素。

    <div><h1></h1><p></p></div>     正确

    <a href="#"><span></span></a>    正确

    <span><div></div></span>     错误

  2块级元素不能放在<p>里面

    <p><ol><li></li></ol></p>    错误

    <p><div></div></p>  错误

  3、有几个特殊块级元素只能包含内联元素,不能包含块级元素。这几个特殊标签是 h1~h6、p、dt

  4、li 内可包含 div 标签

    <li><div></div></li>

  5、块级元素与块级元素并列、内联元素与内联元素并列

    <div><h2></h2><p></p></div>  正确

    <div><a href="#"></a><span></span></div>  正确

    <div><h2></h2><span></span></div>  错误

 

转载于:https://www.cnblogs.com/SRH151219/p/10408430.html

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_30486037/article/details/99235716

智能推荐

5 Rookie Mistakes to Avoid with Angular 2_HEYLeonL的博客-程序员宅基地

So you've read some blog posts, watched some conference videos, and finally you're ready to get your feet wet with Angular 2.    What are some things you should know starting out?Here's a compil

抽奖实例_八五阿良的博客-程序员宅基地

六万用户量同时进行抽奖活动,奖池金额1000一等奖 100 1名二等级50 3名三等奖20 10名四等奖1-15元五等奖 1分钱&lt;?php //用户抽奖实列 //用户进行抽奖行为 index(); /* * 开始抽奖 * $num 抽奖概率数组编号 *...

Kubernetes基础篇-05-Kubernetes的容器生命周期_Alan0517的博客-程序员宅基地

1. 容器生命周期示意图init C : 翻译,init初始化 C 容器 init C 就是初始化容器;比如我现在想运行一个pod,里面有两个容器,这两个容器要正常运行的前提是某个存储下面有一个文件存在,那么我们可以通过这个init C 去把这个文件生成;记住init C只是用于初始化的,他不会一直跟随pod的生命周期存在,也就是这个init C 在初始化之后就会死亡;init C 如果存在多个时,是顺序执行的,意思就是说下一个init C 要等上一个init C 执行成功之后才会执行,这个一个线

注册,页面上获取到的输入框中------图片验证码上的值,和session里的值不一致的解决方法_我是谁不重要。的博客-程序员宅基地

/**生成图片验证码controller里的方法。 * @throws JSONException */ @RequestMapping(&quot;/verifyCode/ImageCode&quot;) @ResponseBody public JSONObject produceImageCode(HttpSession session...

[IOS]NSUserDefaults读取和写入_weixin_34037173的博客-程序员宅基地

NSUserDefaults可以存取一些短小的信息。比如存入再读出一个字符串到NSUserDefaults:[cpp]view plaincopyNSString*string=[[email protected]"hahaha"];NSUserDefaults*ud=[NSUserDefau...

JAXB工具实现java实体类和xml之间的转换_南北雪树的博客-程序员宅基地

1、应用场景1、在使用WebService实现数据上传下载,数据查询时,可以利用JAXB实现java实体类和xml互相转换2、可以使用jersey框架实现WebService接口(resetful方式)2、Demo2.1 student.java 实体类,包含list(set同理)、map、Teacher、Date 类型的属性package jaxb;

随便推点

如何将语音翻译成中文、语音转文字怎么做_WoChaotian_的博客-程序员宅基地_翻译语音

相信大家都听说过录音转文字助手,知道可以使用这个工具快速完成录音转文字、音频转文字的需求。最近,录音转文字助手又迎来了更新,新增语音翻译功能,可以实现实时对话语音翻译,中英文之间的交流再也不需要担心了。那么新版录音转文字助手,应该如何将语音转文字、语音翻译成中文呢?一起来看看具体操作吧。一、录音转文字新版录音转文字助手,可以实现实时语音转文字、音频文件转文字以及先录音再转文字,可以最大程度...

idea软件使用_yancy92的博客-程序员宅基地

idea无法下载插件,可能是使用了https协议下载导致的问题,亲测有效!

【tool】中国蚁剑(AntSword)下载、安装、使用教程_devil8123665的博客-程序员宅基地_中国蚁剑mac

中国蚁剑是一款开源的跨平台网站管理工具,它主要面向于合法授权的渗透测试安全人员以及进行常规操作的网站管理员。通俗的讲:中国蚁剑是 一 款比菜刀还牛的shell控制端软件。中国蚁剑推崇模块化的开发思想,遵循开源,就要开得漂亮的原则,致力于为不同层次的人群提供最简单易懂、方便直接的代码展示及其修改说明,努力让大家可以一起为这个项目贡献出力所能及的点滴,让这款工具真正能让大家用得顺心、舒适,让它能为大家施展出最人性化最适合你的能力!一、中国蚁剑下载唯一官方github下载地址:https://gi

pycharm提示ModuleNotFoundError: No module named ‘requests‘_快乐学习python的博客-程序员宅基地

学python一段时间了,今天在使用import requests时提示“ModuleNotFoundError: No module named 'requests'”。实际上requests模块已经使用pip安装好,cmd可以查询到requests已安装好。经查询网上资料应该是requests模块,没有安装在PyCharm的虚拟环境venv文件夹中,安装装在系统全局环境里面了。如果要使用该模块需要在新建项目时,勾选红框里面两个选项,就可以正常使用了。在进到设置中的解析器.

【计算机图形学-12】OpenGL程序实例分析5——纹理映射_AndyZzz~的博客-程序员宅基地

这部分将对纹理映射做分析,涉及到一些几何,但不会很难。TriMesh.cpp:#include "TriMesh.h"// 一些基础颜色const vec3 basic_colors[8] = { vec3(1.0, 1.0, 1.0), // White vec3(1.0, 1.0, 0.0), // Yellow vec3(0.0, 1.0, 0.0), // Green vec3(0.0, 1.0, 1.0), // Cyan vec3(1.0, 0.0, 1.0), // .

Flex和Servlet结合上传文件_翱翔天地的博客-程序员宅基地

Flex和Servlet结合上传文件1、准备工作(1)下载文件上传的组件,commons-fileupload-1.3.1.jar(2)下载文件输入输出jar,commons-io-2.4.jar(3)有关servlet的jar包,servlet-api.jar2、正式开发(1)新建一个web项目工程,FlexFileUpload(2)在src新建一个上