HTML5教學今天要教的專有名詞嘍!! 盒子模型你聽過嗎? 知道是什麼嗎? 只要你是前端工程師就一定要會的!! 快往下看吧~
1. 區塊"<span>"與"<div>"的屬性設定
|
屬性名稱 |
說明 |
設定範例 |
|
border-style |
設定邊框的線條樣式，可設定為實線、虛線、點點等。 |
border-style: dotted； border-style: dashed； border-style: double； border-style: solid； border-style: groove； border-style: ridge； border-style: inset； border-style: outset； |
|
border-width |
設定邊框的線條粗細 small、large、pt、px、cm、% |
border-width:6px; |
|
border-color |
設定邊框的顏色 也可以直接使用"bold"指定之 |
border-color:blue; |
|
border-top border-left border-bottom border-right |
針對邊框的上方線條做單獨調整 針對邊框的左方線條做單獨調整 針對邊框的下方線條做單獨調整 針對邊框的右方線條做單獨調整 |
border-top:2px dotted blue; (設定值依序為粗細、線條樣式、顏色) |
2. 跟外框相關的CSS設定 (常用)
|
屬性名稱 |
說明 |
設定範例 |
|
width |
區塊寬度 |
width: 600px； |
|
height |
區塊高度 |
height: 400px； |
|
margin |
邊界距離設定 共四個數值，分別為上、右、下、左 |
margin:30px 10px 10px 30px; |
|
border-radius |
邊界方框導圓角的圓角程度，數值越大越圓 共四個數值，分別為上、右、下、左 |
border-radius:50px 0px 50px 0px； |
|
background-color |
區塊背景顏色 |
background-color:red； |
|
background-image |
區塊背景圖片 |
background-image:url； |
|
background-repeat |
區塊背景圖片重複方式 分別有 no-repeat(不重複)、 repeat-x、repeat(重複)、 repeat-y |
background-repeat:no-repeat； |
|
background-position |
區塊背景圖片放置位置 分別有top,center,bottom等，也可能是百分比或數值 |
background-position:center left； |
其實除了文字之外，前端工程師在HTML5教學網頁的各個元素進行 CSS 格式設定時，有一個 「盒子模型 (box model) 」 的概念：就是所有要被設定的元素，都會被視為一個盒子"<span>"或"<div>"。
以上這兩種身為前端工程師不可不知的HTML5教學你學會了嗎？
其他閱讀
SEO優化課程教你簡單明瞭地快速設定好robots meta!!
Python課程跨界電影圈?日本人氣AI漫畫改編電影明年上映!!
網頁設計課程必學CSS基礎一:要怎麼在HTML中導入化妝師CSS?
2018網路行銷課程SEO八部曲第五部:圖片也要SEO優化?
留言列表
