css 行元素和塊元素 相互轉換 居中

1、塊級元素  行內元素

div、h1 或 p 元素經常被稱爲塊級元素。這意味着這些元素顯示爲一塊內容,即「塊框」。與之相反,span 和 strong 等元素稱爲「行內元素」,這是由於它們的內容顯示在行中,即「行內框」。php

您可使用 display 屬性改變生成的框的類型。這意味着,經過將 display 屬性設置爲 block,可讓行內元素(好比 <a> 元素)表現得像塊級元素同樣。還能夠經過把 display 設置爲 none,讓生成的元素根本沒有框。這樣的話,該框及其全部內容就再也不顯示,不佔用文檔中的空間。css

可是在一種狀況下,即便沒有進行顯式定義,也會建立塊級元素。這種狀況發生在把一些文本添加到一個塊級元素(好比 div)的開頭。即便沒有把這些文本定義爲段落,它也會被看成段落對待:佈局

<div>                                    顯示出來的效果爲:
some text                                         some text
<p>Some more text.</p>                            Some more text.
</div>

在這種狀況下,這個框稱爲無名塊框,由於它不與專門定義的元素相關聯。spa

塊級元素的文本行也會發生相似的狀況。假設有一個包含三行文本的段落。每行文本造成一個無名框。沒法直接對無名塊或行框應用樣式,由於沒有能夠應用樣式的地方(注意,行框和行內框是兩個概念)。可是,這有助於理解在屏幕上看到的全部東西都造成某種框。ssr

 

塊級元素特色:code

一、每一個塊級元素都重新的一行開始,而且其後的元素也另起一行。(真霸道,一個塊級元素獨佔一行)orm

二、元素的高度、寬度、行高以及頂和底邊距均可設置。圖片

三、元素寬度在不設置的狀況下,是它自己父容器的100%(和父元素的寬度一致),除非設定一個寬度ci

 

塊狀元素也能夠經過代碼display:inline將元素設置爲內聯元素文檔

內聯元素特色:

一、和其餘元素都在一行上;

二、元素的高度、寬度及頂部和底部邊距不可設置;

三、元素的寬度就是它包含的文字或圖片的寬度,不可改變。

經常使用的塊狀元素有:

<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 元素特色:

一、和其餘元素都在一行上;

二、元素的高度、寬度、行高以及頂和底邊距均可設置。

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>
相關文章
相關標籤/搜索