码迷,mamicode.com
首页 > 其他好文 > 详细

行级元素和块级元素的转换

时间:2016-07-21 00:29:01      阅读:1425      评论:0      收藏:0      [点我收藏+]

标签:

1.行内标签转换成块级标签的方法

<span style="height:30px;width:550px;display:block">span1</span>

2.块级标签转换成行内标签的方法

 <div style="height:30px;width:550px;display:inline">div1</div>

初始的情况:

 

<span style="height:30px;width:550px;background-color:#ccc;display:inline">span1</span>
    <span style="height:30px;width:550px;background-color:#ccc;display:inline">span2</span>
    <div style="height:30px;width:550px;background-color:#ccc;display:block">div1</div>
    <div style="height:30px;width:550px;background-color:#ccc;display:block">div2</div>

 

技术分享

改变后:

    <span style="height:30px;width:550px;background-color:#ccc;display:block">span1</span>
    <span style="height:30px;width:550px;background-color:#ccc;display:block">span2</span>
    <div style="height:30px;width:550px;background-color:#ccc;display:inline">div1</div>
    <div style="height:30px;width:550px;background-color:#ccc;display:inline">div2</div>

技术分享

2.行内标签设置宽和高不起作用的,它的宽和高是由其中的内容决定的。

所以如果要设置行内标签的高度则需转换成块级元素

行内标签有,span,strong,img,a

/* 如果设置a标签的高度则需转换成块级元素 */
        #menu ul li a{
            text-decoration: none;
            display: block;
            /* height:30px;
            line-height: 30px; */
            padding:10px;
            background-color: #f6f5ec;
            border-left: 5px solid #999;
        }
        #menu ul li a:hover{
            background-color: #d9d6c3;
        }

 此外a标签有伪类,伪类的作用就是让其有很多状态

3..设置padding和margin的技巧

 border:1px solid #ccc;这是一个技巧,可以用来判断内边距padding和外边距margin 

技术分享

技术分享

#menu ul{
            list-style: none;
            /* border:1px solid #ccc;这是一个技巧,可以用来判断内边距padding和外边距margin */
            margin:0;
            padding: 0;
        }

 

行级元素和块级元素的转换

标签:

原文地址:http://www.cnblogs.com/GumpYan/p/5690100.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!