當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

html常用样式margin、border怎么使用

發布時間：2025/3/8 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 html常用样式margin、border怎么使用小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

html常用樣式margin、border怎么使用

一、總結

一句話總結：1、margin:auto配合width才能居中；2、border的三個屬性依次是邊框寬度，邊框樣式，邊框顏色

1、html中的border樣式里面記哪三個就OK了？

解答：solid，double，ridge。

二、html常用樣式margin、border怎么使用

1、margin（margin:auto配合width才能居中）

先看margin，margin有4個值：margin:10px 11px 9px 8px; ，按順序分別代表對象與父容器的上、右、下、左的距離值為10px,11px,9px,8px。
如果只寫兩個值：margin:10px 5px; ，表示對象與父容器的上下距離值都是10px，與左右的距離值都是5px。
那么這時候我們來看margin:0 auto; ，這個就表示上下的距離值是0，而左右就是自動適應，也就是我們常說的自動居中。
而你所說的margin:auto; ，就表示上下左右都自動適應。

margin【margin-top、margin-right、margin-bottom、margin-left】包含上、右、下、左四個方位，當你只有倆個參數的話，marin:50px auto;表示上下距離50px，左右自動居中

2、border

實例

設置邊框的樣式：

p{border:5px solid red;}

定義和用法

border 簡寫屬性在一個聲明設置所有的邊框屬性。

可以按順序設置如下屬性：

border-width
border-style
border-color

如果不設置其中的某個值，也不會出問題，比如 border:solid #ff0000; 也是允許的。

border:1px solid #000; 可同時設置上右下左的邊框的樣式寬度及顏色
border-style:solid; 設置上右下左邊框的樣式
border-width:1px 2px 3px 4px; 設置上右下左邊框的寬度
border-color:#000; 設置上右下左邊框的顏色
border-top:1px solid #000; 設置上邊框的樣式寬度及顏色
border-right:1px solid #000; 設置右邊框的樣式寬度及顏色
border-bottom:1px solid #000; 設置下邊框的樣式寬度及顏色
border-left:1px solid #000; 設置左邊框的樣式寬度及顏色

boder:1px solid red;
可以寫在一起，1px是邊框寬度，solid代表邊框的樣式類型，還可以是dotted和dashed的虛線，red是顏色紅色。

border-style?屬性

屬性定義及使用說明

border-style屬性設置一個元素的四個邊框的樣式。此屬性可以有一到四個值。

實例:

border-style:dotted solid double dashed;

上邊框是點狀
右邊框是實線
下邊框是雙線
左邊框是虛線

border-style:dotted solid double;

上邊框是點狀
右邊框和左邊框是實線
下邊框是雙線

border-style:dotted solid;

上邊框和下邊框是點狀
右邊框和左邊框是實線

border-style:dotted;

所有4個邊框都是點狀

屬性值

值描述

none	定義無邊框。
hidden	與 "none" 相同。不過應用于表時除外，對于表，hidden 用于解決邊框沖突。
dotted	定義點狀邊框。在大多數瀏覽器中呈現為實線。
dashed	定義虛線。在大多數瀏覽器中呈現為實線。
solid	定義實線。
double	定義雙線。雙線的寬度等于 border-width 的值。
groove	定義 3D 凹槽邊框。其效果取決于 border-color 的值。
ridge	定義 3D 壟狀邊框。其效果取決于 border-color 的值。
inset	定義 3D inset 邊框。其效果取決于 border-color 的值。
outset	定義 3D outset 邊框。其效果取決于 border-color 的值。
inherit	規定應該從父元素繼承邊框樣式。

三、自己樣例

1、截圖

2、代碼

1 <!DOCTYPE html> 2 <html lang="cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <link rel="stylesheet" href="css/amazeui.min.css"> 7 <script language="JavaScript" type="text/javascript" src="js/jquery-3.3.1.min.js" ></script> 8 <script src="js/jquery.min.js"></script> 9 <script src="js/amazeui.min.js"></script> 10 <style> 11 .testCenter{ 12 /*有寬度之后加margin：auto才能實現自動居中*/ 13 width: 400px; 14 height: 300px; 15 margin:100px auto; 16 border: 15px ridge #0b6fa2; 17 background: bisque; 18 19 } 20 .formStyle{ 21 width: 200px; 22 margin:100px auto; 23 } 24 </style> 25 </head> 26 <body> 27 <div class="testCenter" > 28 <div class="formStyle"> 29 <form action="" class="am-form" data-am-validator> 30 <p> 31 <input type="text" class="am-form-field" placeholder="日歷組件" data-am-datepicker readonly required /> 32 </p> 33 <p><button class="am-btn am-btn-primary">提交</button></p> 34 </form> 35 </div> 36 </div> 37 38 </body> 39 </html>

四、測試題-簡答題

1、html中的border樣式里面記哪三個就OK了？

解答：solid，double，ridge。

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的html常用样式margin、border怎么使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。