css樣式設定小技巧
水平居中設定-定寬塊狀元素：
可以通過設定「左右margin」值為「auto」來實現居中的。
例如：
我是定寬塊狀元素，哈哈，我要水平居中顯示。div>
body>
css**：
divstyle>
不定寬度的塊狀元素有三種方法居中（這三種方法目前使用的都很多）：
1、加入 table 標籤
2、設定 display: inline 方法：與第一種類似，顯示型別設為 行內元素，進行不定寬元素的屬性設定
3、設定 position
:relative 和 left
:50%：利用**相對定位**的方式，將元素向左偏移 50% ，即達到居中的目的
是利用table標籤的長度自適應性---即不定義其長度也不預設父元素body的長度（table其長度根據其內文字長度決定），因此可以看做乙個定寬度塊元素，然後再利用定寬度塊狀居中的margin的方法，使其水平居中。
第一步：為需要設定的居中的元素外面加入乙個 table 標籤 ( 包括 、、 )。
第二步：為這個 table 設定「左右 margin 居中」（這個和定寬塊狀元素的方法一樣）。
舉例如下：
html**：
我是第一行文字li>
我是第二行文字li>
我是第三行文字li>
ul>
td>
tr>
tbody>
table>
div>
css**：
table
style>
改變塊級元素的 display 為 inline 型別（設定為 行內元素 顯示），然後使用 text-align:center 來實現居中效果。如下例子：
html**：
class="container">
href="#">1a>
li>
href="#">2a>
li>
href="#">3a>
li>
ul>
div>
body>
css**：
.container
/* margin:0;padding:0（消除文字與div邊框之間的間隙）*/
.container
ul/* margin-right:8px（設定li文字之間的間隔）*/
.container
listyle>
這種方法相比第一種方法的優勢是不用增加無語義標籤，但也存在著一些問題：它將塊狀元素的 display 型別改為 inline，變成了行內元素，所以少了一些功能，比如設定長度值。
通過給父元素設定 float，然後給父元素設定 position:relative 和 left:50%，子元素設定 position:relative 和 left: -50% 來實現水平居中。
我們可以這樣理解：假想ul層的父層（即下面例子中的div層）中間有條平分線將ul層的父層（div層）平均分為兩份，ul層的css**是將ul層的最左端與ul層的父層（div層）的平分線對齊；而li層的css**則是將li層的平分線與ul層的最左端（也是div層的平分線）對齊，從而實現li層的居中。
**如下：
class="container">
href="#">1a>
li>
href="#">2a>
li>
href="#">3a>
li>
ul>
div>
body>
css**：
.container
.container
ul.container
listyle>
通過設定父元素的 height 和 line-height 高度一致來實現的。(height: 該元素的高度，line-height: 行高（行間距），指在文字中，行與行之間的基線間的距離 )。line-height 與 font-size 的計算值之差，在 css 中成為「行間距」。分為兩半，分別加到乙個文字行內容的頂部和底部。
垂直居中-父元素高度確定的多行文字
方法一：
用插入 table (包括tbody、tr、td)標籤，同時設定 vertical-align：middle。css 中有乙個用於豎直居中的屬性 vertical-align，在父元素設定此樣式時，會對inline-block型別的子元素都有用。
例如：
html**：
class="wrap">
看我是否可以居中。p>
div>
td>
tr>
tbody>
table>
body>
css**：
table td
因為 td 標籤預設情況下就預設設定了 vertical-align 為 middle，所以我們不需要顯式地設定了。
在 chrome、firefox 及 ie8 以上的瀏覽器下可以設定塊級元素的 display 為 table-cell（設定為**單元顯示），啟用 vertical-align 屬性，但注意 ie6、7 並不支援這個樣式, 相容性比較差。
例如：
html**：
class="container">
看我是否可以居中。p>
看我是否可以居中。p>
看我是否可以居中。p>
div>
div>
css**：
.container
style>
這種方法的好處是不用新增多餘的無意義的標籤，但缺點也很明顯，它的相容性不是很好，不相容 ie6、7而且這樣修改display的block變成了table-cell，破壞了原有的塊狀元素的性質。
設定以下 2 個句之一：
position : absolute
float : left 或 float:right
簡單來說，只要html**中出現以上兩句之一，元素的display顯示型別就會自動變為以 display:inline-block（塊狀元素）的方式顯示，當然就可以設定元素的 width 和 height 了，且預設寬度不佔滿父元素。
HTMLCSS學習筆記（九） 定位與錨點
css 有三種基本的定位機制 position 屬性指定了元素的定位型別。position static 靜態定位 預設值 position relative 相對定位 position absolute 絕對定位 position fixed 固定定位 position sticky 粘性定位 定...
HTML CSS學習筆記
利用標籤中style屬性來改變每個標籤的顯示樣式 適用於單個標籤的樣式修改。不靈活 this is p tag 內嵌形式 可用於同類標籤的樣式統一修改 依然不夠靈活 表示後面的所有table中的文字預設顏色如我所設定。前提是已經存在乙個定義好的css檔案，網頁的一部分樣式需要用到，那麼可以採用這種方...
html css學習筆記
本人正經職業位android 開發，無奈現在社會壓力太大，對做人的要求越來越高，只掌握一門技術根本不好意思說自己是一名程式設計師，更無法在這個社會生存。本人只好順應時代發展的需要，不斷提高自己的綜合水平，提高對自身的要求，選擇了去學習html和css等前端的有關知識，新手入門，記錄一些學習過程中的筆...