基礎選擇器
*(統配選擇器):html,body,body下用於顯示的標籤
div(標籤選擇器):該標籤名對應的所有該標籤
.(class選擇器)(class="div"):;類名為div的所有標籤
#(id選擇器)(id="div"):id名為div的唯一標籤
實際開發中,盡量少用或不用標籤名來作為選擇器
標籤名作為選擇器一般在該標籤最內層
內聯和外聯,相同屬性採用下者覆蓋上者,不同屬性疊加
行間式屬於邏輯最下方,相同的屬性一定會覆蓋內聯和外聯
選擇器的優先順序
理解:控制範圍越精確,優先順序越高,所設定的樣式就會覆蓋優先順序低的相同屬性樣式
結論:優先順序順序 通配《標籤!important書寫在屬性值後;前
!important優先順序要強於行間式,在屬性值與;之間設定
行間式優先順序要高於內外連所有選擇器的優先順序,但是不能高於!important
長度和顏色:
長度單位:px,mm,cm,em,rem,vw,vh,in
顏色設定方式:
1.顏色單詞
2.#000000-#ffffff(#abc == #aabbcc)
3.rgb(0-255,0-255,0-255)|rgba(0-255,0-255,0-255,0-1)
background-color:rgba(255,0,0,0.5);
顯示方式display:
display:inline;
1.同行顯示
2.只支援部分css樣式(不支援寬高)
3.寬高由文字內容決定
display:block;
1.異行顯示
2.支援所有css樣式
3.設定了寬高就採用設定的值,擁有預設值
display:inline-block;
1.同行顯示
2.支援所有css樣式
3.設定了寬高就採用設定的值
標籤的顯示方式就是用display屬性控制
有些標籤支援寬高,有些標籤不支援
有些標籤同行顯示,有些標籤異行顯示(獨佔一行)
有些標籤有結束標誌,有些標籤沒有結束標籤
單標籤:br|hr|img|meta|link,功能具體,不需要內容,設定為單標籤,單標籤結束符在標籤尾部,可以省略(主功能)
雙標籤:h1|p|span|div,具有子標籤,包含內容,設定為雙標籤,雙標籤首尾分離(主內容)
巢狀關係:
頁面就是由標籤一層層巢狀關係形成
巢狀關係由一定的規則display: block;
1.inline-block型別不建議巢狀任意標籤,所以系統的inline-block都設計成了單標籤
2.inline型別之巢狀inline型別的標籤
3.block型別可以巢狀任意型別標籤
inline巢狀block和inline-block,不起任何作用,所以只能巢狀inline
inline-block可以巢狀其他任何型別標籤,但一定要結合vertical-align屬性操作,左右還有一空格間距
vetical-align: middle;
baseline:文字底端對齊(預設值)
top:標籤頂端對齊
middle:標籤中線對齊
bottom:標籤底端對齊
inline-block布局會受內部的文字影響(文字底端對齊)
盒模型:
盒模型由四部分組成:margin+border+padding+content
1.margin外邊距,控制盒子的位置(布局),通過左和上控制自身位置,通過下右影響兄弟盒子位置(佔區域)
2.border:邊框,樣式/寬度/顏色(solid實線 dashed虛線 dotted點狀線)
3.padding:內邊距,從顯示角度控制文字的顯示區域
4.content:內容區域,由寬 x 高組成
padding: 10px 10px 10px 10px;
/*border-style: solid;*/
/*border-width: 10px;*/
/*border-color: red;*/
/*transparent透明色*/
border: blue dashed 20px;
padding: 10px 0 0 10px;
width: 190px;
height: 190px;
/*margin-left: -80px;*/
/*margin-top: -80px;*/
margin-bottom: 100px;
1.margin,padding:起始為上,順時針依次賦值,不足邊取對邊
2.要做到文字內移,設定padding,如果又想顯示區域不變,相應減少content
盒模型布局:
1.上下兩個盒子的margin-bottom和margin-top功能相同,同時出現,取大值
2.第乙個顯示區域的子級會和父級聯動(margin-top重疊),取大值
解決方法:
1.父級設定border-top
2.父級設定padding-top
前端第二天
1.表單標籤 form 是乙個容器標籤，本身單獨用沒有意義，一般需要結合表單相關的標籤 input select textarea 它可以對表單標籤中所有使用者資訊收集相關的標籤的內容進行整體的重置和提交。action method form 2.input input是表單相關標籤，可以放在for...
前端學習第二天
1.what is web 語義化 假設我們世界中有乙隻神奇小爬蟲，這個小爬蟲非常神奇，我們看不到它，同時它爬行的速度非常快，它可以在世界上所有的計算機之間爬來爬去，爬過的地方都會留下一條線，這條線就是網線。當小爬蟲爬過了大部分的計算機之後，這些計算機就組成了網路，而爬蟲的速度可以理解成網速。小爬蟲...
前端學習第二天
一 html文字標籤 hn,span,p html中標題 heading 分為6級，分別是 h1 h2 h3 h4 h5 h6 h1 h6標籤具有和p標籤一樣的特徵 佔滿整行，上下換行 普通文字標籤span 在html用於顯示文字的基本標籤對是。雖然不編寫任何標籤，將文字直接寫於標籤對內也能正常顯示...