浏览器&前端

css中的内联和块级元素

字号+ 作者:zhuawa 来源:未知 2016-04-15 17:24 我要评论( )

今天帮同事做了个页面布局,用到了一个diplay属性,下面的例子可以将这个inline,block,inline-block 基本区分清楚

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>

</style>
</head>

<body>
<div style="width:99%;">
    <div style="width:100%; height:70px; text-align:center">
    <!--
    如果设置display:block,width属性生效,但是此时的span跟div一样了。
    如果设置display:inline-block,则span并列在同行,而且width属性生效。
    另外如果
    --->
            <img style="display:inline-block; width:180px; height:70px; float:left" src='alibaba.jpg'/>
            <span style="display:inline-block; width:33%; float:left; font-size:30px; text-align:center"><strong>费用报销</strong> </span>
             <img style="display:inline-block; width:150px; height:50px; float:left" src='jBarCOde.jpg'/>
</div>
    <div style="width:99%; height:20px;"><span>报销概要</span>
   </div>
    <!--模板-->
    <div style="width:99%; height:auto; float:left">
        <div style="width:32%; float:left;">
            <!--span当做块级元素来使用 width height 生效-->
            <span style=" display:block; width:38%;float:left; text-align:right">申请人:</span>    
            <span style=" display:block; width:61%; float:left">101010 XXX</span>
        </div>
        <div style="width:35%; float:left;">
            <span style=" display:block; width:38%;float:left; text-align:right">申请人:</span>
            <span style=" display:block; width:61%; float:left">101010 XXX</span>
        </div>
        <div style="width:33%; float:left;">
        <!--也可以这样,行内块级:不换行,但宽度和高度有效;但不换行-->
            <span style=" display:inline-block; width:38%;text-align:right">申请人:</span>
            <span style=" display:inline-block; width:60%;text-align:right">101010 周周</span>
        </div>
    </div>
    <!--模板-->
    <div>
    </div>
</div>
</body>
</html>

<!--
块元素(block element)
address - 地址
blockquote - 块引用
center - 举中对齐块
dir - 目录列表
div - 常用块级容易,也是css layout的主要标签
dl - 定义列表
fieldset - form控制组
form - 交互表单
h1 - 大标题
h2 - 副标题
h3 - 3级标题
h4 - 4级标题
h5 - 5级标题
h6 - 6级标题
hr - 水平分隔线
isindex - input prompt
menu - 菜单列表
noframes - frames可选内容(对于不支持frame的浏览器显示此区块内容)
noscript - 可选脚本内容(对于不支持script的浏览器显示此内容)
ol - 排序列表
p - 段落
pre - 格式化文本
table - 表格
ul - 非排序列表
内联元素(inline element)

a - 锚点
abbr - 缩写
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 - 下划线
var - 定义变量

-->

转载请注明出处。

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • css如何把一个字给拉长或者拉宽

    css如何把一个字给拉长或者拉宽

    2017-03-08 17:29

网友点评
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)