zoukankan      html  css  js  c++  java
  • 块级元素与行内无素的区别

    页面中元素一般分为两种:块级元素,行内元素(内联元素),即然分为两种元素,那么他们之间必然有区别:

    1.块级元素总是独自占一行,前面和后面就好像有个换行符,内联元素总是和其它的内联兄弟占一行

    2.块级元素可以设置宽和高度值,内联元素就不行了,他们的宽和高总是随着自身的内容自动扩大和缩小

    3.块级元素的margin和padding都正常,内联元素左右maring和左右padding正常,上下不正常不识别,也就是说不能通过margin-top和padding-top来改变行高

    关于第3点补充下:

    行内元素margin和padding左右间距在各个浏览器中解析的都完整,上下间距那就是杯具,各个浏览器解析还不一样,设置个背景貌似人家又认了,但 是他周围的元素当他设置的上下间距不存在,所以在以后的项目中,不给行内元素设置上下的margin和padding了

    总结:想让自己独占一行就会块级元素(div,dl,dt,dd,ul,li...),想让元素和其它元素在一行就用行内元素(span,a,img),他们之间可以通过样式来转换disply:block;display:inline;

    还有一个属性:

    display:inline-block;

     将对象呈递为内联元素,与其它的元素同处一行,但是内部又呈现出块级元素,也就是可以设置宽和度,打破了块级元素和内联元素的区别,此属性,IE8,FF3, 其它的标准浏览器都识别,IE6,IE7,FF2不识别此属性,但是在IE6,7下面使用又好像识别了,是因为他触发了IE的haslayout,(类似于zoom:1),所以从表现上来说他们支持这个属性.(可以拿块级元素来试验,块级元素使用了这个属性就没有相应的功能了),FF2{display:moz-inline-box}//有可能会导致文本对齐问题

     如果块状元素(div..)表现这种属性,与外部沟通是内联,内部又是块状的可以这样设置(display:inline;zooom:1)或 div{display:inline-block;//先触发layout}div{display:inline;}这两个顺序不能颠倒了,不然就失 效了

    再补充一下:

    行内元素的行间距:

    <div>

      <a href="#" style="line-height:50px;"> 行内元素行高问题</a>

      <a href="#"> 行内元素行高问题</a>

    </div>

    他们的行高相同,也就是说行内元素的行高会影响其它行内元素的行高

    上次在一个项目中碰到了一个莫名的问题:<input type="checkbox" value="a" name="a" id="a"/><label for="a">哥,你对齐啊</a>

    小方框与文字对不齐,小方框会向下突点,这时候设置input{vertical-align:middle} 能够使他们对齐,这个问题OK了,又有一个问题出现了,浏览器表现不统一,FF和IE8的label标签表现正常,没有间距,IE6和IE7的label标签左右都有一定的间距,在一开始reset为0都不行,还是有间距,开始查原因,原来是浏览器表现不一致,FF和IE8标准浏览器解析的很正常,间距为0,IE7左右有6像素的间距,IE6有4像素的间距,以后为了排版在各个浏览器一致的情况{margin:0 6px;*margin:0;_margin:0 2px}

    margin-left:6px;*margin-left:0px;_margin-left:2x;
  • 相关阅读:
    hdu 5387 Clock (模拟)
    CodeForces 300B Coach (并查集)
    hdu 3342 Legal or Not(拓扑排序)
    hdu 3853 LOOPS(概率DP)
    hdu 3076 ssworld VS DDD(概率dp)
    csu 1120 病毒(LICS 最长公共上升子序列)
    csu 1110 RMQ with Shifts (线段树单点更新)
    poj 1458 Common Subsequence(最大公共子序列)
    poj 2456 Aggressive cows (二分)
    HDU 1869 六度分离(floyd)
  • 原文地址:https://www.cnblogs.com/xiaohui108/p/1893584.html
Copyright © 2011-2022 走看看