=============================================================================================盒子模型1.background 1.1background-colorbackground-image: url("");background-repeatbackground-size: （x軸的比例 y軸的比例）background-positionbackground-attachment:fixed;(背景圖固定不滾動)1.2 復合寫法background: color iamge position repeat;2.border2.1復合寫法border: border-width border-style border-color;2.2邊框圓角border-radius3.paddingpadding：20px 10px; 上下邊距:20px 左右邊距：10pxpadding: 20px 30px 4px; 上 左右 下padding：10px 20px 30px 40px; 上 右 下 左4.margin4.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-repeatborder: border-width border-style border-colorpadding: 上 右 下 左margin: 上右 下 左font: font-style font-weight font-size/line-height font-family;=============================================================================================標簽1.常見的標簽title標簽 雙標簽語義：網頁標題 權重最大div標簽雙標簽語義：無意義h標簽雙標簽語義：標題默認樣式：font-size font-weight margin h1權重最大 h2次之p標簽雙標簽語義：段落默認樣式： marginp標簽再嵌套不要包含塊元素的標簽ul標簽語義：無序列表默認樣式：margin padding-left list-style-typeli標簽語義：列表項默認樣式：list-style-type;ol標簽語義：有序列表默認樣式：同uldl標簽字典標簽語義：自定義列表默認樣式：無dt標簽語義：列表標題默認樣式：無dd標簽語義：列表說明默認樣式：margin-left小結快屬性標簽的特性：1.默認父級100%的寬2.支持所有css樣式3.獨占一行=============================================================================================內聯屬性的標簽內鏈屬性標簽特性：1.同屬性的標簽排在一排2.內容撐開寬度3.不支持寬高，不支持上下的padding和margin4.代碼換行被解析 間距的大小取決于父級的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的效果)(未完待續......)

總結

以上是生活随笔為你收集整理的html/css学习笔记（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。