<form id="htvdb"></form>

            <form id="htvdb"><nobr id="htvdb"></nobr></form>

              <address id="htvdb"></address>

              <form id="htvdb"><form id="htvdb"><nobr id="htvdb"></nobr></form></form>
              <form id="htvdb"></form>


                    前端开发行内元素与块级元素

                    分享 :
                    标签: HTML/CSS

                    前端开发行内元素与块状元素

                    以图例来表述行内元素和块级元素的区别会更加直观:

                    // 我是行内元素span标签 // //我是行内元素strong标签//

                    注:行内元素会再一条直线上,是在同一行的。

                    //我是块级元素div标签// //我是块级元素P标签//

                    注:块级元素各占一行。是垂直方向的!

                    如果你要将行内元素变成块级元素,那么就只需要在该标签上加上样式 display:block; 块级元素可以用样式控制其高、宽的值。

                    行内元素不可以控制宽和高,除非你想将它转变成为块级元素。它的宽和高,是随标签里的内容而变化。

                    常见的块状元素

                    • address-----地址
                    • blockquote-----块引用
                    • center----- 举中对齐块
                    • dir-----目录列表
                    • div-----常用块级容易,也是CSS layout的主要标签
                    • dl-----定义列表
                    • fieldset-----orm控制组
                    • form-----交互表单
                    • h-----标题
                    • hr-----水平分隔线
                    • isindex-----input prompt
                    • menu-----菜单列表
                    • noframes-----frames可选内容,(对于不支持frame的浏览器显示此区块内容
                    • noscript-----可选脚本内容(对于不支持script的浏览器显示此内容)
                    • ol-----有序表单
                    • p-----段落
                    • pre-----格式化文本
                    • table-----表格
                    • ul-----无序列表

                    常见的行内元素

                    • a----- 锚点
                    • abb-----缩写
                    • acronym-----首字
                    • b-----粗体(不推荐)
                    • bdo-----bidi override
                    • big-----大字体
                    • br-----行
                    • cite-----引用
                    • code-----算机代码(在引用源码的时候需要)
                    • dfn-----定义字段
                    • em-----强调
                      • font-----字体设定(不推荐)
                    • i-----斜体
                    • img-----图片
                    • input-----输入框
                    • kbd-----定义键盘文本
                    • label-----表格标签
                    • q-----短引用
                    • s-----中划线(不推荐)
                    • samp-----定义范例计算机代码
                    • select-----项目选择
                    • small-----小字体文本
                    • span-----常用内联容器,定义文本内区块
                    • strike-----中划线
                    • strong-----粗体强调
                    • sub-----下标
                    • sup-----上标
                    • textarea-----多行文本输入框
                    • tt-----电传文本
                    • u-----下划线

                    行内元素与块级元素有什么不同?

                    区别一:

                    块级:块级元素会独占一行,默认情况下宽度自动填满其父元素宽度 行内:行内元素不会独占一行,相邻的行内元素会排在同一行。其宽度随内容的变化而变化。

                    区别二:

                    块级:块级元素可以设置宽高 行内:行内元素不可以设置宽高

                    区别三: >块级:块级元素可以设置margin,padding >行内:行内元素水平方向的margin-left; margin-right; padding-left; padding-right;可以生效。但是竖直方向的margin-bottom; margin-top; padding-top; padding-bottom;却不能生效。

                    区别四: >块级:display:block; >行内:display:inline; >可以通过修改display属性来切换块级元素和行内元素

                    文章分类

                    北京赛车玩法和赔率|官网_首页