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 屬性的值
- <!DOCTYPE html>
- <html>
- <head>
- <meta name="generator"
- content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
- <meta charset="utf-8" />
- <title>css構造塊級元素</title>
- <link rel="stylesheet" type="text/css" href="style/8.css" />
- <style type="text/css"></style>
- </head>
- <body>
- <div id="div1">我是div容器
- <p>我是一個段落</p></div>
- <div>我是div容器</div>
- </body>
- </html>
- body {
- background-image:url(../images/2.jpg);/*檔案體背景*/
- background-repeat:no-repeat;/*圖片是否平鋪*/
- background-attachment:fixed;/*背景關聯*/
- }
- #div1 {
- width:900px;/*寬度*/
- height:800px;/*高度*/
- /* background-color:#00FFCC; */
- background-image:url(../images/yu.jpg);
- background-repeat:no-repeat;
- background-position:center right;/*背景位置*/
- }
- #div1 p {
- background-color:#B94FFF;/*p段落背景色*/
- }
- #div1 {
- width:900px;/*寬度*/
- height:600px;/*高度*/
- /* background-color:#00FFCC; */
- background-image:url(../images/yu.jpg);
- background-repeat:no-repeat;
- background-position:center right;/*背景位置*/
- border:10px solid #00AAAA;
- }
- #div1 p {
- background-color:#B94FFF;/*p的段落背景色*/
- }
元素性質相互轉化:
display:block;
display:inline;
display:inline-block;
display:none;
- <!DOCTYPE html>
- <html>
- <head>
- <meta name="generator"
- content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
- <meta charset="utf-8" />
- <title>css構造塊級元素</title>
- <style type="text/css">
- #div1 {
- width:200px;
- height:200px;
- background:#9999FF;
- border:1px solid #000000;
- overflow:auto;/*超出部分隱藏*/
- }
- #div2{
- width:300px;
- height:150px;
- background:#FFCC22;
- overflow:inherit;
- }
- a {
- width:200px;
- height:200px;
- background:#9995FF;
- border:1px solid #000000;
- display:block;
- }
- #div3 {
- width:200px;
- height:200px;
- background:#B94FFF;
- border:1px solid #000000;
- display:inline-block;
- }
- #div4 {
- width:200px;
- height:200px;
- background:#FF8888;
- border:1px solid #000000;
- display:inline-block;
- }
- #div5 {
- width:200px;
- height:200px;
- background:#99FFFF;
- border:1px solid #000000;
- display:inline-block;
- }
- </style>
- </head>
- <body>
- <div id="div1">
- <div id="div2">
- 據瞭解,“雙一流”建設囊括了具有約20年曆史的“211工程”、“985工程”等專案。2015年底,國務院頒佈了綱領性的《統籌推進世界一流大學和一流學科建設總體方案》。2016年全國教育工作會議上,時任教育部部長袁貴仁曾表示,“雙一流”建設將是2016年乃至“十三五”規劃的重點工程。</div>
- </div>
- <a href="http://www.baidu.com">百度</a>
- <div id="div3">div3</div>
- <div id="div4">div4</div>
- <div id="div5">div5</div>
- </body>
- </html>