css

1. 寬高
width:數值;
height:數值;
也可用百分比!
長高的設定不會被後代繼承
2. 背景
(1)背景顏色
background-color:顏色值;
元素的背景顏色預設為transparent
background-color 不會被後代繼承。
(2)背景圖片
使用background-image 屬性預設值為none 表示背景上沒有放置任何影象
如果需要設定一個背景影象,必須為這個屬性設定一個url 值
background-image: url(bg.gif);
注意圖片的位置引入方法!
背景圖片重複的問題
使用background-repeat 來解決,可以的值:repeat-x,repeat-y,no-repeat
背景圖片的位置
使用background-position 來設定
1>可以使用一些關鍵字:top、bottom(下)、left、right 和center 通常,這些關鍵字
會成對出現。
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
2>也可以用百分比
background:50% 50%;
第一個表示水平第二個表示垂直
3>當然更可以用數值,以px 單位
background:40px 10px;
第一個表示水平第二個表示垂直
4>也可以混用!
背景關聯
background-attachment:fixed
(3)總結寫法
background: #00FF00 url(bg.gif) no-repeat fixed center left;
3. 邊框
border:1px solid #ccc;
dashed 表示虛線
border-left:none;
border-right:none;
border-top:none;
border-bottom:none;
分開設定
最後來討論一個有趣的問題:
後代元素長度大於祖輩元素的大小時候的處理方法:
overflow:;
可能的值:
visible:預設,內容不會被修剪,會呈現在元素框之外。
hidden:超出的內容會被修剪掉,直接不現實。
scroll:超出內容會被修剪,但是瀏覽器會顯示滾動條以便檢視其餘的內容。
auto:如果內容被超出,則瀏覽器會顯示滾動條以便檢視其餘的內容。
inherit:規定應該從父元素繼承overflow 屬性的值

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="generator"
  5. content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
  6. <meta charset="utf-8" />
  7. <title>css構造塊級元素</title>
  8. <link rel="stylesheet" type="text/css" href="style/8.css" />
  9. <style type="text/css"></style>
  10. </head>
  11. <body>
  12. <div id="div1">我是div容器
  13. <p>我是一個段落</p></div>
  14. <div>我是div容器</div>
  15. </body>
  16. </html>

  1. body {
  2. background-image:url(../images/2.jpg);/*檔案體背景*/
  3. background-repeat:no-repeat;/*圖片是否平鋪*/
  4. background-attachment:fixed;/*背景關聯*/
  5. }
  6. #div1 {
  7. width:900px;/*寬度*/
  8. height:800px;/*高度*/
  9. /* background-color:#00FFCC; */
  10. background-image:url(../images/yu.jpg);
  11. background-repeat:no-repeat;
  12. background-position:center right;/*背景位置*/
  13. }
  14. #div1 p {
  15. background-color:#B94FFF;/*p段落背景色*/
  16. }

  1. #div1 {
  2. width:900px;/*寬度*/
  3. height:600px;/*高度*/
  4. /* background-color:#00FFCC; */
  5. background-image:url(../images/yu.jpg);
  6. background-repeat:no-repeat;
  7. background-position:center right;/*背景位置*/
  8. border:10px solid #00AAAA;
  9. }
  10. #div1 p {
  11. background-color:#B94FFF;/*p的段落背景色*/
  12. }

元素性質相互轉化:
display:block;
display:inline;
display:inline-block;
display:none;

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="generator"
  5. content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
  6. <meta charset="utf-8" />
  7. <title>css構造塊級元素</title>
  8. <style type="text/css">
  9. #div1 {
  10. width:200px;
  11. height:200px;
  12. background:#9999FF;
  13. border:1px solid #000000;
  14. overflow:auto;/*超出部分隱藏*/
  15. }
  16. #div2{
  17. width:300px;
  18. height:150px;
  19. background:#FFCC22;
  20. overflow:inherit;
  21. }
  22. a {
  23. width:200px;
  24. height:200px;
  25. background:#9995FF;
  26. border:1px solid #000000;
  27. display:block;
  28. }
  29. #div3 {
  30. width:200px;
  31. height:200px;
  32. background:#B94FFF;
  33. border:1px solid #000000;
  34. display:inline-block;
  35. }
  36. #div4 {
  37. width:200px;
  38. height:200px;
  39. background:#FF8888;
  40. border:1px solid #000000;
  41. display:inline-block;
  42. }
  43. #div5 {
  44. width:200px;
  45. height:200px;
  46. background:#99FFFF;
  47. border:1px solid #000000;
  48. display:inline-block;
  49. }
  50.  
  51. </style>
  52. </head>
  53. <body>
  54. <div id="div1">
  55. <div id="div2">
  56. 據瞭解,“雙一流”建設囊括了具有約20年曆史的“211工程”、“985工程”等專案。2015年底,國務院頒佈了綱領性的《統籌推進世界一流大學和一流學科建設總體方案》。2016年全國教育工作會議上,時任教育部部長袁貴仁曾表示,“雙一流”建設將是2016年乃至“十三五”規劃的重點工程。</div>
  57. </div>
  58. <a href="http://www.baidu.com">百度</a>
  59. <div id="div3">div3</div>
  60. <div id="div4">div4</div>
  61. <div id="div5">div5</div>
  62. </body>
  63. </html>