逆戰班學習 盒模型的相關介紹及作用

2021-10-03 04:49:34 字數 1201 閱讀 6304

盒模型的概念

盒模型是css布局的基石,它規定了網頁元素如何顯示以及元素間相互關係。css定義所有的元素都可以擁有像盒子一樣的外形和平面空間。即都包含內容區、補白(填充)、邊框、邊界(外邊距)這就是盒模型。

作用:規定了網頁元素如何顯示以及元素間相互關係

舉個例子

content(我愛學習)+padding(紅色區域)+border(黑色邊框區)+margin(白色外邊界區)

padding的作用:用來控制父元素和子元素之間的位置關係;

padding的用法:

padding-top 上填充

padding-right 右填充

padding-bottom 下填充

padding-left 左填充

css樣式表裡padding值的寫法:

padding:1 2 3 4

1、上 2、右 3、下 4、左

padding:1 2 3

1、上 2、左和右 3、下

padding:1 2

1、上和下 2、左和右

padding:1

1、上 右 下 左

注意:

1.新增了padding值之後,padding值會把元素原有的大小撐大; 如果讓元素原本大小不變得話,需要在元素的寬高上減掉所加的padding;

2.padding屬性對背景 是不起作用的,可以說背景的位置,是不受padding的影響的。

margin的作用:

作用:控制同輩元素之間的位置關係。

特點: margin是現在是在元素邊框以外的空白區

margin的寫法同padding。

css樣式表如何用**實現:

HTML 盒模型 逆戰班

對於前端專案是css布局的基石,它主要作用是控制元素和元素之間,或者元素和內容之間的位置關係,是重要的組成部分。乙個盒子主要有五大屬性分別為width height padding border margin。分別含義 width指的是內容的寬度 height指的是內容的高度 padding內邊距 ...

千鋒逆戰班,陳強 在千鋒「逆戰」學習第 22天

string字串的常用方法 1.tostring 返回物件本身 2.substring 陣列的下標 返回乙個新的字串,它是此字串的乙個子字串。從括號定義的下標開始 3.touppercase 將字串中的字母全部變成大寫 4.tolawercase 將字串中的字母全部變成小寫 5.trim 去掉字串前...

千鋒逆戰班,陳強 在千鋒「逆戰」學習第 23天

一 bigdecimal類 用於處理高精度計算 的常用方法 1.bigdecimal常用的幾個構造方法 1 bigdecimal int 將int表示形式轉換成bigdecimal物件 2 bigdecimal string 將字串表示形式轉換成bigdecimal物件 3 bigdecimal d...