css 盒子模型

盒子模型

边框

<style>
    #box{
    border:1px solid red;
        /*可以分别设置边框颜色。*/
    border-top:10px solid red;
    }
</style>

border-solid:实线

border-dashed：虚线

border-dotted:点线

border_double：双线

外边框：

margin:20px 200px 30px 100px;

设置与其他元素边界的外边驱离

当四个值时：上，右，下，左

当三个值时：上，左，右，下

当两个值的时候：上/下 左/右

当你一个值时：表示所有边

1，上下的外边距会重叠

2，当两个正数时，以大值为准

3，当一正一副时，做加

4，当两个负数时，以小值为准

外边距注意

行内元素是没有上下外边距的

块级元素有

margin:0px auto;

auto可以让盒子水平居中显示

内边距的使用

<style>
    #box{
        width:300px;
        height:300px;
        /*内边距*/
        padding:30px;
    }
​
​
</style>
​
​
​
<div id="box">
    
</div>

如果有设置元素的背景，则内边距也会有

注意：行内元素的上下的内边距，会有其他元素的内边距重叠

总结：

页面上的元素我们可以把它看成一个盒子，叫做盒子模型

盒子模型：由外边距，边框，内边距，width/height

盒子模型总尺寸 = border-width+padding+margin+内容宽度