属性优先级、图片属性设置、内联标签设置大小

 <style>
        /*优先级：# 1000 .100 div 10*/
        /*块级标签有长宽，内联标签没有*/
.div1{
    border: 1px solid red;
     width: 800px;/*div的大小*/
    height: 800px;
    background-image: url("123.jpg");
    background-repeat:no-repeat;/*确保只有一张图显示*/
    background-position: center;/*居中*/
}
        span{
            display: inline-block;/*原本span不能设置长宽，但是因为这句话可以设置了*/
            /*inline-block既有内联标签优势能在一行显示又可以设置长宽*/
            height: 18px;
            width: 20px;
            background-image: url("http://dig.chouti.com/images/icon_18_118.png?v=2.13");
            background-position: 0-100px;
        }
    </style>
</head>
<body>
<div class="div1" id="id1">

    </div>
<span></span>/*内联标签*/
</body>
</html>

原文地址：https://www.cnblogs.com/wfl9310/p/9156498.html

时间： 2024-10-13 12:00:41

属性优先级、图片属性设置、内联标签设置大小的相关文章

HTML5进阶段内联标签汇总（小篇）

HTML5进阶段内联标签汇总(小篇) 内联元素,与别人公用一行,但是设置宽高无效.其特点: ①和其他元素都在一行上: ②高,行高及外边距和内边距不可改变: ③宽度就是它的文字或图片的宽度,不可改变 ④内联元素只能容纳文本或者其他内联元素代码如下: 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>

内联标签的特殊之处

一,padding-top与margin-top的默认占位为0: ex: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>border-box</title> <style> body{margin:0;padding:0;} .box { /*border: 30px solid #000;

块级标签(行元素)和内联标签(行内元素)

块级标签如果两个同样的标签写在一起,出现在不同的行上面,这种就是块级标签. 块级标签的特点: 占据整行,自带换行效果.除了div以外,一般块级标签都会有内外边距,宽度和高度. 常见的块级标签: <h1-h6></h1-h6>,<p></p>,<div></div> 块元素标签示例: <!DOCTYPE html> <html lang="en"> <head> <meta

内联标签------------大多数XHTML可以表示为两种类型的标签：块标签（block tag）和内联标签（inline tag）

1 内联标签 2 <em> 强调,大部分浏览器渲染为斜体. 3 <strong> 强调,大部分浏览器渲染为黑体. 4 <sub> 下标 5 <sup> 上标 6 7 内联标签通常用于样式化一行中的文本,并且不会导致换行.常见的内联标签包括<i>斜体.<em>.<strong>和<b>. 8 9 <code> 标示一段代码 <span> 一般内联标签 10 <br> 换行 &l

块级标签与预格式化文本标签----------大多数XHTML可以表示为两种类型的标签：块标签（block tag）和内联标签（inline tag）

1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>块级标签</title> 5 </head> 6 7 <body> 8 9 块级标签 10 就像标题.段落一样,需要在页面上占据一块的位置的标签. 11 <h1> 最大的标题 <h2> - <h6> 大小依次减小的标题 <p> 段落 12 13 <

块级标签&内联标签

标签分为两类: 块级标签: 特点:独占一行如下图,没有加标签的显示在同一行,没有换行,加了<h1>标签的换行了,显示的内容独占了一行内联标签: 特点:按内容占位置原文地址:https://www.cnblogs.com/Mr-chenshuai/p/9961300.html

HTMl中的块标签和内嵌标签（内联标签）

块状标签: address - 地址 blockquote - 块引用center - 举中对齐块dir - 目录列表div - 常用块级容易,也是CSS layout的主要标签dl - 定义列表fieldset - form控制组form - 交互表单h1 - 大标题h2 - 副标题h3 - 3级标题h4 - 4级标题h5 - 5级标题h6 - 6级标题hr - 水平分隔线isindex - input promptmenu - 菜单列表noframes - frames可选内容,(对于不支持

给内联元素设置宽高的几种方式

内联元素默认不能设宽高,其宽高由其内容自动撑开让内联元素具有宽高属性的几种方式 1,给内联元素转换成块级元素或内联块级元素 block或inline-block 2,让内联元素脱离文档流,比如绝对定位.固定定位或浮动 span{ width:3rem; height:100%; float:left; }

内联标签和块级标签

display:inline; 内联元素,简单来说就是在同一行显示.display:block; 块级元素,简单来说就是就是有换行,会换到第二行.display:inline-block; 就是在同一行内的块级元素. 文章摘自:http://blog.csdn.net/cicada_slough/article/details/43305215 说概念太模糊,来个真实案例吧. <a href="#" >链接一</a><a href="#"