CSS(六) 盒子模型(css學習重點之一)

2021-10-05 11:54:20 字數 1798 閱讀 7684

css學習三大重點:css 盒子模型 、浮動、定位

盒子模型有元素的內容、邊框(border)、內邊距(padding)、和外邊距(margin)組成。
border 分為   border-width || border-style || border-color
屬性

作用border-width

定義邊框粗細,單位是px

border-style

邊框的樣式

border-color

邊框顏色

border : border-width || border-style || border-color 

例如: border: 1px solid red; 沒有順序

上邊框

下邊框左邊框

右邊框border-top-style:樣式;

border-bottom-style:樣式;

border-left-style:樣式;

border-right-style:樣式;

border-top-width:寬度;

border- bottom-width:寬度;

border-left-width:寬度;

border-right-width:寬度;

border-top-color:顏色;

border- bottom-color:顏色;

border-left-color:顏色;

border-right-color:顏色;

border-top:寬度 樣式 顏色;

border-bottom:寬度 樣式 顏色;

border-left:寬度 樣式 顏色;

border-right:寬度 樣式 顏色;

padding: 指 邊框與內容之間的距離。
設定:屬性

作用padding-left

左內邊距

padding-right

右內邊距

padding-top

上內邊距

padding-bottom

下內邊距

簡寫:

值的個數 表達意思

margin : 控制盒子和盒子之間的距離
設定:屬性

作用margin-left

左外邊距

margin-right

右外邊距

margin-top

上外邊距

margin-bottom

下外邊距

可以讓乙個塊級盒子實現水平居中必須:

為了更靈活方便地控制網頁中的元素,製作網頁時,我們需要將元素的缺省內外邊距清除:

使用margin定義塊元素的垂直外邊距時,可能會出現外邊距的合併

對於兩個巢狀關係塊元素,如果父元素沒有上內邊距及邊框

建議可以:

優先使用寬度(width)其次 使用內邊距(padding)再次使用外邊距(margin)

width > padding > margin

盒子模型(CSS重點)

其實,css就三個大模組 盒子模型 浮動 定位,其餘的都是細節。要求這三部分,無論如何也要學的非常精通。所謂盒子模型就是把html頁面中的元素看作是乙個矩形的盒子,也就是乙個盛裝內容的容器。每個矩形都由元素的內容 內邊距 padding 邊框 border 和外邊距 margin 組成。border...

盒子模型(CSS重點)

大致了解盒子模型 把html頁面中的元素看作是乙個矩形的盒子,也就是乙個盛裝內容的容器。每個矩形都是由 元素的內容 內邊距 padding 邊框 border 和外邊距 margin 組成 2.1盒子邊框 border 語法 border border width border style bord...

CSS 盒子模型(重點)

屬性 border width border style border color 簡寫 border 1px solid red 注意 邊框在盒子外部,會影響盒子的大小 合併相鄰邊框 border collapse collapse 內容 可以放文字,也可以放盒子 內邊距 邊框與內容的距離 屬性 ...