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 內容 可以放文字,也可以放盒子 內邊距 邊框與內容的距離 屬性 ...