整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
Style 對象
Style 對象表示一個個別的樣式聲明。
訪問 Style 對象
Style 對象可以從文檔的頭部區域訪問，或者從指定的 HTML 元素訪問。
從文檔的頭部區域訪問 style 對象：
var x = document.getElementsByTagName("STYLE");嘗試一下
訪問一個指定元素的 style 對象：
var x = document.getElementById("myH1").style;
創建 Style 對象
您可以使用 document.createElement() 方法來創建 <style> 元素：
var x = document.createElement("STYLE");嘗試一下
您也可以設置一個已有元素的 style 屬性：
document.getElementById("myH1").style.color = "red";
Style 對象屬性
"CSS" 列表示該屬性是在哪一個 CSS 版本中定義的（CSS1、CSS2 或 CSS3）。
| 屬性 | 描述 | CSS |
|---|---|---|
| alignContent | 設置或返回當靈活容器內的各項沒有占用所有可用的空間時各項之間的對齊方式（水平）。 | 3 |
| alignItems | 設置或返回靈活容器內的各項的對齊方式。 | 3 |
| alignSelf | 設置或返回靈活容器內被選中項目的對齊方式。 | 3 |
| animation | 是下面除了 animationPlayState 屬性之外的其他屬性的速記屬性。 | 3 |
| animationDelay | 設置或返回動畫何時開始。 | 3 |
| animationDirection | 設置或返回是否循環交替反向播放動畫。 | 3 |
| animationDuration | 設置或返回動畫完成需花費的秒數或毫秒數。 | 3 |
| animationFillMode | 設置或返回當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式。 | 3 |
| animationIterationCount | 設置或返回動畫的播放次數。 | 3 |
| animationName | 設置或返回關鍵幀 @keyframes 動畫的名稱。 | 3 |
| animationTimingFunction | 設置或返回動畫的速度曲線。 | 3 |
| animationPlayState | 設置或返回動畫是運行的還是暫停的。 | 3 |
| background | 設置或返回在一個聲明中的所有背景屬性。 | 1 |
| backgroundAttachment | 設置或返回背景圖像是否固定或隨頁面滾動。 | 1 |
| backgroundColor | 設置或返回元素的背景色。 | 1 |
| backgroundImage | 設置或返回元素的背景圖像。 | 1 |
| backgroundPosition | 設置或返回的背景圖像的起始位置。 | 1 |
| backgroundRepeat | 設置或返回如何重復背景圖像。 | 1 |
| backgroundClip | 設置或返回背景的繪制區域。 | 3 |
| backgroundOrigin | 設置或返回背景圖像的定位區域。 | 3 |
| backgroundSize | 設置或返回背景圖像的大小。 | 3 |
| backfaceVisibility | 設置或返回當一個元素背對屏幕時是否可見。 | 3 |
| border | 設置或返回在一個聲明中的 borderWidth、borderStyle 和 borderColor。 | 1 |
| borderBottom | 設置或返回在一個聲明中的所有 borderBottom* 屬性。 | 1 |
| borderBottomColor | 設置或返回下邊框的顏色。 | 1 |
| borderBottomLeftRadius | 設置或返回左下角邊框的形狀。 | 3 |
| borderBottomRightRadius | 設置或返回右下角邊框的形狀。 | 3 |
| borderBottomStyle | 設置或返回下邊框的樣式。 | 1 |
| borderBottomWidth | 設置或返回下邊框的寬度。 | 1 |
| borderCollapse | 設置或返回表格的邊框是否被折疊為一個單一的邊框。 | 2 |
| borderColor | 設置或返回元素邊框的顏色（最多可以有四個值）。 | 1 |
| borderImage | 一個用于設置或返回所有的 borderImage* 屬性的速記屬性。 | 3 |
| borderImageOutset | 設置或返回邊框圖像區域超出邊界框的量。 | 3 |
| borderImageRepeat | 設置或返回圖像邊框是重復拼接圖塊還是延伸圖塊。 | 3 |
| borderImageSlice | 設置或返回圖像邊框的向內偏移。 | 3 |
| borderImageSource | 設置或返回要作為邊框使用的圖像。 | 3 |
| borderImageWidth | 設置或返回圖像邊框的寬度。 | 3 |
| borderLeft | 設置或返回在一個聲明中的所有 borderLeft* 屬性。 | 1 |
| borderLeftColor | 設置或返回左邊框的顏色。 | 1 |
| borderLeftStyle | 設置或返回左邊框的樣式。 | 1 |
| borderLeftWidth | 設置或返回左邊框的寬度。 | 1 |
| borderRadius | 一個用于設置或返回四個 border*Radius 屬性的速記屬性。 | 3 |
| borderRight | 設置或返回在一個聲明中的所有 borderRight* 屬性。 | 1 |
| borderRightColor | 設置或返回右邊框的顏色。 | 1 |
| borderRightStyle | 設置或返回右邊框的樣式。 | 1 |
| borderRightWidth | 設置或返回右邊框的寬度。 | 1 |
| borderSpacing | 設置或返回表格中單元格之間的距離。 | 2 |
| borderStyle | 設置或返回元素邊框的樣式（最多可以有四個值）。 | 1 |
| borderTop | 設置或返回在一個聲明中的所有 borderTop* 屬性。 | 1 |
| borderTopColor | 設置或返回上邊框的顏色。 | 1 |
| borderTopLeftRadius | 設置或返回左上角邊框的形狀。 | 3 |
| borderTopRightRadius | 設置或返回右上角邊框的形狀。 | 3 |
| borderTopStyle | 設置或返回上邊框的樣式。 | 1 |
| borderTopWidth | 設置或返回上邊框的寬度。 | 1 |
| borderWidth | 設置或返回元素邊框的寬度（最多可以有四個值）。 | 1 |
| bottom | 設置或返回定位元素的底部位置。 | 2 |
| boxDecorationBreak | 設置或返回分頁處元素的背景和邊框行為，或者換行處內聯元素的背景和邊框行為。 | 3 |
| boxShadow | 設置或返回元素的下拉陰影。 | 3 |
| boxSizing | 允許您以特定的方式定義匹配某個區域的特定元素。 | 3 |
| captionSide | 設置或返回表格標題的位置。 | 2 |
| clear | 設置或返回元素相對浮動對象的位置。 | 1 |
| clip | 設置或返回定位元素的可見部分。 | 2 |
| color | 設置或返回文本的顏色。 | 1 |
| columnCount | 設置或返回元素應該被劃分的列數。 | 3 |
| columnFill | 設置或返回如何填充列。 | 3 |
| columnGap | 設置或返回列之間的間隔。 | 3 |
| columnRule | 一個用于設置或返回所有的 columnRule* 屬性的速記屬性。 | 3 |
| columnRuleColor | 設置或返回列之間的顏色規則。 | 3 |
| columnRuleStyle | 設置或返回列之間的樣式規則。 | 3 |
| columnRuleWidth | 設置或返回列之間的寬度規則。 | 3 |
| columns | 一個用于設置或返回 columnWidth 和 columnCount 的速記屬性。 | 3 |
| columnSpan | 設置或返回一個元素應橫跨多少列。 | 3 |
| columnWidth | 設置或返回列的寬度。 | 3 |
| content | 與 :before 和 :after 偽元素一起使用，來插入生成的內容。 | 2 |
| counterIncrement | 增加一個或多個計數器。 | 2 |
| counterReset | 創建或重置一個或多個計數器。 | 2 |
| cursor | 設置或返回鼠標指針顯示的光標類型。 | 2 |
| direction | 設置或返回文本的方向。 | 2 |
| display | 設置或返回元素的顯示類型。 | 1 |
| emptyCells | 設置或返回是否顯示表格中的空單元格的邊框和背景。 | 2 |
| filter | 設置或返回圖片濾鏡(可視效果，如：高斯模糊與飽和度) | 3 |
| flex | 相對于同一容器其他靈活的項目，設置或返回項目的長度。 | 3 |
| flexBasis | 設置或靈活項目的初始長度。 | 3 |
| flexDirection | 設置或返回靈活項目的方向。 | 3 |
| flexFlow | 是 flexDirection 和 flexWrap 屬性的速記屬性。 | 3 |
| flexGrow | 設置或返回項目將相對于同一容器內其他靈活的項目進行擴展的量。 | 3 |
| flexShrink | 設置或返回項目將相對于同一容器內其他靈活的項目進行收縮的量。 | 3 |
| flexWrap | 設置或返回靈活項目是否拆行或拆列。 | 3 |
| cssFloat | 設置或返回元素的水平對齊方式。 | 1 |
| font | 設置或返回一個聲明中的 fontStyle、fontVariant、fontWeight、fontSize、lineHeight 和 fontFamily。 | 1 |
| fontFamily | 設置或返回文本的字體。 | 1 |
| fontSize | 設置或返回文本的字體尺寸。 | 1 |
| fontStyle | 設置或返回字體樣式是否是 normal（正常的）、italic（斜體）或 oblique（傾斜的）。 | 1 |
| fontVariant | 設置或返回是否以小型大寫字母顯示字體。 | 1 |
| fontWeight | 設置或返回字體的粗細。 | 1 |
| fontSizeAdjust | 當使用備用字體時，確保文本的可讀性。 | 3 |
| fontStretch | 從字體庫中選擇一種正常的、濃縮的或擴大的字體。 | 3 |
| hangingPunctuation | 規定一個標點符號是否可以放置在線框外。 | 3 |
| height | 設置或返回元素的高度。 | 1 |
| hyphens | 設置如何拆分單詞來提高段落布局。 | 3 |
| icon | 向作者提供為一個帶有等價于圖標的元素定義樣式的功能。 | 3 |
| imageOrientation | 規定一個用戶代理應用到圖像上的順時針方向的旋轉。 | 3 |
| justifyContent | 設置或返回當靈活容器內的各項沒有占用所有可用的空間時各項之間的對齊方式（垂直）。 | 3 |
| left | 設置或返回定位元素的左部位置。 | 2 |
| letterSpacing | 設置或返回文本中字符之間的空間。 | 1 |
| lineHeight | 設置或返回在文本中行之間的距離。 | 1 |
| listStyle | 設置或返回一個聲明中的 listStyleImage、listStylePosition 和 listStyleType。 | 1 |
| listStyleImage | 設置或返回作為列表項標記的圖像。 | 1 |
| listStylePosition | 設置或返回列表項標記的位置。 | 1 |
| listStyleType | 設置或返回列表項標記的類型。 | 1 |
| margin | 設置或返回元素的外邊距（最多可以有四個值）。 | 1 |
| marginBottom | 設置或返回元素的的下外邊距。 | 1 |
| marginLeft | 設置或返回元素的左外邊距。 | 1 |
| marginRight | 設置或返回元素的右外邊距。 | 1 |
| marginTop | 設置或返回元素的上外邊距。 | 1 |
| maxHeight | 設置或返回元素的最大高度。 | 2 |
| maxWidth | 設置或返回元素的最大寬度。 | 2 |
| minHeight | 設置或返回元素的最小高度。 | 2 |
| minWidth | 設置或返回元素的最小寬度。 | 2 |
| navDown | 設置或返回當使用向下箭頭導航鍵時要導航到哪里。 | 3 |
| navIndex | 設置或返回元素的顯示順序。 | 3 |
| navLeft | 設置或返回當使用向左箭頭導航鍵時要導航到哪里。 | 3 |
| navRight | 設置或返回當使用向右箭頭導航鍵時要導航到哪里。 | 3 |
| navUp | 設置或返回當使用向上箭頭導航鍵時要導航到哪里。 | 3 |
| opacity | 設置或返回元素的不透明度。 | 3 |
| order | 設置或返回一個靈活的項目相對于同一容器內其他靈活項目的順序。 | 3 |
| orphans | 設置或返回當元素內有分頁時，必須在頁面底部預留的最小行數。 | 2 |
| outline | 設置或返回在一個聲明中的所有 outline 屬性。 | 2 |
| outlineColor | 設置或返回一個元素周圍的輪廓顏色。 | 2 |
| outlineOffset | 對輪廓進行偏移，并在邊框邊緣進行繪制。 | 3 |
| outlineStyle | 設置或返回一個元素周圍的輪廓樣式。 | 2 |
| outlineWidth | 設置或返回一個元素周圍的輪廓寬度。 | 2 |
| overflow | 設置或返回如何處理呈現在元素框外面的內容。 | 2 |
| overflowX | 規定如果內容溢出元素的內容區域，是否對內容的左/右邊緣進行裁剪。 | 3 |
| overflowY | 規定如果內容溢出元素的內容區域，是否對內容的上/下邊緣進行裁剪。 | 3 |
| padding | 設置或返回元素的內邊距（最多可以有四個值）。 | 1 |
| paddingBottom | 設置或返回元素的下內邊距。 | 1 |
| paddingLeft | 設置或返回元素的左內邊距。 | 1 |
| paddingRight | 設置或返回元素的右內邊距。 | 1 |
| paddingTop | 設置或返回元素的上內邊距。 | 1 |
| pageBreakAfter | 設置或返回元素后的分頁行為。 | 2 |
| pageBreakBefore | 設置或返回元素前的分頁行為。 | 2 |
| pageBreakInside | 設置或返回元素內的分頁行為。 | 2 |
| perspective | 設置或返回 3D 元素被查看的視角。 | 3 |
| perspectiveOrigin | 設置或返回 3D 元素的底部位置。 | 3 |
| position | 設置或返回用于元素定位方法的類型（static、relative、absolute 或 fixed）。 | 2 |
| quotes | 設置或返回嵌入引用的引號類型。 | 2 |
| resize | 設置或返回是否可由用戶調整元素的尺寸大小。 | 3 |
| right | 設置或返回定位元素的右部位置。 | 2 |
| tableLayout | 設置或返回表格單元格、行、列的布局方式。 | 2 |
| tabSize | 設置或返回制表符（tab）字符的長度。 | 3 |
| textAlign | 設置或返回文本的水平對齊方式。 | 1 |
| textAlignLast | 設置或返回當 text-align 屬性設置為 "justify" 時，如何對齊一個強制換行符前的最后一行。 | 3 |
| textDecoration | 設置或返回文本的修飾。 | 1 |
| textDecorationColor | 設置或返回文本修飾的顏色。 | 3 |
| textDecorationLine | 設置或返回文本修飾要使用的線條類型。 | 3 |
| textDecorationStyle | 設置或返回文本修飾中的線條樣式。 | 3 |
| textIndent | 設置或返回文本第一行的縮進。 | 1 |
| textJustify | 設置或返回當 text-align 屬性設置為 "justify" 時，要使用的對齊方法。 | 3 |
| textOverflow | 設置或返回當文本溢出包含它的元素，應該發生什么。 | 3 |
| textShadow | 設置或返回文本的陰影效果。 | 3 |
| textTransform | 設置或返回文本的大小寫。 | 1 |
| top | 設置或返回定位元素的頂部位置。 | 2 |
| transform | 向元素應用 2D 或 3D 轉換。 | 3 |
| transformOrigin | 設置或返回被轉換元素的位置。 | 3 |
| transformStyle | 設置或返回被嵌套的元素如何呈現在 3D 空間中。 | 3 |
| transition | 一個用于設置或返回四個過渡屬性的速記屬性。 | 3 |
| transitionProperty | 應用過渡效果的 CSS 屬性的名稱。 | 3 |
| transitionDuration | 設置或返回完成過渡效果需要花費的時間（以秒或毫秒計）。 | 3 |
| transitionTimingFunction | 設置或返回過渡效果的速度曲線。 | 3 |
| transitionDelay | 設置或返回過渡效果何時開始。 | 3 |
| unicodeBidi | 設置或返回文本是否被重寫，以便在同一文檔中支持多種語言。 | 2 |
| verticalAlign | 設置或返回元素中內容的垂直對齊方式。 | 1 |
| visibility | 設置或返回元素是否應該是可見的。 | 2 |
| whiteSpace | 設置或返回如何處理文本中的制表符、換行符和空格符。 | 1 |
| width | 設置或返回元素的寬度。 | 1 |
| wordBreak | 設置或返回非 CJK 語言的換行規則。 | 3 |
| wordSpacing | 設置或返回文本中單詞之間的空間。 | 1 |
| wordWrap | 允許長單詞或 URL 地址換行到下一行。 | 3 |
| widows | 設置或返回一個元素必須在頁面頂部的可見行的最小數量。 | 2 |
| zIndex | 設置或返回定位元素的堆疊順序。 | 2 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
網頁中，邊框隨處可見，任何塊元素和行內元素都可以設置邊框屬性。例如，div元素可以設置邊框，img元素也可以設置邊框，table元素也可以設置邊框，span元素同樣也可以設置邊框等等。
目標
一個元素的邊框，同時設置邊框的寬度border-width、邊框的外觀border-style和邊框的顏色border-color這三個屬性值。
邊框
在CSS中，使用border-width屬性來定義邊框的寬度。
語法：border-width:像素值;
像素值越大，則線條越大。
不同大小的邊框寬度
在CSS中，使用border-style屬性來定義邊框的外觀
語法：border-style:屬性值;
屬性值有很多種，常用的只有實線和虛線
屬性值
常用的是實線邊框和虛線邊框
各式各樣的邊框外觀
在CSS中，使用border-color屬性來定義邊框的顏色
語法：border-color:顏色值;
說明：顏色值是一個關鍵字或一個16進制的RGB值。
有顏色的邊框
在實際中，一般都會使用簡寫，就要按照順序來設置屬性：border-width、border-style、border-color。
單獨設置邊框要素，寫法很繁瑣
沒有使用簡寫
使用簡寫法，方便簡潔
使用了簡寫
可以分別針對上下左右四條邊框設置單獨的樣式
border-top（上邊框）、border-bottom（下邊框）、border-left（左邊框）、border-right（右邊框）
單獨設置
個性的邊框
個網頁前端是由HTML DOM與嵌套組合形成視圖結加上 CSS 樣式的修飾形成視圖，由JavaScript 接受用戶的交互請求，以事件機制來響應用戶交互操作而形成的。CSS是前臺頁面形式最重要的部分，它負責控制DOM元素的頁面布局和顏色、大小的屬性。
在CSS中有一著名的盒子模型理論，可以用它來控制DOM的位置。基于div+css技術的“盒子模型”的出現大大代替了傳統的table表格嵌套。
雖然其十分好用，但是對于很多新手來說，卻很難搞清楚它幾個屬性和內容之間的聯系個區別。
所有頁面的元素都可以看做一個盒子，占據著一定的頁面空間。一般來說這些被占據的空間往往會比單純的內容要大。因此，可以通過盒子的邊框和距離等參數來控制內容的位置。
Div+CSS 盒子模型
說明：
1、Margin：中文叫外邊距，主要作用是控制邊框外（Border以外）的區域，外邊距是透明的。
2、Border：中文叫邊框，是圍繞在內邊距（Padding）和內容外的邊框。注意，它不是透明的。
3、Padding：中文叫內邊距，控制內容周圍的區域，內邊距是透明的。
4、Content：內容，盒子的內容，顯示文本和圖像。
5、在Css文件中設置的Div的Css.width和Css. height就是內容的寬和高。
6、盒子實際尺寸有可能大于內容尺寸：
盒子模型的總寬度等于content（寬）+padding（左右）+border（左右）+margin（左右）;
盒子模型的總高度等于content（高）+padding（上下）+border（上下）+margin（上下）;
接下來通過實例演示的方式來一一講解Margin、Border、Padding的作用和區別。
頁面如圖所示：
原始樣式
代碼：
HTML:
<body>
<div class="TsetUpper"></div>
<div class="TsetMiddle"></div>
<div class="TsetDown"></div>
</body>
CSS:
.TsetUpper{
width: 400px;
height: 200px;
background-color: black;
position: relative;
margin: auto;
text-align: center;
}
.TsetMiddle{
width: 600px;
height: 200px;
background-color: red;
position: relative;
margin: auto;
}
.TsetDown{
width: 400px;
height: 200px;
background-color: black;
position: relative;
margin: auto;
text-align: center;
}元素邊框：我們可以在CSS邊框屬性中設置元素邊框的樣式和顏色。
按如下代碼設置Div(TsetMiddle)的Border（邊框）：
border-style:solid;
border-width: 10px;
border-color: aqua;刷新頁面如下圖：此時TsetMiddle這個盒子的總寬度已經變成200+30+30了，而且可以設置其底色和線條樣式。
Border
margin 控制周圍的元素區域。margin 沒有背景顏色，是完全透明的。通過margin可以控制元素與四周元素的空隙距離；
按如下代碼設置Div(TsetMiddle)的margin（外邊距）：
margin: 30px auto;刷新頁面如下圖：此時TsetMiddle這個盒子的總寬度已經變成200+30（Border）+30（Margin）+30（Border）+30（Margin）了。
Margin
Padding：當元素的 padding（填充）內邊距被清除時，所釋放的區域將會受到元素背景顏色的填充。
按如下代碼設置Div(TsetMiddle)的margin（外邊距）：
padding: 30px;刷新頁面如下圖：此時TsetMiddle這個盒子的總寬度已經變成200+30（Padding）+30（Border）+30（Margin）+30（Padding）+30（Border）+30（Margin）了。
Padding
1、各屬性的值可以用px為單位，也可以用em，百分比等。
2、可以利用盒子的各種屬性，調整其內容在父容器中的位置。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
