盒子模型和層模型
阿新 • • 發佈:2019-02-05
5月6日,繼續上一次的小知識點,將學習的程式碼和筆記記錄下來
/******** 1.屬性: 1.border:border-width border-style bordercolor 2.可以直接設定border-left:10px solid black; 3.也可以設定border-left-width:; border-left-color:transparent ********/ /* 2..:文字水平垂直居中 程式碼包括:text-align:center; line-height:(=height); 2.px:一個畫素只能代表一個顏色 螢幕解析度:一個螢幕能擱下的垂直畫素點數 (相對的單位) em:1em=1 * font-size; (單位是相對的) 例如:1.2行高 line-height:1.2em; */ div1 { border:1px solid black; text-align:left; /*對齊方式:水平居中 */ height:200px; line-height:20px; /*單行文字所佔高度 */ text-indent:2em; /*縮排兩個單位 */ } /* 3.text-decoration的用法 */ span1 { /*text-decoration:line-through; */ text-decoration:underline; color:rgb(0,0,238); cursor:pointer; /*游標 */ } del1 { text-decoration:none; } /*4.偽類選擇器 */ a { text-decoration:none; } a:hover { text-decoration:underline; background-color:#f40; color:#fff; font-size:16px; font-weight:bold; font-style:arial; border-radius:10px; } /*(面試常見考題:請舉幾個行間元素和塊級元素的例子) 5.行級元素、塊級元素以及行塊級元素 1.行級元素:inline feature:內容決定元素所佔位置 不可以通過CSS改變寬高 元素:span strong em a del 2.塊級元素 block feature:獨佔一行 可以通過CSS改變寬高 元素:div p ul li ol form address 3.行級塊元素: inline-block feature:內容決定大小 可以改變寬高 */ /*6.凡是帶有inline的元素,都有文字特性 解決方法:刪除空格 */ img { width:100px; height:200px; /*margin-left:-6px;*/ } /*7.先定義功能,後選擇樣式 */ .green { background-color:green; } .grey { background-color:grey; } .size1 { width:10px; height:10px; } .size2 { width:20px; height:20px; } .size3 { width:30px; height:30px; } /*8.自定義標籤:標籤選擇器 em { font-style:normal; color:#c00; } a { text-decoration:none; color:#424242; } ul { list-style:none; padding:0; maigin:0; }*/ * /*9.萬用字元選擇器可以初始化所有標籤選擇器 */ { padding:0; margin:0; } /* 10.盒子模型 盒子的三大部分: 盒子壁 border 內邊距 padding 盒子內容 width+height margin(外邊距) + border + padding + (content=) */ div2 { width:100px; height:100px; background-color:red; padding:100px; margin:100px; } /*10.1 如何讓裡裡面的盒子在外部的盒子居中 :讓外面盒子的裡面的width+height相同*/ .wrapper2 { width:100px; height:100px; background-color:red; padding:100px 150px 200px 250px;/*上 右 下 左 */ padding-top:100px; border:10px solid green; } .content2 { width:100px; height:100px; background-color:black; } /*10.2 盒子的計算 */ div3 { width:100px; height:100px; background-color:red; border:10px solid black; padding:10px 20px 30px; margin:10px 20px; } /*可以通過Google Chorme的控制檯拉來觀察 readWidth: realHeight: */ /*10.3 利用盒模型來畫出遠檢視 */ .content1 { width:10px; height:10px; background-color:#0f0; } .content { width:10px; height:10px; background-color:#fff; padding:10px; } .box { width:30px; height:30px; background-color:#0f0; padding:10px; } .wrapper { width:50px; height:50px; background-color:#fff; paddind:10px; margin:100px; } /*****************知識點:層模型 ********************/ /*11.定位技術:position(每個absolute定位都在一個性能的層面上) */ .box1 { position:absolute; width:100px; height:100px; background-color:red; opacity:0.5; /*透明度 */ /*left:距離瀏覽器右邊界200px */ /*position:absolute; left:200px; top:300px;*/ } .box2 { width:150px; height:150px; background-color:green; } /*11.1 absolute定位: 1.脫離原來的位置進行定位 相對於最近的有定位的父級進行的那位,如果沒有,那麼相對於文件進行定位 */ .wrapper3 { position:absolute; margin-left:100px; width:200px; height:200px; background-color:orange; } .content3 { margin-left:100px; width:100px; height:100px; background-color:black; } .box { position:absolute; left:50px; width:50px; height:50px; background-color:yellow; } /*12.relative定位:保留原來位置定位 (相對於原來的位置進行定位)*/ .box3 { position:relative; left:100px; top:100px; width:100px; height:100px; background-color:red; opacity:0.5; /*透明度 */ } .box4 { width:150px; height:150px; background-color:green; } /* 總結:relative:做相對位置 absolute:定位 */ /*13.廣告定位:fixed */ div6 { position:fixed; left:0; top:300px; width:100px; height:100px; background-color:red; color:#fff; } /*13.1廣告定位居中 */ div { position:absolute; left:50%; top:50%; width:100px; height:100px; background-color:red; color:#fff; margin-left:-50px; margin-top:-50px; }