學習 day4 html 盒子模型

?xiaoxiao, 發布于2019-04-23 11:44 / 458人閱讀

盒子模型

1.框模型

框：頁面上所有元素都可以稱為“框”

框模型：（BOX Model）,又稱盒子模型

定義框處理元素內容、內邊距padding、外邊距margin、邊框的樣式border

外邊距margin

margin-方向:
?? ??? ?margin-left:
?? ??? ?margin-right:
?? ??? ?margin-top:
?? ??? ?margin-bottom:

不定義方向?一個值默認四個方向一樣；? 兩個值? 第一個? 左右?? 第二個? 上下；三個不常見；? 四個值? 左? 上?? 右??? 下?

左右外邊距設置為auto時，當前的塊級元素會居中顯示

內邊距padding

padding-方向:

??????? padding-left
?? ???? padding-right:
?? ???? padding-top:
?? ???? padding-bottom:

不定義方向?一個值默認四個方向一樣；? 兩個值? 第一個? 左右?? 第二個? 上下；三個不常見；? 四個值? 左? 上?? 右??? 下

邊框的樣式border

border-方向:

? 　　border-left
?? ???? border-right:
?? ???? border-top:
?? ???? border-bottom:

不定義方向?一個值默認四個方向一樣；? 兩個值? 第一個? 左右?? 第二個? 上下；三個不常見；? 四個值? 左? 上?? 右??? 下

注意：
1.有些塊級元素會存在默認外邊距?? 如? body?? h1~h6?? p
2、垂直外邊距合并
?? ?兩個垂直外邊距相遇時，將會合成一個外邊距。最終外邊距的值是兩者中邊距較大的的值。

3、背景圖片
?? ?屬性：background-image
?? ?取值：url(圖像路徑)
?? ??? ?background-image:url("");

1、背景重復
?? ??? ?默認情況，背景圖會在水平和垂直兩個方向都出現重復的效果(平鋪)
?? ??? ?屬性：background-repeat
?? ??? ?取值：
?? ??? ?repeat ：默認值，水平垂直平鋪
?? ??? ?repeat-x : 水平平鋪
?? ??? ?repeat-y : 垂直平鋪
?? ??? ?no-repeat : 不平鋪（用的最多）
2、背景圖片固定
?? ?屬性：background-attachment
?? ?取值：

?? ?fixed，背景圖像固定
??? 3、背景定位
?? ?改變背景圖像在元素中的位置
?? ?屬性：background-position
?? ?取值：
?? ?x y :x表示水平方向移動距離，+向右，-向左，y表示垂直方向移動距離，+向下，-向上
?? ?x% y% :
?? ?0% 0% : 顯示在元素的左上方
?? ?100% 100% : 顯示在元素的右下方
?? ?50% 50% : 居中
?? ?left :靠左
?? ?right:靠右
?? ?center :將元素顯示在水平或垂直方向的中間
?? ?top:靠上
?? ?bottom:靠下
?? ?background-position:left top;
?? ?background-position:top left;
?? ?background-position:center;

4、文本格式化????
?? ?
?? ?1、指定字體
?? ?font-family：選擇字體格式
?? ?font-family:"microsoft yahei","arial","verdana";
?? ?2、字體大小
?? ?font-size:value;??
?? ?
?? ?font-size:12px;
?? ?3、字體加粗????? normal正常??
?? ?font-weight:normal / bold ; ?
?? ?400 - 900
?? ?4、字體樣式(斜體)?? i
?? ?font-style:normal/italic;
?? ?5、小型大寫字母?? font-variant字體型狀
?? ?font-variant:normal/small-caps;
?? ?6、字體屬性
?? ?font:font-style font-variant font-weight font-size font-family;
?? ?常用方式：
?? ?font:font-size font-family;
?? ?font:12px "微軟雅黑",arial,verdana;

云服務器 GPU云服務器盒子模型盒子 html html 盒子邊框 html 盒子劇中

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1075.html

100天搞定機器學習|Day4-6 邏輯回歸

摘要：而邏輯回歸對于這樣的問題會更加合適。也就是說，邏輯回歸是用來得到樣本屬于某個分類的概率。這樣構造的損失函數是合理的，并且它還是一個凸函數，十分方便求得參數，使得損失函數達到最小。然后導入邏輯回歸類。邏輯回歸avik-jain介紹的不是特別詳細，下面再嘮叨一遍這個算法。 1.模型在分類問題中，比如判斷郵件是否為垃圾郵件，判斷腫瘤是否為陽性，目標變量是離散的，只有兩種取值，通常會編碼為...

qujian 2019-07-31 11:31 評論0 收藏0
盒子模型淺析

摘要：上篇文章總結了塊級元素和行內元素這篇文章總結了有關盒子模型的知識，助于梳理知識首先，什么是盒子模型我們知道，文檔中，基本上每個元素都可以看作一個盒子，我們稱之為盒子模型。在盒子模型中我們設置的指的是盒子真實占有寬高即如的寬高。上篇文章總結了塊級元素和行內元素這篇文章總結了有關盒子模型的知識，助于梳理知識首先，什么是盒子模型我們知道，html文檔中，基本上每個元素都可以看作一個盒子，我們稱...

番茄西紅柿 2019-04-23 13:38 評論0 收藏0
DIV+CSS學習筆記總結篇

摘要：每個列表項始于標簽。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理。標簽的屬性應當與相關元素的屬性相同。姓名性別姓名性別單元格標簽可以定義表格中的一個單元格，表示一個單元格。第一部分 HTML 第一章職業規劃和前景職業方向規劃定位： web前端開發工程師 web網站架構師自己創業轉崗管理或其他 web前端開發的前景展望：未來IT行業企業需求...

iOS122 2019-08-29 11:13 評論0 收藏0
DIV+CSS學習筆記總結篇

摘要：每個列表項始于標簽。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理。標簽的屬性應當與相關元素的屬性相同。姓名性別姓名性別單元格標簽可以定義表格中的一個單元格，表示一個單元格。第一部分 HTML 第一章職業規劃和前景職業方向規劃定位： web前端開發工程師 web網站架構師自己創業轉崗管理或其他 web前端開發的前景展望：未來IT行業企業需求...

HackerShell 2019-08-01 15:41 評論0 收藏0