CSS(2)
阿新 • • 發佈：2019-03-16
title 遮蓋 設置 ble cit content 顏色 -c htm 
border 邊框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .d1 { border-color: red; border-style: solid; # 設置邊框 solid實線 none無邊框 dotted點狀虛線邊框 dashed矩形虛線邊框 border-width邊框:1px; border: 5px solid red; # 簡便寫法 按照順序設置邊框寬度,形狀和顏色 border-left:5px solid red # 左邊框 border-right:5px solid red # 右邊框 border-top:5px solid red # 上邊框 border-bottom:5px solid red # 下邊框 border-radius:5% # 改變邊框的角的弧度 height: 200px; width: 200px; } </style> </head> <body> <table class="d1"> <thead> <th>name</th> <th>sex</th> </thead> <tbody> <td>alex</td> <td>male</td> </tbody> </table> </body> </html>
盒子模型
margin 外邊距 元素和元素之間的距離
padding 內邊距 內容和邊框之間的距離
border 圍繞在內邊距和內容外的邊框
centent 盒子的內容,顯示文本和圖像
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .d1,.d2{ border: 5px solid green; padding: 18px 20px; # 上下18px,左右20px height: 100px; # 內容的寬高 width: 100px; background-color: red; # 背景顏色 } </style> </head> <body> <div class="d1"> 我是div1 </div> <div class="d2"> 我是div2 </div> </body> </html>盒子模型
float 浮動
父級標簽塌陷問題:當標簽都處於浮動,父級標簽內的其他標簽會自動頂到上邊,造成被浮動標簽遮蓋的現象
有兩種方式清除浮動,解決父級標簽塌陷問題
1.給父級標簽加高度
2..clearfix:after{
content: ‘‘;
display: block;
clear: left;
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; padding: 0; } .c1{ background-color: red; width: 200px; height: 100px; float: left; } .c2{ background-color: green; width: 200px; height: 140px; float: left; } .c3{ background-color: yellow; width: 400px; height: 100px; } .cc { # 方法: 給父級標簽加高度 height:100px } .clearfix:after{ # 方法二: 使用clearfix.after content: ‘‘; display: block; clear: left; /* 清除左邊的浮動 */ } .cc{ content: ‘‘; display: block; clear: both; } </style> </head> <body> <div class="cc clearfix"> <div class="c1"></div> <div class="c2"></div> </div> <div class="c3"></div> </body> </html>浮動
標簽嵌套
通常塊級元素可以包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其它內聯元素。div是可以包含div的
p標簽比較特殊，不能包含塊級標簽，p標簽也不能包含p標簽。p標簽套p標簽，會自動補全,成為三個p標簽
定位
static 無定位
relative 相對定位 相對於自己原本位置的左上角
absolute 絕對定位 脫離文檔流,會存在父級標簽塌陷問題
fixed 固定定位 不管頁面怎麽滾動,始終固定在一個位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; padding: 0; } .c1,.c3{ height: 100px; width: 100px; background-color: red; } .c2{ height: 100px; width: 100px; background-color: green; position: relative; 相對定位 相對於原來的位置上移100px右移100px top:-100px; left: 100px; } .c3{ position: absolute; 絕對定位 先找距離最近的已定位的祖先元素,如果沒有就根據body,即頁面左上角進行定位 top:40px; left: 40px; } .cc{ margin-left: 200px; cc為c3的父級標簽,cc設置了相對定位,c3在絕地定位時會參照cc的位置 position: relative; } .c4{ height: 1000px; width: 100px; background-color: yellow; } .s1{ height: 40px; line-height: 40px; text-align: center; width: 80px; background-color: pink; position: fixed; 固定定位 left: 40px; bottom: 40px; } .s1 a{ text-decoration: none; # 去除下劃線 } .s1 a:hover{ color:black; # 設置鼠標放上時的樣式 } </style> </head> <body> <a href="" name="top"></a> #埋點 <div class="c1">c1</div> <div class="c2">c2</div> <div class="cc">cc <div class="c3">c3</div> </div> <div class="c4">c4</div> <span class="s1"> <a href="#top">回到頂部</a> </span> </body> </html>定位
z-index 模態對話框
決定誰覆蓋誰 數值大的覆蓋數值小的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .shadow{ background-color: rgba(0,0,0,0.3); /*背景顏色的透明度*/ opacity: 0.3; /*整個標簽內容透明度*/ position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 99; # 設置z-index的值 } .model{ width: 700px; height: 400px; background-color: white; position: fixed; top:50%; left: 50%; margin-left: -350px; # 讓模態對話框位於中心 margin-top: -200px; z-index: 100; # 設置z-index的值,需要比陰影部分的值大,才會覆蓋 } </style> </head> <body> <div class="shadow"></div> <div class="model"></div> <div>我是底層,正常文檔流</div> </body> </html>z-index
圓形頭像示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ height: 80px; width: 80px; border-radius: 50%; # 圓形 border: 1px solid red; overflow: hidden; # 將溢出圓形之外的部分隱藏 } .c1{ height: 80px; width: 100px; border: 1px solid green; overflow: scroll; # 添加滾動條,可以查看溢出的部分 } div img{ max-width: 100%; # 同比例縮放 } </style> </head> <body> <p class="c1"> 猴哥,假雲龍,書記,班長,強,靜哥,蘭妹妹,配哥,大眼萌,棒哥,星哥 </p> <div> <img src="znns.jpg" alt=""> </div> </body> </html>圓形頭像
CSS(2)