<!-- pre{ width: 900px; color:blue; font-weight: bolder; } --> 盒子模型 1.background 1.1 background-color background-image: url(""); background-repeat bac ...
=============================================================================================
盒子模型
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的效果)
(未完待續......)
