4-21標題居中和文本居中/對齊/組合選擇符

一、標題居中和文本居中

<h1 align="center「></h1>

test-align:center;（最好寫在一個css文件中，或者放在style標籤裏）

 

1 .center {
2     margin: auto;
3     width: 60%;
4     border: 3px solid #73AD21;
5     padding: 10px;
6 }

margin：auto在這裏能夠把塊級元素居中。（塊元素中能夠是文本也能夠是圖片）

二、對齊

左右對齊 - 使用 float 方式

咱們可使用 float 屬性來對齊元素:

1 .right {
2     float: right;
3     width: 300px;
4     border: 3px solid #73AD21;
5     padding: 10px;
6 }

三、組合選擇符

• 後代選擇器(以空格分隔)-------------------------------------------div p-------------<div>標籤裏的全部p語段，實例選取全部 <p> 元素插入到 <div> 元素中
• 子元素選擇器(以大於號分隔）-----------------------------------div>p------------實例選擇了<div>元素中全部直接子元素 <p> ，，非直接==<span><p>1234</p></span>
• 相鄰兄弟選擇器（以加號分隔）---------------------------------div+p------------實例選取了全部位於 <div> 元素後的第一個 <p> 元素
• 普通兄弟選擇器（以破折號分隔）------------------------------div~p------------實例選取了全部 <div> 元素以後的全部相鄰兄弟元素 <p> 

四、補充：塊元素是什麼？

　　學了這麼久，我竟然還不知道塊元素是什麼，這裏，我補充一下。

　　相似於：display:block - 顯示塊元素的連接，讓總體變爲可點擊連接區域（不僅是文本），它容許咱們指定寬度。 

　　①老是在新行上開始;

　　②高度，行高以及外邊距和內邊距均可控制;

　　③寬度缺省是它的容器的100%，除非設定一個寬度。

　　④它能夠容納內聯元素和其餘塊元素

注：上一個博客有提到塊級元素和內聯元素的區別，可是很遺憾，今天看到依然很陌生。這也是我很苦惱的，學了東西，卻沒能將它消化。