前端html--margin，border，padding，盒模型
阿新 • • 發佈：2018-11-27
複習 :
1. CSS引入方式
1. 行內樣式
<div style="width:500px;">
2. 文件內嵌
<style>
選擇器{
}
</style>
3. 外鏈檔案
1. 建立外部的.css檔案,通過定義選擇器設定元素樣式
2. <link rel="stylesheet" href="" type="text/css">
2. 選擇器
1. 標籤選擇器
根據標籤名匹配元素
div{
}
2. id選擇器
根據id屬性值匹配元素,id屬性具有唯一性
#id屬性值{}
3. 類選擇器
根據class屬性值匹配元素
.class屬性值{}
4. 群組選擇器
選擇器1,選擇器2{}
5. 後代和子代
選擇器1 選擇器2{}
空格表示匹配後代元素
選擇器1>選擇器2{}
>匹配直接子元素
6. 偽類選擇器
1. 超連結偽類選擇器
:link
:visited
:hover
:active
2. :focus 輸入框獲取焦點時的狀態
7. 選擇器的優先順序看權重
標籤選擇器 1
類選擇器/偽類 10
id選擇器 100
行內樣式 1000
組合選擇器的權重 : 由組成的選擇器權重值相加
div span{} 2
#main .box span{} 100 + 10 + 1
3. 常用CSS屬性
1. width height 設定元素寬高
2. color 文字顏色
3. background-color 背景顏色
4. font-size 字型大小
5. font-weight 字型粗細程度
6. text-decoration 設定文字裝飾線
4. 尺寸與顏色
1. 尺寸單位
1. px 預設單位
2. % 百分比
2. 顏色表示
1. 英文單詞
2. rgb(0,0,0)
3. rgba(255,255,255,1)
4. #fff;
#ffffff; 白色
---------------------------------
Day04
1. HTML元素分類及特點
1. 塊級元素 :
1. 獨佔一行,不與其他元素共行顯示
2. 可以手動設定寬高
3. 預設寬度與父元素保持一致(table除外)
常見塊元素 :
body h1~h6 p div table form ul ol li
2. 行內元素
1. 可以與其他元素共行顯示
2. 預設尺寸由內容多少決定,不能手動設定寬高
常見行內元素 :
span label i b strong u s sub sup a
3. 行內塊元素
1. 可以與其他元素共行顯示
2. 可以手動設定寬高
常見行內塊元素 :
img 表單控制元件
2. HTML標籤巢狀
1. 塊元素中可以巢狀任何型別的元素
特殊情況 :
段落標籤中只能放行內元素和行內塊元素
2. 行內元素只能巢狀行內(塊)元素
3. 內容溢位
塊元素可以手動設定寬高,如果內容超出尺寸範圍,如何處理?
屬性 : overflow
取值 :
1. visible 預設值,表示溢位內容可見
2. hidden 溢位內容隱藏
3. scroll 為元素新增水平和垂直方向的滾動條,不管內容
有沒有溢位
4. auto 自動在溢位方向新增可用的滾動條
4. 邊框
CSS中認為所有的元素都是矩形區域
邊框是圍繞元素內容出現的線條樣式
1. 簡寫屬性
簡寫屬性 : border
取值 : width style color;
width : 畫素值,表示邊框寬度
style : 邊框樣式,可取 :
solid 實線邊框
dashed 虛線邊框
dotted 點線邊框
double 雙線邊框
color : 顏色值,預設為黑色
特殊用法 :
1. 邊框預設具備3px的寬度,黑色的邊框顏色,邊框樣式
必須指定
et :
border:solid;
2. 表單按鈕,可以取消邊框
border:none;
2. 單邊框設定
單獨設定元素上右下左四個方向的邊框
屬性 :
1. border-top : 上邊框
2. border-right : 右邊框
3. border-bottom : 下邊框
4. border-left : 左邊框
取值 : width style color;
3. 網頁三角標製作
1. 元素的width height 設定為0
2. 涉及三角標,必須由邊框拼接組成
3. 設定四個方向的邊框,寬度保持一致
4. 通過顏色控制三角標顯示
透明色可使用transparent表示
4. 圓角邊框
屬性 : border-radius
取值 : px / % 百分比單位依據元素尺寸計算
取值情況 :
1. 取一個值
border-radius : 5px;
border-radius : 50%;
一個值表示上右下左四個角圓角程度相同,最大值
取到50%,元素形狀會發生變化
2. 取兩個值
border-radius : 30px 50px;
第一個值表示 上下 的圓角程度,
第二個值表示 左右 的圓角程度.
3. 取三個值
border-radius : 10px 20px 30px;
三個值分別對應上右下三個角,
缺少的第四個值與第二個值保持一致
4. 取四個值
分別代表上右下左四個角的半徑值
單獨為一個角或兩個角設定半徑時,可以大於50%,
但是四個角不能同時大於50%
5. 盒陰影
為元素新增陰影效果
屬性 : box-shadow
取值 :
offset-x 陰影的水平偏移距離
offset-y 陰影的垂直偏移距離,取畫素值
blur 陰影的模糊程度,取畫素值,越大越模糊
spread 陰影的延伸距離,取畫素值(可省略)
color 陰影顏色,預設為黑色
瀏覽器的座標系 :
不管是瀏覽器視窗,還是元素本身,都包含座標系,
預設以左上角為原點(0,0),向右,向下分別為X和Y
軸的正方向.
正值代表正方向,負值代表負方向
5. 盒模型/框模型
1. 介紹
CSS中,認為所有元素皆為框
1. 元素在文件中的最終佔據尺寸是由 : 內容尺寸,
內邊距大小,邊框,外邊距大小決定的
2. 計算元素最終佔據的大小
在標準盒模型下:
最終寬度 = width + 左右內邊距 + 左右邊框 + 左右外邊距
最終高度 = height+上下內邊距+上下邊框+上下外邊距
其他盒模型元素尺寸的計算(表單元素)
元素設定的width,height表示包含內容,內邊距和邊框
在內的總寬度或總高度
最終寬度 = width + 左右外邊距
最終高度 = height + 上下外邊距
2. 外邊距
1. 什麼是外邊距 :
元素與元素之間的距離
2. 簡寫屬性
margin 表示外邊距
取值 : 畫素值
取值情況 :
1. margin: 10px; 上右下左四個方向新增10px外邊距
2. margin : 10px 20px;
上下外邊距為10px,左右外邊距為20px;
3. margin : 10px 20px 30px;
左右保持一致,為20px
4. margin: 10px 20px 30px 40px;
分別設定四個方向的外邊距
特殊用法 :
1. margin :0; 清除元素預設外邊距
2. 左右外邊距可以使用auto,實現元素水平居中
3. 外邊距可以取負值,參照瀏覽器座標系,可以
實現元素位置的微調
3. 單獨設定四個方向的外邊距
屬性 :
margin-top
margin-right
margin-bottom
margin-left
取值 : 只給一個值
4. 外邊距合併
1. 垂直方向上的外邊距(塊元素) :
1. margin-top
問題 : 給子元素新增的margin-top,作用於父元素上
解決 :
1. 為父元素新增上邊框
2. 為父元素設定padding-top 頂部內邊距
padding-top : 0.1px;
3. 為父元素新增overflow:hidden;
2. margin-bottom
兩個塊元素分別設定margin-bottom,margin-top,
最終元素之間的距離取較大的值
2. 水平方向上的外邊距(行內元素):
預設行內元素水平方向上的外邊距會疊加顯示
5. 預設具有外邊距的元素 :
body,h1,h2,h3,h4,h5,h6,p,ul,ol{
margin:0;
}
3. 內邊距
1. 什麼是內邊距
內邊距指元素內容與邊框之間的距離
2. 簡寫屬性
屬性 : padding
取值 : 畫素值
取值情況 :
padding:10px;
設定上右下左四個方向上內容與邊框之間為10px
padding:10px 20px;
設定上下內邊距為10px,左右內邊距為20px;
padding:10px 20px 30px;
設定左右內邊距為20px
padding:10px 20px 30px 40px;
分別設定上右下左四個方向的內邊距
3. 單獨設定某個方向的內邊距
屬性 :
padding-top
padding-right
padding-bottom
padding-left
取值 : 給一個值
4. 不同元素型別對盒模型屬性的支援情況
1. 塊元素完全支援盒模型屬性
2. 行內元素不完全支援盒模型屬性
(margin-top/margin-bottom)
5. 預設帶有內邊距的元素
ul ol 表單元素(文字框,按鈕)
4. box-sizing
作用 : 指定盒模型的計算方式
取值 :
1. content-box 預設值
元素的width,height屬性只設置內容尺寸,最終
在文件中佔據的尺寸為margin border padding
width/height 累加得到
2. border-box
元素的width,height屬性設定包含邊框在內的區域
大小,一旦元素設定內邊距和邊框,會壓縮內容顯示
區域
元素最終在文件中佔據的尺寸由margin和width/height
相加得到
注意 :
表單按鈕預設採用border-box計算尺寸