块元素并行的问题

 

       块元素(block):

              1.默认独占一行

              2.没有给宽度的时候，宽度是auto,(宽度是父级的宽度)

              3.支持所有的css命令

                div,h1-h6,p,ul,li,ol,dl,dt,dd,header,nav,footer,section,article,aside

 

     行内元素(inline)也叫内联，内嵌元素:

               1.内容撑开宽高

                   宽高值都是auto，显示出来的宽高是内容撑开的

               2.不支持宽高设置

               3.不支持上下的margin与上下padding（显示的距离不是正确的）

                  支持左右

               4.所有的行内元素都会在一行显示

               5.代码换行会被解析成一个空格（一个空格的大小是字体的一般，例如：宋体是16px,则空格是8px）

                a,span,strong,em,mark,img,time

             

  1.如何使两个块元素在同一行显示？             

  因为div是块元素，默认是独占一行的。因此要两个div块并行的话可以使用 float 或则display

       行内元素与块元素的互换display（能不用就不要用）

             (1) 块元素转行内元素   display:inline;

                ​ 转换后块元素就具有了行内元素的特征。

 

          （2）行内元素转换块元素display:block;

                转换后行内元素就具有块元素的特征

            

           （3）使元素同时具块元素和行内元素特征  display:inline-block;

                 1.行内元素支持宽高

                 2.块元素可以在同行中显示

                 3.不给宽高的话，宽度会由内容撑开

                 4.编辑器换行会被解析成一个空格

                 5.IE6、7不支持块元素的inline-block

                     IE6、7不认识inline-block，给行内元素加上这个属性后会触发IE的haslayout特点，

                     使得可以显示行内元素inline-block,但是不能显示块元素的inline-block        

   <style>

        #div{display:inline-block}

        #div{display:inline-block}   

  </style>  

   .

   .

   .

    <div id="box1">1</div>

   <div  id="box2">2</div>

     

 这里因为两个都是块元素，所以需要两个display

 

    <style>

           #box1{display:inline-block}

   </style>

     .

     .

     .

     <div id="box1"></div>

     <a href=“#”> aa</a>

 

 这里因为一个是块元素，另一个是行内元素，所以只需要在快元素加display

   

 

1. <div>  
2.     <div style="display:inline-block"></div>  
3.     <div style="display:inline-block"></div>  
4.     <div style="display:inline-block"></div>  
5.     <div style="display:inline-block"></div>  
6. </div>  

 

情景代码如上。
出问题的浏览器：
360，sogou，猎豹的极速模式
给DIV设置display：inline-block属性后，这四个DIV会拍在一排，但是会个别的高一点，不对齐。
解决方法：
给div设置vertical-align：top

 

 

[html]  view plain  copy

 

 

1. <div>  
2.     <div style="display:inline-block;vertical-align：top"></div>  
3.     <div style="display:inline-block;vertical-align：top"></div>  
4.     <div style="display:inline-block;vertical-align：top"></div>  
5.     <div style="display:inline-block;vertical-align：top"></div>  
6. </div>  
   
   来源： http://blog.csdn.net/forevercjl/article/details/16870441

 

    当两个快元素并列到同一行了，但是排位高低需要精准的值时候，

    先用vertical-align:xx;使其中一个的值为零，然后用margin来确定。

 

 

 

 

 

 

 2、并列的东西之间为什么会有间隙？

        在margin和padding都为0的情况下。

 

        那是因为在编辑器换行了。display会解析，把编辑器的换行解析成为一个空格。

  例如：

 （1）      h2{

               display:inline-block;

           } 

            <h2>aaaaa</h2><a>bbbb</a>  

                   

aaaaa

bbbb

---

 （2）      h2{

               display:inline-block;

           } 

             <h2>aaaaa</h2>

           <a>bbbb</a>  

                   

       aaaaa 

bbbb   

 

   

（3）如果这两个块元素还有一个父级， 当两个快元素的宽加起来>父级的宽，也是不能在同一行显示的。

        但是当两个块元素加起来刚好等于父级也不能在同一行显示，因为在编辑器写时两个子标签已经折行，

        除非是将两个子标签写在同一行。

        或者

        给父级样式加上一个font-size:0px; (但是子标签的文字需要有自己的大小，否则会被父级这个标签影响)

        font-size:0px;的效果就是去除间隙

        <style>

           div{ font-size:0px;  }

            h2{ font-size:15px;

           display:inline-block;}

           a{ font-size:15px; }

       </style>

 

 

       

         <div>

            <h2>aaaaa</h2>

             <a>bbbb</a>

         </div>

 

 

 

   3.div的宽与padding的关系?

     

     当确定了div的宽，这个宽其实就是在没有padding的情况的数字。

     所以当再给这个div加上padding的时候，其宽就要减去padding值。

  例如：

   想要一个200宽的div（在没有padding的情况下）

     div{

        width:200px;        

       }

   想要一个200宽的div(在有padding的情况下)

     div{

        width:180px;

        padding:0px 10px 0px 10px;

       }

      给高的情况也一下要减去。

  

转载于:https://www.cnblogs.com/CafeMing/p/6249115.html