1. 程式人生 > >html與css學習2

html與css學習2

我胡漢三又回來糾結這兩個玩意了。這兩個東西真是越看越有東西,而且真的是,做專案時才知道自己小瞧他們了。

前端:結構(html)+表現(css)+行為(js)

好的程式碼:各自負責各自的,儘量寫規範,別雜糅在一起。

1.html標籤更多關注的是語義,至於樣式css都可以去改

2.元素分為塊元素與內聯元素(span,a,img,iframe)

3.span標籤主要用來給包住文字的,方便設定樣式

4.偽類選擇器:
    超連結:    a:link(普通)    a:hover(滑鼠放上去)    a:active(被點選時)    a:visited(訪問過)

   hover和acitve也可以對其他元素使用

5.選擇器的優先順序:內聯>id>class>元素>*>繼承來的.

6.!important 該樣式獲得無窮大優先順序(儘量別用)

7.設定右下外邊距會改變其他元素的位置,設定左上邊距會改變自身的位置

8.垂直外邊距的重疊:在網頁中,垂直方向的相鄰外邊距,會發生外邊距重疊(取最大值而不是取和)

9.float是一個很有意思的東西,還有文件流的概念,脫離文件流

10.解決高度塌陷的問題:clear最好,在高度塌陷的父元素最後加一個空白的div,設定clear

   .box1:after{
        content:"",
        display:block,
        clear:both,
    }

也可以直接給父元素:overflow:hidden

11.行高與父元素的高度一樣,就可以垂直居中

12.表格有意思的一段css

table{
    width: 200px;
    border-collapse: collapse;
}
td{
    border:1px solid black;
}
    隔行換色:
    tr:nth-child(odd){
    background-color: aquamarine;
}
    tr:hover{
        background-color: red;
    }