html/css學習筆記（一），htmlcss學習筆記

html/css學習筆記（一），htmlcss學習筆記

    =============================================================================================    盒子模型    1.background         1.1            background-color            background-image: url("");            background-repeat            background-size: （x軸的比例 y軸的比例）            background-position            background-attachment:fixed;(背景圖固定不滾動)        1.2 複合寫法            background: color iamge position repeat;    2.border        2.1複合寫法            border: border-width border-style border-color;        2.2邊框圓角            border-radius    3.padding        padding：20px 10px;  上下邊距:20px 左右邊距：10px        padding: 20px 30px 4px; 上  左右 下        padding：10px 20px 30px 40px; 上 右 下 左    4.margin        4.1寫法和padding類似        4.2注意            a.子級margin-top特定情況下會穿透父級                規避方法:   1.給父級加邊框                            2.給父級加voerflow:hidden;                            3.將margin-top用父級padding-top替代。            b.兄弟關係的margin-top和margin-bottom會疊壓    5.文本設定        font-size 文字大小        font-family  字型        color  文字顏色        line-height 文字行高        text-align 文本對齊        text-indent:（像素/em）;首行縮排        font-weight 文字著重 (normal bold bolder)        font-style 文字傾斜(normal italic oblique(斜體) )        font-decoration 文本修飾 (none underline line-through)        letter-spacing 字母間距(px)        word-space 單詞間距(以空格為解析單位)    小結        A.盒子模型 url("./img/盒子模型.jpg");                B.常見複合屬性            background: background-color background-iamge background-position background-repeat            border: border-width border-style border-color            padding: 上 右 下 左            margin: 上右 下 左            font: font-style font-weight font-size/line-height font-family;    =============================================================================================    標籤    1.常見的標籤        title標籤             雙標籤            語義：網頁標題 權重最大        div標籤            雙標籤            語義：無意義        h標籤            雙標籤            語義：標題            預設樣式：font-size font-weight margin             h1權重最大 h2次之        p標籤            雙標籤            語義：段落            預設樣式： margin            p標籤再嵌套不要包含塊元素的標籤        ul標籤            語義：無序列表            預設樣式：margin padding-left list-style-type        li標籤            語義：清單項目            預設樣式：list-style-type;        ol標籤            語義：有序列表            預設樣式：同ul        dl標籤            字典標籤            語義：自訂欄表            預設樣式：無        dt標籤            語義：列表標題            預設樣式：無        dd標籤            語義：列表說明            預設樣式：margin-left    小結        快屬性標籤的特性：            1.預設父級100%的寬            2.支援所有css樣式            3.獨佔一行    =============================================================================================    內聯屬性的標籤        內鏈屬性標籤特性：            1.同屬性的標籤排在一排            2.內容撐開寬度            3.不支援寬高，不支援上下的padding和margin            4.代碼換行被解析 間距的大小取決於父級的font-size的大小        span標籤            語義：無意義        strong標籤            語義：強調(加粗)             預設樣式：font-weight 權重比較高        em標籤             語義：強調(斜體)             預設樣式：font-style 權重比較高        a標籤            語義：超連結            預設樣式：color text-decoration cursor；            註：                target="_self"(預設)當前頁開啟 target="_blank"新視窗開啟                herf屬性：                    1.如果要串連網址，一定要加http://                    2.#代表串連到當前頁面    內聯塊屬性標籤        特性：            1.同屬性的標籤排在一排            2.內容撐開寬度            3.支援所有css的樣式            4.代碼換行被解析 間距大小取決於父級的font-size大小        img標籤            單標籤            語義：圖片            預設樣式：低版本瀏覽器中有預設邊框    小結        標籤類型的轉換            顯示為無：display：none;            塊屬性： display：block;            內鏈屬性                內聯：display：inline;                內聯塊：display：inline-block;    =============================================================================================    浮動的樣式和特性        浮動的特性            1.浮動的元素排在同一排            2.浮動的元素內容撐開寬度            3.浮動的元素支援所有css樣式            4.浮動的元素脫離文檔流            5.浮動的元素提升層級半級(屬性蓋住內容溢出，可做文字環繞div的效果)                                                                                    (未完待續......)