java字符串與格局化輸入的深刻剖析

1、塊級元素  行內元素

div、h1 或 p 元平素常被稱為塊級元素。這意味著這些元素顯示為一塊內容，即“塊框”。與之相反，span 和 strong 等元素稱為“行內元素”，這是由於它們的內容顯示外行中，即“行內框”。

您可使用 display 屬性轉變生成的框的類型。這意味著，經由過程將 display 屬性設置為 block，可讓行內元素（好比 <a> 元素）表示得像塊級元素一樣。還可以經由過程把 display 設置為 none，讓生成的元素基本沒有框。如許的話，該框及其一切內容就不再顯示，不占用文檔中的空間。

然則在一種情形下，即便沒有停止顯式界說，也會創立塊級元素。這類情形產生在把一些文本添加到一個塊級元素（好比 div）的開首。即便沒有把這些文本界說為段落，它也會被看成段落看待：

 <div>                    顯示出來的後果為：               
some text                 some text
<p>Some more text.</p>    Some more text.
</div>

在這類情形下，這個框稱為無名塊框，由於它不與專門界說的元素相干聯。

塊級元素的文本行也會產生相似的情形。假定有一個包括三行文本的段落。每行文本構成一個無名框。沒法直接對無名塊或行框運用款式，由於沒有可以運用款式的處所（留意，行框和行內框是兩個概念）。然則，這有助於懂得在屏幕上看到的一切器械都構成某種框。

塊級元素特色：

1、每一個塊級元素都重新的一行開端，而且厥後的元素也另起一行。（真強橫，一個塊級元素獨有一行）

2、元素的高度、寬度、行高和頂和底邊距都可設置。

3、元素寬度在不設置的情形下，是它自己父容器的100%（和父元素的寬度分歧），除非設定一個寬度

塊狀元素也能夠經由過程代碼display:inline將元素設置為內聯元素

內聯元素特色：

1、和其他元素都在一行上；

2、元素的高度、寬度及頂部和底部邊距弗成設置；

3、元素的寬度就是它包括的文字或圖片的寬度，弗成轉變。

經常使用的塊狀元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

經常使用的內聯元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

經常使用的內聯塊狀元素有：

<img>、<input>

內聯塊狀元素（inline-block）就是同時具有內聯元素、塊狀元素的特色，代碼display:inline-block就是將元素設置為內聯塊狀元素。(css2.1新增)，<img>、<input>標簽就是這類內聯塊狀標簽。

inline-block 元素特色：

1、和其他元素都在一行上；

2、元素的高度、寬度、行高和頂和底邊距都可設置。

2、程度居中　　

行內元素和塊級元素分歧,關於行內元素,只需在父元素中設置text-align=center便可;

關於塊級元素有以下幾種居中方法:

1.將元素放置在table中,再將table的margin-left和margin-right設置成auto,將table居中,使在其當中的塊級元素葉居中,然則這類方法不相符語義化標簽的標准;

2.將塊級元素轉換行內元素(經由過程設置display:inline)後再居中.這類方法使居中元素釀成行內元素而導致沒法設置寬高;

3.設置父元素float:left,position:relative,left:50%;子元素float:left,position:relative,left:-50%,應用絕對結構的方法居中.下面三種方法各有好壞,依應用情形詳細選擇.

3、垂直居中　　

1.關於曉得高度的元素可以設置高低padding相等;

2.設置line-height和height相等

3.應用vertical-align,然則這屬性只在tr,td中實用,故可將元素放置入table中在居中

源碼

 代碼以下：

    
<!-- 程度居中 -->  
    
<!-- 行內元素居中只需在父元素中設置text-align便可 -->  
    
<div class="father">  
    
<p class="blockCenter">  
    
hehe</p>  
    
</div>  
    
<!-- table居中 -->  
    
<table class="tableclass">  
    
<tr>  
    
<td>  
    
<ul class="ulclass">  
    
<li><a href="#">呵</a></li>  
    
</ul>  
    
</td>  
    
</tr>  
    
</table>  
    
<table class="tableclass">  
    
<tr>  
    
<td>  
    
<ul class="ulclass">  
    
<li><a href="#">呵</a></li>  
    
<li><a href="#">呵</a></li>  
    
<li><a href="#">呵</a></li>  
    
</ul>  
    
</td>  
    
</tr>  
    
</table>  
    
<table class="tableclass">  
    
<tr>  
    
<td>  
    
<ul class="ulclass">  
    
<li><a href="#">呵</a></li>  
    
<li><a href="#">呵</a></li>  
    
<li><a href="#">呵</a></li>  
    
<li><a href="#">呵</a></li>  
    
<li><a href="#">呵</a></li>  
    
</ul>  
    
</td>  
    
</tr>  
    
</table>  
    
<!-- 將塊及元素變成行內元素在居中 -->  
    
<ul style="{text-align: center}">  
    
<li style="{display: inline}">nihao </li>  
    
</ul>  
    
<!-- 應用絕對結構 -->  
    
<ul class="relativeCenterFather">  
    
<li class="relativeCenterChild">你好 </li>  
    
</ul>  
    
<!--豎直居中-->  
    
<!-- 1.設置雷同的高低padding -->  
    
<!-- 2.父元素height和line-height雷同 -->  
    
<hr />  
    
<div style={background:#000;width:500px;color:#fff;line-height:100px;text-align:center}>  
    
我要來場說走就走的觀光   
    
</div>  
    
<!--3. vartical-align,這屬性只對tr,td起感化 -->  
    
<table>  
    
<tr verticla-align="center" height="100" background="#FF00FF">  
    
<td>一弦一柱思華年</td>  
    
</tr>  
    
</table>  

css款式

    
<style type="text/css">   
    
.father   
    
{   
    
width:500px;   
    
}   
    
.inlineCenter   
    
{   
    
text-align:center;   
    
float:left;   
    
}   
    
.blockCenter   
    
{   
    
width:100px;   
    
margin-left:auto;   
    
margin-right:auto;   
    
text-align:"center"  
    
}   
    
.tableclass   
    
{   
    
margin-left:auto;   
    
margin-right:auto;   
    
}   
    
.ulclass   
    
{   
    
list-style:none;   
    
margin:0;   
    
padding:0;   
    
}   
    
.ulclass li   
    
{   
    
float:left;   
    
display:inline;   
    
text-align:center;   
    
}   
    
.ulclass li a   
    
{   
    
text-align:center;   
    
float:left;   
    
background:#316AC5;   
    
color:#fff;   
    
}   
    
.ulclass li a:hover   
    
{   
    
background:#fff;   
    
color:#316AC5;   
    
}   
    
.relativeCenterFather   
    
{   
    
float:left;   
    
position:relative;   
    
left:50%   
    
}   
    
.relativeCenterChild   
    
{   
    
float:left;   
    
position:relative;   
    
left:-50%;   
    
}   
    
/* 豎直居中*/  
    
.wrap   
    
{   
    
background:#000;   
    
width:500px;   
    
color:#fff;   
    
height:100px;   
    
line-height:100px;   
    
}   
    
</style>  

以上這篇關於css 行元素和塊元素 互相轉換 居中就是小編分享給年夜家的全體內容了，願望能給年夜家一個參考，也願望年夜家多多支撐。