CSS學習筆記三，css學習筆記
CSS盒子模型:
早期的網頁設計主要是表格,後來主要是div+css
盒子模型：
1.邊框：border：
border-top、border-bottom、border-left、border-right
2.內邊距：padding：
padding-top、padding-bottom、padding-left、padding-right
3.外邊距：margin：
margin-top、margin-bottom、margin-left、margin-right
CSS的布局
文法：float : none |left |right 取值：
| none | : | 預設值。對象不飄浮 |
| left | : | 文字資料流向對象的右邊 |
| right | : | 文字資料流向對象的左邊 |
文法：clear : none |left |right | both 取值：
| none | : | 預設值。允許兩邊都可以有浮動物件 |
| left | : | 不允許左邊有浮動物件 |
| right | : | 不允許右邊有浮動物件 |
| both | : | 不允許有浮動物件 |
<style type="text/css">/*body{ 因為瀏覽器的不同，肯能在開發時，改變body外邊框的值margin:0px;}*/div{border:#000000;padding-top:10px;padding-bottom:50px;padding-left:100px;padding-right:150px;/*padding:10px 50px 100px 150px ;/*上右下左*/}#div_1{background-color:#FF0000;/*margin-left:200px;*/float:left;/**/}#div_2{background-color:#FF9900;float:left;/*clear:left;*/}#div_3{background-color:#3300FF;/*clear:right;*/}</style></head><body><div id="div_1">1號盒子</div><div id="div_2">2號盒子</div><div id="div_3">3號盒子</div></body>
CSS的定位：
文法：position : static |absolute |fixed | relative 取值：
| static | : | 預設值。無特殊定位，對象遵循HTML定位規則 |
| absolute | : | 將對象從文檔流中拖出，使用 left， right ， top， bottom等屬性相對於其最接近的一個最有定位設定的父物件進行絕對位置。如果不存在這樣的父物件，則依據 body對象。而其層疊通過 z-index屬性定義 |
| fixed | : | 未支援。對象定位遵從絕對(absolute)方式。但是要遵守一些規範 |
| relative | : | 對象不可層疊，但將依據 left， right ， top， bottom等屬性在正常文檔流中位移位置 |
<style type="text/css">div{border:#000000 solid 1px;height:100px;width:200px;}#div_0{background-color:#66FF99;height:400px;width:400px;position:absolute;/*position:static;*/top:100px;left:100px;}#div_1{background-color:#FF0000;/*position:absolute;*/ /*假設父物件div_0沒有定義position，比如是static，那麼他的定位屬性相對於body，有就是相對於div_0 */position:relative;left: 80px;/*通過一個小程式可以實現數值的改變，進而實現該盒子在頁面飄動的效果*/top:50px;/*這個數值是相對於body而言的*/}#div_2{background-color:#FF9900;width:200px;}#div_3{background-color:#3300FF;}</style></head><body><div id="div_0"><div id="div_1">1號盒子</div><div id="div_2">2號盒子</div><div id="div_3">3號盒子</div></div> </body>
CSS的圖文混排
<style type="text/css">#imgtext{border:#3333FF dashed 1px;width:280px;}#img{float:right;}#text{color:#F6C;font-family:"華文隸書";}</style></head><body><div id="imgtext"><div id="img"><img src="file:///C|/Users/Public/Pictures/Sample Pictures/1.jpg" height="200px" width="200px" alt="" /></div> <div id="text">這是一朵水仙花,呵呵呵呵呵呵呵呵呵呵呵呵呵呵asdsad最新的身份的廣泛的廣泛覆蓋vbxcv大哥哥哥哥哥asdds的雙方各持續持續持續弟弟！撒反反覆複反反覆複反反覆複反反覆複反反覆複反反覆複反反覆複反反覆複反反覆複反反覆複反反覆複反反覆複反反覆複反反覆複反反覆複反覆！</div></di
<style type="text/css">#imgtest{border: #FF0000 dotted 1px; width: 350px; /*margin: 50px;*/ position: absolute;/*防止映像動了,而文字未動,所以在imgtext也要定位*/ top:50px ;}#text{ font-family: "華文隸書"; font-size: 20px; position: absolute; top: 30px; left: 10px;}</style></head><body><div id="imgtest"> <div id="img"> <img src="1.jpg" height="300px" width="280px"/> </div> <div id="text"> 小狗 </div></div></body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
