html 如何控制span塊的大小

在html中，可以使用css控制span的大小，注意把span元素的display屬性設置為block，才能控制它的大小。下面小編舉例講解html如何控制span塊的大小。

東西/原料

1
新建一個html文件，定名為test.html，用于講解html若何節制span塊的巨細。
2
在test.html文件內，在p標簽內，利用span標簽建立一行文字，用于測試。
3
在css標簽內，界說一個類名為test的樣式，設置寬度300px，高度50px，布景顏色為紅色，同時設置display屬性為block。
4
在test.html文件內，利用button標簽建立一個按鈕，按鈕名稱為“節制span塊的巨細”。
5
在test.html文件中，給button按鈕綁定onclick點擊事務，當按鈕被點擊時，執行setcss（）函數。
6
在js標簽中，建立setcss()函數，在函數內，經由過程元素名稱獲得span對象，利用addClass（）方式給span對象添加class屬性，設置class屬性為test。
7
在瀏覽器打開test.html文件，點擊按鈕，查看實現的結果。