盒子模型及边框使用

盒子模型

margin:外边距

border：边框

padding：内边距

边框

1. 边框的粗细
2. 边框的样式
3. 边框的颜色

我们在IDEA里面输入一串代码

<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>用户名</span>
        <input type="text">
        </div>
        <div>
            <span>密码:</span>
            <input type="text">
        </div>
        <div>
            <span>邮箱:</span>
            <input type="text">
        </div>
        </form>



</div>

在body里面写入

我们浏览器打开一下

就会发现是这个样子的很丑，我们可以给他加点框框

我们在head里面输入

<style>
#box{

    width: 300px;

   /*border:  粗细 样式  颜色*/
    border:1px solid red;
}
</style>

就会发现多了一个红色的框框

但是仔细一看，就会发现这个红色的框框并没有，紧贴着右上角，而是多出来一点

我们右键审查元素，看一下body这个标签右边的盒子

就会发现右边这个盒子margin的数值默认为8

我们去IDEA里面的style里面去把外边距设置为0

红色框框紧紧的靠在了边边

注意

所以我们要养成一个习惯

在写代码的时候，一定要把body h1 ul li标签之类的，margin值归0

下划线去掉

也就是

body,h1,ul,li{
    margin:0;
    padding:0;
    text-decoration:none;
}

边框——虚线

    #L2:nth-of-type(1) input{
        border: 3px solid black;  /*solid  是实线的意思*/
    }
    #L3{
        border: 3px dashed red; /* dashed是虚线的意思*/
    }
    #L4{
        border: 3px solid darkblue;
    }