HTML5與CSS3學習心得
在學習Html5和CSS3過程中,佈局都是又標籤來進行填充自己的頁面,然後通過css來進行對自己的介面進行修飾與裝潢,打個比喻,你的body就行一個剛買的房子,裡面的標籤就像你把自己的房間如何規劃,而css呢,就像你要把你的房子進行精裝修一樣.要選什麼樣的塗料,在房間喜歡什麼樣的窗簾,怎樣舒適的沙發,還有如何佈置自己美麗的臥室.
首先,Web前端的話,要想玩6這個東西,首先你要多多的練習,所說的練手,你要寫大量的網頁來練習,達到熟能生巧的地步,這樣你就完美了,頁面的佈局大家都知道盒模型是一個佈局的很重要的一個方式,無非就是玩的是margin啊,padding啊,把想讓到什麼地方的元素送到自己指定的位置就OK了.
在佈局中熟練的掌握標籤的特性是非常重要的,比如行塊標籤,什麼是行標籤,什麼是塊標籤,如果你把行塊標籤弄混了,那麼想要弄出一個特別漂亮的介面感覺不是很容易,所以呢.一定要知道,行塊標籤有哪些,以及行塊標籤的特性.下面總結一下行塊標籤有哪些及其特性.
行標籤：（可以共用一行）strong em img a,b,i,s,u,input,span 塊標籤：（獨佔一行）h1-h6,p,div,hr,ul,ol,li,dt,dd,dl
標籤巢狀原則:
1.a標籤不能巢狀a標籤
2.塊標籤可以任意巢狀（除了p，h，dt這三個標籤可以巢狀行標籤）
3行標籤不能巢狀塊標籤
在佈局中,還有一個很重要的佈局方式,那就是傳說中的浮動,浮動就是簡單地讓塊的元素讓他們手拉手站到同一排,當然這麼說也不是很準確,大部分時候,浮動都是對塊標籤起作用的哈,讓他們浮動起來,形成美好的介面德萊.那麼,什麼是浮動呢?浮動的核心思想:浮動讓標籤的佈局脫離原來預設的文件流佈局方
.浮動會讓塊元素失去獨佔一行的特性,在浮動這一層的標籤可以共用一行. .浮動標籤後面的佈局的標籤會忽略被浮動的標籤原來所佔據的空間. .浮動元素(只要一個標籤加了float,他就叫浮動標籤或浮動元素). .浮動元素預設內容撐開寬高. .浮動元素標籤會發生層疊,但內容不會. .浮動造成的影響:父子間的影響和兄弟間的影響 overflowd;hidden clear:both.div1{
width: 200px;
height: 200px;
background-color: red;
margin: 10px;
/*float: right;*/
/*新增左浮動*/
float: left ;
}
.div2{
width: 200px;
height: 200px;
background-color: cyan;
margin: 10px;
/*float: right;*/
float: left;
}
.div3{
width: 200px;
height: 200px;
background-color: orange;
margin: 10px;
/*float: right;*/
float: left;
}
.father{
/*/*width: 680px;*/*/
margin: auto;
}
</style>
</head>
<body>
<div class="father">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3 </div>
</div>
</body>
</html>
在這裡我們定義了一個父集.father,在父集裡我們定義了三個子集div,開始時候每個div是獨佔一行的大家都知道,當給每個子集div添加了浮動之後,他們會失去獨佔一行的特性,就像我剛開始說的手拉手站在了一排,這裡要說一下浮動所造成的影響,一共會造成兩種影響,一個是對兄弟之間造成的影響,另一個是對父集造成的影響. 清除對父集造成的影響我們一般用clear both ,看一下我下面的程式碼:
<style type="text/css">
.father{
width: 200px;
height: 200px;
margin: auto;
border: 1px solid black;
}
.one{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.two{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
.three{
width: 200px;
height: 100px;
background-color: green;
/*float: left;*/
clear:both;
}
</style>
</head>
<body>
<div class="father">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
</body>
.father{
border: 1px solid black;
/*overflow: hidden;*/
/*float: left;*/
}
.one{
width: 100px;
height: 200px;
background-color: red;
}
.two{
width: 100px;
height: 200px;
background-color: yellow;
}
.three{
width: 100px;
height: 200px;
background-color: blue;
}
.fatherdiv{
float: left;
}
</style>
</head>
<body>
<div class="father">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
</body>
</html>
浮動對父集造成的影響我們也可以用浮動清浮動來解決,就是讓父親也浮動起來,對兄弟間造成的影響也可以這樣,所以大家要靈活運用,在具體的地方尋找合適的方法很重要