CSS知識點2
阿新 • • 發佈：2018-12-22
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文件</title> <!-- --> <style type="text/css"> body{ text-align: center; font:黑體; } #color{ color:blue; } /*left,right,top,bottom分別表示距離左右上下的位置。height和weight表示高和寬。 position屬性控制以什麼方式定點陣圖層，absolute：網頁右上角；relative：原始值的位置；static：HTML預設位置*/ /*上下兩個層之間放在一起時，magin層邊距將會發生合併，以大的為標準 兩個不同頁面內容的邊距彼此相鄰時，也會發生合併。可以在其中一個內容加邊框或空距防止*/ #div1{ color: aqua; left:100px; top:10em; width: 300px; height: 300px; magin:3em; /*外邊距，可以為負值，達到疊加目的*/ padding:1em 2em 3em 4em; /*頁邊距分別為上，右，下，左，不可以為負值*/ background:url(MySource/smiley.gif) left repeat-y; /*使用自定義圖片修改邊距樣式*/ border-style: dashed; /*邊框樣式 solid dotted dashed長方體斑點吧 等*/ border-color:darkgray; /*邊框顏色*/ border-width:1em; /*邊框寬度*/ /*有時層中內容超過初始設定範圍時，會自動拉伸層的大小，如果不希望拉伸，設定overflow*/ overflow: auto; /*auto超出時顯示滾動條 scroll超出與否都顯示滾動條 hidden都不顯示滾動條，會丟掉溢位的*/ display:block; /*block塊級物件 inline行級物件，好幾個inline的物件好像就顯示在一行裡 inline-block行內框*/ } /*盒佈局，現在大家一般都不支援欸，(￢︿̫̿￢☆)*/ .container{ /*開啟盒佈局*/ display:box; /*元素的佈局方向 vertical 從上到下 horizontal 從左到右 inline-axis 沿著內聯軸 表現為橫向編排 block-axis 沿著塊軸 表現為縱向編排 inherit 繼承父類中box-orient的值 */ box-oriednted:vertical; /*元素的佈局順序 reverse：反向； normal：正向； inherit：繼承父類中box-direction的值*/ box-direction:reverse; /*改變元素的位置；誰的值大誰排在後面*/ box-ordinal-group:2; /*彈性空間分配，預設0.0 例如id1的box-flex設定為1 id2的box-flex設定為2 則id1會得剩餘空間的1/3， id2會得到剩餘空間的2/3*/ box-flex:0.0; /*元素的對齊方式*/ /*水平空間分配 center置中 start左 end右 jsutify平均，最左和最有沒有空間！！！*/ box-pack:center; /*垂直空間分配 center置中 start上 end下 baseline：基線 strech：和justify差不多*/ box-align:center; /*增強的盒屬性*/ /*陰影效果*/ /*正右上負左下*/ /*分別為陰影型別inset：內陰影，預設外陰影； 陰影水平位移，垂直位移，模糊距離（可選），大小（可選），顏色（可選）*/ box-shadow:inset 5px 5px 5px 5px #333; /*盒子尺寸的計算方法 border-box 指定的寬度和高度包括content+padding+border inherit：和他爸爸一樣 padding-box 指定的寬度和高度包括content+padding content-box 指定的寬度和高度包括content */ box-sizing: border-box; /*內容溢位處理方法*/ /*auto超出時顯示滾動條 scroll超出與否都顯示滾動條 hidden都不顯示滾動條，會丟掉溢位的 visible顯示在盒外 no-conten:不顯示內容 no-display不顯示元素*/ overflow-x:auto; overflow-y: auto; } /*增強的使用者介面設計*/ #div2{ /*允許使用者改變尺寸 both：都能改 none：預設，不能改 horizontal:能寬度 vertical:能高度 inherit：像爸爸*/ /*需要和overfolw或overfolw-x，overfolw-y一起使用，且不能設定為visible*/ resize: both; /*外輪廓線*/ outline: #EA171B; /*派生屬性*/ /*輪廓寬度 thin metium thick 或者可以直接上數，不允許為負值 inherit*/ outline-width: medium; /*輪廓顏色 直接顏色值 invert：與背景色相反 inherit*/ outline-color: aqua; /*輪廓與元素邊界的距離*/ outline-offset: -2px; /*輪廓的風格 dashed虛線 dotted點狀 none預設沒有 solid實線 double雙線條 groove3D凹槽 ridge3D凸槽 inset3D凹邊 outset3D凸邊 inherit*/ outline-style: dashed; /*偽裝appearence noemal正常預設 icon裝成圖示 window裝成視窗 button裝成按鈕 menu裝成選單 field裝成輸入框*/ appearance:button; } #div3 a{ counter-increment: mycounter; /*定義計數器*/ } #div3 a:before{ /* content normal預設不加 none如果有指定的新增內容設定為空 string：文字 counter：計數器 attr（at） at的屬性值 url（別）外部資源 inherit*/ content:counter(mycounter); } #div4 { /*多列屬性columns columns:<column-width>||<column-count> 如果縮小視窗，可能列數和寬度都會變化*/ /*如果只設置column-width，縮小視窗寬度不變，列數變化 如果只設置column-count，縮小視窗列數不變，寬度變化*/ columns:200px 3; column-width：200px; /*auto自動預設 寬度*/ column-count: 3; /*auto預設自動 列數*/ /*列間距column-gap*/ column-gap: 3em; /*normal預設值 數字*/ /*column-rule列分割線 column-rule:[column-rule-width]||[column-rule-style]\\[column-rule-color]*/ /*也可以分別賦值*/ column-rule: 1px solid #CA4245; /*定義橫跨所有列 column-span:1|all all:橫跨所有列 1：只在一列顯示*/ column-span: all; } </style> </head> <body> <!-- span行內的物件,div層內物件,如果div不引用樣式表，相當於p標籤--> 《燼餘錄》像是一個歷經滄桑的老人所寫，<span id="color">但是當時的張愛玲只有23歲。</span>她對自己的冷酷和自私，有一種抽離 <div id="div1"> 這是層的定位演示，心情複雜。這是層的定位演示，心情複雜。這是層的定位演示，心情複雜。這是層的定位演示，心情複雜。這是層的定位演示，心情複雜。這是層的定位演示，心情複雜。這是層的定位演示，心情複雜。這是層的定位演示，心情複雜。這是層的定位演示，心情複雜。這是層的定位演示，心情複雜。這是層的定位演示，心情複雜。這是層的定位演示，心情複雜。這是層的定位演示，心情複雜。這是層的定位演示，心情複雜。這是層的定位演示，心情複雜。這是層的定位演示，心情複雜。這是層的定位演示，心情複雜。這是層的定位演示，心情複雜。 </div> <!--層的疊加，誰先寫的誰在下面--> <!--盒佈局--> <div class="container"> <div>你好</div> <div>你好啊</div> <div>你好啊</div> </div> <div id="div2">增強的使用者介面設計</div> <div id="div3"> <a href="">CSS</a> <a href="">CSS</a> <a href="">CSS</a> <a href="">CSS</a> </div> <div id="div4">多列布局</div> </body> </html>