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、代码

 <!DOCTYPE html>

 <html lang="cn">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <link rel="stylesheet" href="css/amazeui.min.css">

     <script language="JavaScript" type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>

     <script src="js/jquery.min.js"></script>

     <script src="js/amazeui.min.js"></script>

     <style>

         .testCenter{

             /*有宽度之后加margin：auto才能实现自动居中*/

             width: 400px;

             height: 300px;

             margin:100px auto;

             border: 15px ridge #0b6fa2;

             background: bisque;

         }

         .formStyle{

             width: 200px;

             margin:100px auto;

         }

     </style>

 </head>

 <body>

 <div class="testCenter" >

     <div class="formStyle">

         <form action="" class="am-form" data-am-validator>

             <p>

                 <input type="text" class="am-form-field" placeholder="日历组件" data-am-datepicker readonly required />

             </p>

             <p><button class="am-btn am-btn-primary">提交</button></p>

         </form>

     </div>

 </div>

 </body>

 </html>

四、测试题-简答题

1、html中的border样式里面记哪三个就OK了？

解答：solid，double，ridge。