display:block什么时候使用?

  • 编辑时间:2017-08-18
  • 浏览量:
  • 作者:新乡网站建设
    今天在修改网站的时候又对display:block犯了迷糊,光知道是定义块元素的,到底什么时候使用呢,自己从网上整理了一些资料,供大家学习参考。

    1、所有的块级元素不需要再在使用display:block定义,块级元素本身的默认属性就是block
    2、display:block;比较常用于<a><span>这两个标签,因为他们不是块级元素,定义display:block属性后,定义width、height等和长宽相关的css属性才会生效。
    3、之前曾对div设置过display:hidden,则需要重新定义。
 
display介绍
 
 
下面延生一下行内元素和块级元素:
 
    行内元素特点
 
    1、和其他元素都在一行上;
 
    2、元素的高度、宽度、行高及顶部和底部边距不可设置;
 
    3、元素的宽度就是它包含的文字或图片的宽度,不可改变。 
 
块级元素特点
 
    1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)
 
    2、元素的高度、宽度、行高以及顶和底边距都可设置。
 
    3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

    在html中,<span>、<a>、<label>、<input>、 <img>、 <strong> 和<em>就是典型的行内元素(inline)元素。
 
    块级元素是可以设置宽高的,但是它的实际宽高是本身宽高+padding。block元素要单独占一行。内联元素不单独占一行,给他设置宽高是没有用的。
 
    在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将行内元素a转换为块状元素,从页使用a元素具有块状元素特点。
 
    a{display:block;}
-------------------------------------------------------------------------------------------
上一篇:网页中插入javascript的常见的两种方法
下一篇:没有了
-------------------------------------------------------------------------------------------